Close-button
A Close-button is a compact button that triggers a close action for dialogs, panels, or other dismissible UI elements.
When to use
- Use when you need a clear, single‑action control to dismiss a modal, toast, or overlay.
- Use the Small size for inline contexts and the Large size when a larger touch target is required.
When not to use
- Don't use as the primary call‑to‑action; choose a
ButtonorPrimaryButtoninstead. - Don't use when the action is not a dismissal; select a more appropriate control.
Variants
| Variant | Description | When to use |
|---|---|---|
| Small (default) | Compact button size suitable for most UI placements. | Default size for inline close actions. |
| Medium | Medium‑sized button offering a slightly larger touch target. | When a larger target improves usability. |
| Large | Large button size for high‑visibility or touch‑friendly contexts. | For prominent dismissals on touch devices. |
| Default (state) | Standard visual state with no interaction. | Normal resting appearance. |
| Hover | Visual feedback when the pointer hovers over the button. | Provides hover indication. |
| Focus | Outline or focus indicator when keyboard‑focused. | Supports keyboard navigation. |
| Pressed | Visual feedback while the button is being activated. | Indicates active press. |
| Disabled | Dimmed appearance and interaction disabled. | When the close action is not available. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "large" | "medium" | "small" | "small" | Controls the button's size. |
state | "hover" | "pressed" | "focus" | "default" | "disabled" | "default" | Reflects the current interaction state. |
disabled | boolean | false | When true, disables interaction and applies the disabled visual style. |
Accessibility
- Provide an accessible name (e.g.,
aria-label="Close"or a visible label) so screen readers convey the purpose. - Ensure the button is reachable via keyboard and activates with Enter or Space.
- When
disabledistrue, remove the button from the tab order (tabindex="-1"). - Maintain a contrast ratio of at least 3:1 against the background for both default and hover/focus states.
Changelog
- 2026-06-29 — Initial doc generated from Figma.