Close Button

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

2xs
xs
sm
md

Installation

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

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

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

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

<CloseButton size="2xs" aria-label="Close" /> {/* 16px, 1.6px stroke */}<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>