# Visually Hidden
> Hide an element visually but keep it available for screen readers and other assistive technologies.

## Import

```js
import { VisuallyHidden } from '@gemini-suite/vera-react';
```

## Examples

### Basic

`VisuallyHidden` has all the styles necessary to visually hide content, but keep it accessible for screen readers. This is useful in certain scenarios as an alternative to labelling with `aria-label` or `aria-labelledby`.

```jsx
<Button withLoneIcon>
  <SvgIcon iconName="undo" />
  <VisuallyHidden>Undo</VisuallyHidden>
</Button>
```

---

## API Reference

| Name | Type                                                      | Default | Description                                                                                                                                                                                                                                                                                  | Required |
| ---- | --------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as` | `keyof JSX.IntrinsicElements \| React.ComponentType<any>` | `span`  | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](/get-started/composition#polymorphism) guide. |          |