Docs / Components / Close button

Close button

A generic, icon-only close control for dismissing alerts, modals, toasts, and offcanvas panels. It ships the Bootstrap “×” glyph, a built-in accessible label, and a white variant for dark backgrounds.

Import

import { CloseButton } from '@metatoy/bootstrap-styled';

Variants

CloseButton renders a native <button type="button"> with the “×” glyph. Add disabled to dim and disable it, or white to invert the glyph for placement on a dark surface. Wire dismissal with the standard onClick handler.

Props

CloseButton accepts all native <button> attributes (onClick, disabled, aria-label, className, …). The only library-specific prop is white.

Theming

The control reads its own --bs-btn-close-* tokens: --bs-btn-close-color, --bs-btn-close-bg (the glyph SVG), --bs-btn-close-opacity, --bs-btn-close-hover-opacity, and --bs-btn-close-disabled-opacity. The white prop toggles --bs-btn-close-filter to invert the glyph. Override any of these on a subtree to restyle the button without touching the component.

<div style={{ '--bs-btn-close-opacity': 0.8 }}>
<CloseButton onClick={handleClose} />
</div>

Accessibility

The button includes a default aria-label="Close" so assistive tech announces its purpose even though it has no visible text — pass your own aria-label to localize or override it. Because it renders a real <button>, it’s focusable and keyboard operable out of the box. Always attach an onClick that actually dismisses the associated element.

Explore in Ladle

Open in Ladle ↗

CloseButton has no dedicated Ladle story; the link opens the component explorer index.