alert

Inline message banner with icon, title, description.

status: stable js: none support: baseline

Preview

Markup

<div class="alert alert-info" role="alert"><svg aria-hidden="true">…</svg><div><div class="alert-title">T</div><div class="alert-description">D</div></div></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/alert.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add alert

Accessibility

Add role=alert for live announcement

Classes

.alert .alert-title .alert-description .alert-dismissible .alert-default .alert-info .alert-success .alert-warning .alert-destructive

Dependencies

base/tokens base/theme