CloseButton
A button that renders an × SVG icon, used to dismiss dialogs, alerts, drawers, and other overlays. Accepts the same visual variants as ActionIcon and defaults to the subtle variant.
Default
<CloseButton />Variants
<CloseButton variant="subtle" />
<CloseButton variant="filled" />
<CloseButton variant="light" />
<CloseButton variant="outline" />
<CloseButton variant="default" />Sizes
<CloseButton size="xs" />
<CloseButton size="sm" />
<CloseButton size="md" />
<CloseButton size="lg" />
<CloseButton size="xl" />With color
<CloseButton color="red" variant="light" />
<CloseButton color="blue" variant="filled" />
<CloseButton color="green" variant="outline" />Disabled
<CloseButton disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs'|'sm'|'md'|'lg'|'xl'|number|string | — | Width and height of the button |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border-radius of the button |
variant | 'subtle'|'filled'|'light'|'outline'|'default'|'transparent' | 'subtle' | Visual style variant |
color | string | — | Theme color applied to the button |
disabled | boolean | — | Prevents interaction and applies disabled styling |
iconSize | number|string | — | Overrides the × SVG icon size |
aria-label | string | 'Close' | Accessible label for the button |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |