Overview

Hides content visually, in an accessible way.

Preview

Settings

Code

import { Button } from '@inpulse-ui/button';
import { Gear } from '@inpulse-ui/icons';
import { VisuallyHidden } from '@inpulse-ui/visually-hidden';

export function Demo() {
  return (
    <Button size="md" icon>
      <Gear />
      <VisuallyHidden>Settings</VisuallyHidden>
    </Button>
  );
}

About

This component is a slight expansion of the Visually Hidden developed and maintained by Radix UI.

Useful in certain scenarios as an alternative to the traditional use of aria-label or aria-labelledby.

Installation

pnpm

pnpm add @inpulse-ui/visually-hidden

bun

bun add @inpulse-ui/visually-hidden

yarn

yarn add @inpulse-ui/visually-hidden

npm

npm install @inpulse-ui/visually-hidden

API Reference

Root

The only component of Visually Hidden.

Prop	Type	Default Value	Required
asChild	boolean	false	No
label	string	-	No

Usage

Anything you put inside this component or set with label will be hidden from the screen but will be announced by screen readers.

<VisuallyHidden>Settings</VisuallyHidden>

Examples

Children

This is the most common way to use Visually Hidden.

Preview

Settings

Code

import { Button } from '@inpulse-ui/button';
import { Gear } from '@inpulse-ui/icons';
import { VisuallyHidden } from '@inpulse-ui/visually-hidden';

export function Demo() {
  return (
    <Button size="md" icon>
      <Gear />
      <VisuallyHidden>Settings</VisuallyHidden>
    </Button>
  );
}

Label

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

Preview

Settings

Code

import { Button } from '@inpulse-ui/button';
import { Gear } from '@inpulse-ui/icons';
import { VisuallyHidden } from '@inpulse-ui/visually-hidden';

export function Demo() {
  return (
    <Button size="md" icon>
      <Gear />
      <VisuallyHidden label="Settings" />
    </Button>
  );
}