DismissButton
A visually hidden button that can be used to allow screen reader users to dismiss a modal or popup when there is no visual affordance to do so.
| install | yarn add @react-aria/overlays |
|---|---|
| version | 3.8.1 |
| usage | import {DismissButton} from '@react-aria/overlays' |
Introduction#
DismissButton is a visually hidden button that can be used by screen reader users to close an overlay
in the absence of a visual dismiss button. This may typically be used with a menu or a popover since they often
forgo a visual dismiss button, instead allowing users to use the Escape key to dismiss the menu or popover.
Props#
Events
| Name | Type | Default | Description |
onDismiss | () => void | — | Called when the dismiss button is activated. |
Accessibility
| Name | Type | Default | Description |
id | string | — | The element's unique identifier. See MDN. |
aria-label | string | — | Defines a string value that labels the current element. |
aria-labelledby | string | — | Identifies the element (or elements) that labels the current element. |
aria-describedby | string | — | Identifies the element (or elements) that describes the object. |
aria-details | string | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
Example#
See useMenuTrigger and useOverlayTrigger
for examples of how to use DismissButton with a menu or popover.