Dismiss

Close / remove button

Intent

Dismiss is the single close-button atom. One implementation, one visual, one keyboard contract across every dismissible surface in the library: alert, dialog, drawer, badge chips, custom-dismissible blocks. Replaces the per-component .alert-dismiss / .toast-close / .banner-remove proliferation with a named atom that partners with the data-dismissible attribute on any container.

Basic usage

Mark the container with data-dismissible; drop a <button class="dismiss"> inside. Clicking the button removes the container.

Remove me

<div class="card" data-dismissible="">
    <div class="cluster is-between">
        <strong>Remove me</strong>
        <button class="dismiss" type="button" aria-label="Remove">×</button>
    </div>
</div>

How it works

Importing dismiss.js once per page installs a document-level click listener. On any click, the listener walks up from the clicked element via closest(".dismiss") -- if the click landed on (or inside) a dismiss button, it then walks up via closest("[data-dismissible]") to find the container to close.

If the container has a .close() method (native <dialog>, or a custom element that implements it), the listener calls that -- preserving any exit animation the element has wired. Otherwise it falls back to .remove(), ripping the element out of the DOM immediately.

Programmatic API. Imported directly:

import { dismiss } from "./dismiss.js";
dismiss(document.querySelector(".alert"));

Same logic as the click listener -- .close() if available, .remove() otherwise. Useful when a non-button action (timer expiry, external event) should dismiss a container.

Parent-surface overrides

Dismiss's default hover background is a shadow-tint (var(--color-shadow)) that reads well on standard surfaces. Components that sit on raised or floating surfaces (dialog, drawer) remap --dismiss-hover-bg to --color-surface-sunken so the hover produces a visible tint on the lighter background. The override lives in the parent component's CSS file, not here; dismiss stays a single agnostic implementation.

Used with

Look at any dismissible component in the library for dismiss in context: alert (data-dismissible variant), badge (removable filter chips), dialog (header dismiss button paired with command="close"), drawer (panel dismiss button). Any new dismissible surface inherits the same markup contract -- no per-component scaffolding.

Class reference

.dismiss -- the atom. Apply to a <button type="button"> with an accessible name. No child classes, no variants.

Not a class: data-dismissible is the attribute that marks a container as something .dismiss can close. The dismiss button finds its target by walking up the DOM to the nearest ancestor with that attribute -- placement inside the container is structural, not configurational.

Customization

Set --dismiss-size to resize the hit area. Retune the hover background per context via --dismiss-hover-bg on the parent, not on .dismiss itself (see parent-surface overrides). Full token list and defaults: src/css/dismiss.css.

Accessibility

aria-label is mandatory. The × glyph has no meaningful announced name. Every dismiss button needs an aria-label -- "Close" for dialogs and drawers, "Dismiss" for alerts, "Remove" for chips. A .visually-hidden span with the label text works equivalently and survives CSS failures.
Native button, native keyboard. Render as <button type="button"> (never <a> or <div>). Native buttons handle Enter / Space, focus, and the announced button role without any JS wiring.
Place near the thing being dismissed. Dismiss buttons at the end of a long body paragraph are hard to find in screen reader navigation. Put the button in the header row or early in the dismissible block so a screen reader user encountering the container hears the dismiss option before the body content.
Focus returns naturally. When a dismissible element is removed via .remove(), browser focus returns to the document flow (usually the <body>). Dialogs' native .close() sends focus back to the invoker. For custom elements that implement their own .close() with an exit animation, set focus explicitly on the next-logical element before removing the container from the accessibility tree.

CSS Reference: Dismiss

Unified close or remove button

Source: src/css/dismiss.css

Tokens

Token	Default	Description
`--dismiss-color`	`var(--color-text-muted)`	Icon color at rest
`--dismiss-hover-color`	`var(--color-text)`	Icon color on hover
`--dismiss-hover-bg`	`var(--color-shadow)`	Background color on hover
`--dismiss-padding`	`var(--ui-pad-square-snug)`	Inner padding around the icon
`--dismiss-size`	`1em`	Explicit height and width of the button

Classes

Class	Description
`.dismiss`	component root