VisuallyHidden

Hide element visually but keep it accessible for screen readers

Source

View source code

Docs

Edit this page

PackageIcon

@mantine/core

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 { HeartIcon } from '@phosphor-icons/react';
import { ActionIcon, VisuallyHidden } from '@mantine/core';

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

Transition

Mantine extensions