Close Button

The circular ✕ used to dismiss announcements, toasts, modals, and drawers. Every size renders its own glyph with a literal (not scaled) stroke — 2px at xs/sm, 2.5px at md — so the weight stays pixel-true.

xs
sm
md

Installation

You can add this close button component using our CLI or manually:

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add close-button

Sizes

Three sizes via the size prop — 20, 24, and 32px. Always pass an aria-label, the control has no visible text.

<CloseButton size="xs" aria-label="Close" /> {/* 20px, 2px stroke */}<CloseButton size="sm" aria-label="Close" /> {/* 24px, 2px stroke */}<CloseButton size="md" aria-label="Close" /> {/* 32px, 2.5px stroke */}

In a modal header

Modal title

<header className="flex items-center justify-between p-4"> <p className="text-body-medium text-text-primary">Modal title</p> <CloseButton size="md" aria-label="Close modal" onClick={onClose} /></header>