VisuallyHidden

VisuallyHidden is a common techinique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.

Import

import { VisuallyHidden } from '@sajari-ui/core';

import { VisuallyHidden } from '@sajari-ui/core';

Example

function Example() {
  return (
    <Button>
      <VisuallyHidden>Checkmark</VisuallyHidden>
      <Icon name="check" />
    </Button>
  );
}

function Example() {
  return (
    <Button>
      <VisuallyHidden>Checkmark</VisuallyHidden>
      <Icon name="check" />
    </Button>
  );
}

VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.

This component doesn't have any custom props.

Name	Type	Description
`children`	`React.ReactNode`	The content to be hidden visually