Skip to content
Layout

VisuallyHidden

Text for screen readers only, and skip links.

import { VisuallyHidden } from "@flinbu/seed";

A skip link and extra context

Skip to contentPress Tab: a skip link appears in the corner.94% of components use tokens
import { Stack, VisuallyHidden } from "@flinbu/seed";

<Stack gap="sm">
  <VisuallyHidden as="a" href="#content" focusable>Skip to content</VisuallyHidden>
  <span className="text-secondary body-body-3-regular">Press Tab: a skip link appears in the corner.</span>
  <span className="text-primary heading-h5-semibold">94%<VisuallyHidden> of components use tokens</VisuallyHidden></span>
</Stack>

Use it for

  • Context for a number or an icon; a Skip to content link.

Use something else for

  • Anything sighted people would benefit from: show it.

Props

PropTypeDefaultDescription
focusableboolean–Visible while focused.
asElementType'span'Use a for skip links.

Accessibility

  • focusable shows it while focused, for skip links.