VisuallyHidden

Hides content visually, in an accessible way. Useful in certain scenarios as an alternative to the traditional use of aria-label or aria-labelledby.

Installation

pnpm add @inpulse-ds/visually-hidden

Usage

import { VisuallyHidden } from '@inpulse-ds/visually-hidden';

return (
    <Button size="md" icon>
      <Gear />
      <VisuallyHidden>Settings</VisuallyHidden>
    </Button>
  );

Examples

####Children

Anything you place inside this component will be hidden from the screen but announced by screen readers.

Label

It is possible to obtain the same result through the label property.