Alert

An alert is a banner the server renders when it has something the reader must notice. It carries no behaviour: nothing dismisses it, nothing times it out. For a message that arrives after the page did, and goes away again, use hui-toast instead.

Plain and destructive

Give the element role="alert" only when it appears after the page has loaded and the reader needs interrupting. A banner that was in the server’s first response is already read in document order, and role="alert" on it makes a screen reader announce it twice.

.hui-alert

A message block. Add --destructive for an error.

<div class="hui-alert">
  <div class="hui-alert__title">…</div>
  <div class="hui-alert__description">…</div>
</div>

.hui-alert--destructive

Destructive border and title colour.

.hui-alert__description

Muted supporting text.

.hui-alert__title

The alert heading.