Visually hides content while keeping it accessible to screen readers.
This text is followed by a paragraph that is visually hidden but accessible to screen readers. Try using a screen reader to hear it, or inspect the DOM to see it's there.
import { VisuallyHidden } from '@backstage/ui';
<VisuallyHidden>
This content is visually hidden but accessible to screen readers
</VisuallyHidden>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content to hide visually while remaining accessible to screen readers. |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
This component also accepts all standard HTML div attributes.
<Flex direction="column" gap="4">
<VisuallyHidden>
<Text as="h2">Footer links</Text>
</VisuallyHidden>
<Text as="p">
<a href="#">About us</a>
</Text>
<Text as="p">
<a href="#">Jobs</a>
</Text>
<Text as="p">
<a href="#">Terms and Conditions</a>
</Text>
</Flex>Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
bui-VisuallyHidden