CloseButton
Github
StorybookCloseButton provides a standard close/dismiss button with an X icon for use in dialogs, modals, and other dismissible UI elements.
Importing
The component can be imported via:
Usage
The CloseButton component provides a standard close button that can be used in dialogs, alerts, modals, and other dismissible UI elements.
Accessibility
The CloseButton component:
- Has
aria-label="Close"by default for screen readers - Maintains keyboard focus states for keyboard navigation
- Supports disabled states that are communicated to assistive technology
API
PlumaCloseButton extends Box
If true, the button will automatically show the spinner when the onClick function is called and it returns a promise.
If false, the spinner will only show if the isLoading prop is set to true. By default, this is true.
The URL passed into the link component (or a tag)
Disables the button. Use this instead of the native disabled prop, to make sure non-button elements (when used with as) get the correct styles
When this flag is true, an a tag will be used instead of the provider's linkComponent, even if it exists.
Additionally, target="_blank" rel="noopener noreferrer" will be added automatically
Shows a spinner in the button overlaid on top of the button's content. The button will act as if disabled while in the loading state.
The function to call when the button is clicked
This is passed into the provider's linkComponent.
It can be used by the link component implementation to handle replaceState instead of pushState
Default:lg
The size of the "close" icon.
This allows turning off the automatic addition of target="_blank" rel="noopener noreferrer".
This can be used for links to other protocols like mailto: