VisuallyHidden

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Icon-only button

The icon is decorative (aria-hidden); the hidden text gives the button its name. A screen reader says “Close, button”.

Close

LightDark

Copy code

import { Icon, VisuallyHidden } from '@bigbang/ui';

export default function IconButton() {
  return (
    <button type="button" className="inline-flex size-10 items-center justify-center rounded-md border border-line-default">
      <Icon name="x" />
      <VisuallyHidden>Close</VisuallyHidden>
    </button>
  );
}

Skip link

With focusable the content shows while it has focus. A keyboard user reaches the link with Tab and jumps to the main content.

Reach this example with Tab; the link appears on focus.Skip to content

LightDark

Copy code

import { Text, VisuallyHidden } from '@bigbang/ui';

export default function SkipLink() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Text size="sm" tone="subtle">
        Reach this example with Tab; the link appears on focus.
      </Text>
      <VisuallyHidden focusable render={<a href="#main" className="rounded-md bg-surface-raised px-md py-xs text-fg-link" />}>
        Skip to content
      </VisuallyHidden>
    </div>
  );
}

Table caption

render={<caption />} gives a table an invisible name.

Item list

Item	Value
Sample text	Sample text

LightDark

Copy code

import { VisuallyHidden } from '@bigbang/ui';

export default function TableCaption() {
  return (
    <table className="type-body-md text-fg-default">
      <VisuallyHidden render={<caption />}>Item list</VisuallyHidden>
      <thead>
        <tr>
          <th className="pe-xl text-start">Item</th>
          <th className="text-start">Value</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td className="pe-xl">Sample text</td>
          <td>Sample text</td>
        </tr>
      </tbody>
    </table>
  );
}

Search field label

Gives a field with no visible label a hidden one. A placeholder does not replace a label.

Search

LightDark

Copy code

import { VisuallyHidden } from '@bigbang/ui';

export default function SearchLabel() {
  return (
    <label className="flex items-center gap-sm">
      <VisuallyHidden>Search</VisuallyHidden>
      <input type="search" placeholder="Search" className="type-body-md h-10 rounded-md border border-line-default bg-surface-raised px-md" />
    </label>
  );
}