Amplify UI

VisuallyHidden

VisuallyHidden is used to visually hide content while leaving it available for screen readers.

There are some common scenarios where you might need the VisuallyHidden primitive:

  • To provide an accessible alternative to icon only buttons
  • To provide additional context for screen reader users regarding interface interactions.
  • Combined with ARIA attributes such as aria-live, to announce context when a change in the interface occurs.

Since the VisuallyHidden element is hidden using the CSS clip property, and not display: none, the element is still available to assistive technologies.

Note

It's a good practice to consider if your VisuallyHidden content would be better served as visible for all; that way everyone benefits from the additional context.

Usage

Import the VisuallyHidden primitive.

import { Button, VisuallyHidden, Icon } from '@aws-amplify/ui-react';

const IconDone = () => {
  return (
    <Icon
      pathData="M9 16.2001L4.8 12.0001L3.4 13.4001L9 19.0001L21 7.0001L19.6 5.6001L9 16.2001Z"
      ariaLabel=""
    />
  );
};

export const DefaultVisuallyHiddenExample = () => {
  return (
    <Button variation="primary">
      <VisuallyHidden>Mark as complete</VisuallyHidden>
      <IconDone />
    </Button>
  );
};

CSS Styling

Target classes

ClassDescription
amplify-visually-hiddenTop level element that wraps the VisuallyHidden primitive
No variables available for this component

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.