# Usage

`<VisuallyHidden />` provides text for screen readers that is visually hidden. It is the logical opposite of the aria-hidden attribute.

`import { VisuallyHidden } from "aptible-design-kit"`

In the following example, screen readers will announce "Sync" and will ignore the icon; the browser displays the icon and ignores the text.

```jsx
<button>
  <VisuallyHidden>Sync</VisuallyHidden>
  <Icon icon="sync" />
</button>
```

Further reading: https://a11yproject.com/posts/how-to-hide-content/

## Props

| Prop | Type | Required | Description |
|:--- |:--- |:--- |:--- |
| className | ClassName | No | CSS Classname applied to underlying div
| children | React.Node | Yes | Child nodes