/// Utilities

CloseButton

A square, icon-only × dismiss control with a required aria-label — the shared close affordance for overlays.

import { CloseButton } from "@protocore/pds";

View as Markdown

Basics

A sharp, square × button. It ships with a default aria-label of "Close" — override it whenever the surface it dismisses has a more specific name.

Variants and sizes

subtle (default) is a transparent ghost that fills on hover; filled sits on a faint fill at rest. Two sizes — sm 24px and md 28px — to match the density of the chrome around it.

When to use it

CloseButton is the one standardized × used across the library's dismissible surfaces — Dialog, Sheet, Notification, and Banner all reach for the same crossed-stroke glyph and interaction model, so "close" looks and behaves identically everywhere.

Reach for it whenever you need a bare dismiss affordance. If your control carries a *different* icon or a text label, use an IconButton or Button instead — CloseButton is deliberately locked to the × glyph.

Usage

Give it an `aria-label` describing what it closes when "Close" is ambiguous.
Use `sm` inside dense chrome (chips, list rows) and `md` on cards and dialogs.
Pair it with the surface it dismisses, aligned to the top-inline-end corner.
Let its own hover feedback signal interactivity — don't wrap it in another button.

Don't

Don't use it for a non-dismiss action — its × glyph promises "close".
Don't remove or blank the `aria-label`; the glyph carries no text.
Don't scale it up as a primary action — that's a Button.
Don't stack several close buttons on one surface.

Accessibility

Keys	Action
`Tab`	Moves focus to the button.
`Enter / Space`	Activates it (native button semantics).

Renders a real `<button type="button">`, so it is keyboard- and screen-reader-operable for free.
Requires an accessible name via `aria-label` (default "Close") since the × glyph is `aria-hidden`.
The glyph is an inline SVG (crossed strokes), not a text × codepoint, so it never renders as an emoji and always inherits `currentColor`.
Server-safe: it carries no client state, only CSS `:hover`/`:focus-visible` states.

`CloseButton` props

Prop	Type	Default	Description
`aria-label`	`string`	`Close`	Accessible name for the control — required, since the × glyph carries no text.
`className`	`string`	—
`size`	`enum`	`md`	Square control size: `sm` 24px · `md` 28px.
`style`	`CSSProperties`	—
`variant`	`enum`	`subtle`	Visual weight: `subtle` is a transparent ghost; `filled` sits on a faint fill.