VisuallyHidden

VisuallyHidden defines how EnterUI handles hide text visually while keeping it available to assistive technology, including default structure, accessible states, and token-driven styling.

#Default usage

<IconButton aria-labelledby="hidden-menu-label">
  <VisuallyHidden id="hidden-menu-label">Open navigation</VisuallyHidden>
  M
</IconButton>

#Import

import { VisuallyHidden } from "@froggdesign/enter-ui-react";

#Accessibility

VisuallyHidden uses the standard clipping pattern. It is intended for short labels or helper text, not for hiding important visible content.

#API

• Renders a span.
• Accepts native span props and className.

#Styling

Uses .eui-visually-hidden with standard accessible hiding CSS.