CloseButton
A small icon-only button for dismissing modals, toasts, chips, or any dismissible surface.
Default
The default CloseButton renders an X icon and is always accessible, even without an explicit aria-label.
<CloseButton />Installation
import { CloseButton } from "madagent";Sizes
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
<CloseButton size="sm" />
<CloseButton size="md" />
<CloseButton size="lg" />
</div>Custom Icon
Pass children to render a custom icon or label instead of the default X icon.
Custom icon
<CloseButton aria-label="Delete item">
<Trash2 size={20} aria-hidden="true" />
</CloseButton>Text content
Text children double as the accessible name, so no explicit aria-label is required.
<CloseButton>Dismiss</CloseButton>Disabled
A disabled CloseButton cannot be clicked. It uses the semantic --md-content-disabled token for its icon color rather than opacity.
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
<CloseButton disabled />
<CloseButton size="lg" disabled />
</div>In Context
A common placement: a flex row banner with the CloseButton at the inline-end, vertically centered against the content at any banner height. Flex row order and logical properties keep it on the correct side in both LTR and RTL.
Update available
A new version is ready to install.
<div
style={{
display: "flex",
alignItems: "center",
gap: "0.75rem",
width: "18rem",
padding: "0.75rem 1rem",
borderRadius: "0.75rem",
border: "1px solid var(--md-border-subtle)",
backgroundColor: "var(--md-surface-parent)",
}}
>
<div style={{ flex: 1, minWidth: 0 }}>
<h3 style={{ margin: 0, fontSize: "0.9375rem", fontWeight: 600 }}>
Update available
</h3>
<p
style={{
marginBlockStart: "0.25rem",
marginBlockEnd: 0,
fontSize: "0.875rem",
color: "var(--md-content-secondary)",
}}
>
A new version is ready to install.
</p>
</div>
<CloseButton size="sm" />
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm""md""lg" | "md" | Controls the button and icon dimensions |
children | ReactNode | - | Custom icon or content. Defaults to an X icon |
disabled | boolean | false | Disables the button using the native disabled attribute |
type | "button""submit""reset" | "button" | Native button type attribute |
aria-label | string | - | Accessible name. Defaults to "Close" when no accessible text is otherwise provided (e.g. the default or a custom icon); an explicit aria-label always wins |
onClick | (e: MouseEvent<HTMLButtonElement>) => void | - | Called when the button is clicked |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
تحديث متوفر
Usage
<div
style={{
display: "flex",
alignItems: "center",
gap: "0.75rem",
width: "16rem",
padding: "0.75rem 1rem",
borderRadius: "0.75rem",
border: "1px solid var(--md-border-subtle)",
backgroundColor: "var(--md-surface-parent)",
}}
>
<h3 style={{ margin: 0, flex: 1, minWidth: 0, fontSize: "0.9375rem", fontWeight: 600 }}>
تحديث متوفر
</h3>
<CloseButton size="sm" aria-label="إغلاق" />
</div>