VisuallyHidden

Hide element visually but keep it accessible for screen readers

Import

Usage

VisuallyHidden is a utility component that hides content visually but leaves it available to screen readers.

For example, it can be used with ActionIcon component:

import { ActionIcon, VisuallyHidden } from '@mantine/core';
import { IconHeart } from '@tabler/icons';

function Demo() {
  return (
    <ActionIcon>
      <IconHeart />
      <VisuallyHidden>Like post</VisuallyHidden>
    </ActionIcon>
  );
}