Use the close button to dismiss an overlay or a dismissible message: dialogs, drawers, toasts, alerts, popovers. It always sits in the top inline-end corner so mechanics and dispatchers find it in the same place everywhere.
Name it "Close" in dialogs and drawers; be specific where several sit on one screen ("Dismiss notification", "Close vehicle details").
Closing must not lose work silently: if a form is dirty, confirm or keep a draft.
Don't use it to delete or cancel something — that is a destructive button with a label.
States marked hover, focus-visible and active are frozen with .is-hover, .is-focus-visible, .is-active. Those classes share their rule with the real pseudo-class, so what you see is exactly what users get. Never use them in product code.
Close button
Only while a dialog is saving; say so in the dialog ("Saving work order…").
Van KX-219
Next service due in 3 days at North Yard depot.
Top inline-end corner, the same place in dialogs, drawers, toasts, alerts and popovers.
<button type="button" class="close-btn" aria-label="Close">
<svg class="close-btn__icon" aria-hidden="true" focusable="false"><use href="#icon-x"></use></svg>
</button>
<!-- In a dialog: the invoker closes it without JS -->
<button type="button" class="close-btn" aria-label="Close" commandfor="assign-dialog" command="close">…</button>
<!-- Toasts and alerts: small + specific name -->
<button type="button" class="close-btn close-btn--sm" aria-label="Dismiss notification">…</button>
API
Hook
Values
Purpose
.close-btn
block class
40px ghost close button
.close-btn--sm | --lg
modifier
32px (toasts, alerts) / 48px (tablet)
.close-btn__icon
part
The x icon
aria-label
attribute (required)
"Close" or a specific name
commandfor + command="close"
attribute
Closes a <dialog> declaratively
disabled
attribute
Only while saving
.is-hover | .is-focus-visible | .is-active
docs-only class
Freeze a state
Do and don't
Do give it a specific name when several dismiss buttons share a screen.Don't use a letter "X" as text — screen readers read "X".
Accessibility
Keyboard interaction
Key
Behavior
Enter / Space
Closes the surface
Esc
Handled by the surface (dialog/popover), not the button — keep both
Focus returns to the element that opened the surface (native for <dialog> and invoker popovers).
The icon is muted by default but meets 3:1 against surfaces (--color-text-muted); hover raises it to the default text color.
Forced colors: shows a border on hover so the target is visible.