Examples
Basic usage
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>
Source comments
Dismiss -- unified close/remove button
One implementation across dialog, alert, toast, and any other
dismissible block. Used as:
<button class="dismiss" type="button" aria-label="Close">×</button>
Parent components (dialog, drawer) override --dismiss-bg-hover when
they sit on --color-surface-float or --color-surface -- on those
surfaces, a solid bg reads better than the shadow-tint default.
That override lives in rescopes.css with the other cross-component
rules, not here.
Reference
Source: src/css/dismiss.css
Applies to
.dismiss
Tokens
| Token | Default | Description |
|---|---|---|
--dismiss-color | var(--color-text-muted) | Icon color at rest |
--dismiss-color-hover | var(--color-text) | Icon color on hover |
--dismiss-bg-hover | var(--color-shadow) | Background color on hover |
--dismiss-padding-block | var(--ui-pad-square-snug) | Block-axis inner padding around the icon |
--dismiss-padding-inline | var(--ui-pad-square-snug) | Inline-axis inner padding around the icon |
--dismiss-size | 1em | Explicit height and width of the button |