VisuallyHidden

<VisuallyHidden> largely does what it says on the tin: it hides content visually while keeping it accessible to screen readers.

Examples

Text for Assistive Devices

View standalone

A notification badge might make sense on its own to fully sighted users but require extra context for screen reader users who are basing their understanding purely on the content read aloud.

3 notifications

Code

<Box>
  3{' '}
  <ue>
    notifications
  </ue>
</Box>

Props

`atoms`

Applies permitted design system styles. See styling documentation for more.