CloseButton
An icon-only button for dismissing overlays, notifications, and other closeable surfaces.
API Reference
Original primitive API
Behavior, accessibility details, and low-level props are documented by Base UI.
Basic
Draft saved
The notification can be dismissed.
import { CloseButton } from "moduix";export function CloseButtonDemo() { return ( <div className={styles.surface}> <div className={styles.content}> <p className={styles.title}>Draft saved</p> <p className={styles.description}>The notification can be dismissed.</p> </div> <CloseButton aria-label="Dismiss notification" /> </div> );}.surface { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); width: min(20rem, calc(100vw - var(--spacing-8))); padding: var(--spacing-4); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-popover); color: var(--color-popover-foreground); box-shadow: var(--shadow-sm);}.content { display: grid; gap: var(--spacing-1); min-width: 0;}.title { margin: 0; color: var(--color-foreground); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--line-height-text-sm);}.description { margin: 0; color: var(--color-muted-foreground); font-size: var(--text-sm); line-height: var(--line-height-text-sm);}Full list of component variables available for project-level overrides.
| Property | Default | Description |
|---|---|---|
| --close-button-bg | transparent | Controls close button background. |
| --close-button-bg-hover | var(--color-muted) | Controls hover background color. |
| --close-button-color | var(--color-muted-foreground) | Controls icon color. |
| --close-button-color-hover | var(--color-foreground) | Controls hover icon color. |
| --close-button-disabled-opacity | var(--opacity-disabled) | Controls disabled opacity. |
| --close-button-focus-ring-color | var(--color-ring) | Controls focus ring color. |
| --close-button-focus-ring-offset | 2px | Controls focus ring offset. |
| --close-button-focus-ring-width | var(--border-width-md) | Controls focus ring width. |
| --close-button-icon-size | 12px | Controls nested SVG icon size. |
| --close-button-radius | var(--radius-sm) | Controls close button corner radius. |
| --close-button-size | 28px | Controls close button width and height. |
| --close-button-transition | var(--transition-default) | Controls transition timing. |
Interactive variables scoped for docs preview without changing size scale tokens.
| Property | Value | Default | Description |
|---|---|---|---|
| --close-button-bg | transparent | Controls close button background. | |
| --close-button-bg-hover | var(--color-muted) | Controls hover background color. | |
| --close-button-color | var(--color-muted-foreground) | Controls icon color. | |
| --close-button-color-hover | var(--color-foreground) | Controls hover icon color. | |
| --close-button-disabled-opacity | var(--opacity-disabled) | Controls disabled opacity. | |
| --close-button-focus-ring-color | var(--color-ring) | Controls focus ring color. | |
| --close-button-focus-ring-offset | 2px | Controls focus ring offset. | |
| --close-button-focus-ring-width | var(--border-width-md) | Controls focus ring width. | |
| --close-button-icon-size | 12px | Controls nested SVG icon size. | |
| --close-button-radius | var(--radius-sm) | Controls close button corner radius. | |
| --close-button-size | 28px | Controls close button width and height. | |
| --close-button-transition | var(--transition-default) | Controls transition timing. |
Anatomy
CloseButton is composed as a single icon button slot. It renders a default close icon, or custom icon
children when provided.
CloseButton
└─ icon (default) | custom children| Part | Role |
|---|---|
CloseButton | Interactive close control built on Button semantics and accessibility. |
Composition
Use CloseButton props such as children to replace the default icon, render to compose it
with another element, nativeButton for non-button render targets, and focusableWhenDisabled
when a disabled control should remain in the tab order. The default accessible name is Close;
pass aria-label for the specific surface being dismissed.
Use className to style the root button. The component has no hidden service slots, so styling
does not require classNames.
Examples
Custom Icon
Pass children to replace the default icon with an icon from your application or icon library.
import { CloseButton, CloseLineIcon } from "moduix";export function CloseButtonCustomIconDemo() { return ( <CloseButton aria-label="Close panel"> <CloseLineIcon /> </CloseButton> );}Disabled
Use focusableWhenDisabled when a disabled close button should remain reachable by keyboard focus.
import { CloseButton } from "moduix";export function CloseButtonDisabledDemo() { return ( <div className={styles.row}> <CloseButton aria-label="Close panel" disabled /> <CloseButton aria-label="Close panel" disabled focusableWhenDisabled /> </div> );}.row { display: flex; align-items: center; justify-content: center; gap: var(--spacing-3);}Custom Styles
Pass className to style the button root with CSS Modules, Tailwind CSS, or CSS-in-JS.
import { CloseButton } from "moduix";export function CloseButtonCustomStylesDemo() { return <CloseButton className={styles.customButton} aria-label="Close message" />;}.customButton { --close-button-size: 2.25rem; --close-button-icon-size: 1rem; --close-button-bg: var(--color-primary); --close-button-bg-hover: var(--color-foreground); --close-button-color: var(--color-primary-foreground); --close-button-color-hover: var(--color-primary-foreground);}