CloseButton
Closes or dismisses the thing it sits in: a notice, a panel or a dialog. Inside a React Aria Dialog, slot="close" closes it with no handler.
- CloseButton
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, CloseButton
Your export is ready. It stays here until you close it.
Dark theme, CloseButton
Your export is ready. It stays here until you close it.
High contrast theme, CloseButton
Your export is ready. It stays here until you close it.
UsageLink to the section Usage
import { CloseButton } from '@skribly/ui/actions'<CloseButton label="Dismiss export notice" onPress={dismiss} />
<CloseButton slot="close" label="Close dialog" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Name it after what closes, such as "Close settings", so a list of buttons read out of context still makes sense.
- When it removes the element that had focus, move focus somewhere sensible, as the demo does with the button that brings the notice back.
This demo runs through axe in all three themes on every test run. See what the tests check.