Alert

Preview Code

375 768 Full

Open

html

<div class="aparte-alert aparte-alert--info" role="status">
  <span class="aparte-alert__icon"><aparte-icon name="info"></aparte-icon></span>
  <div class="aparte-alert__body">
    <p class="aparte-alert__title">Model switched</p>
    <p class="aparte-alert__message">The next reply uses the model you just picked.</p>
  </div>
  <button class="aparte-alert__dismiss" aria-label="Dismiss"><aparte-icon name="close"></aparte-icon></button>
</div>
<div class="aparte-alert aparte-alert--danger" role="alert">
  <span class="aparte-alert__icon"><aparte-icon name="alertTriangle"></aparte-icon></span>
  <div class="aparte-alert__body">
    <p class="aparte-alert__message">The request was refused: no API key is set.</p>
  </div>
</div>

.aparte-alert is a callout: an __icon, a __body holding a __title and a __message, and an optional __dismiss button. Its intent (info, success, warning, danger, neutral, primary, secondary) colours it. The chat’s error card wears this recipe, and so do this site’s notes and warnings.

Customize

Variable	Default
--aparte-alert-gap	var(--aparte-space-3)
--aparte-alert-padding	var(--aparte-space-4) var(--aparte-space-5)
--aparte-alert-radius	var(--aparte-radius-md)
--aparte-alert-rail-width	var(--aparte-space-1)
--aparte-alert-icon-size	var(--aparte-space-8)
--aparte-alert-dismiss-size	var(--aparte-btn-size-sm)
--aparte-alert-title-font-size	var(--aparte-font-size-md)
--aparte-alert-message-font-size	var(--aparte-font-size-sm)
--aparte-alert-intent	—

Classes

.aparte-alert · .aparte-alert--danger · .aparte-alert--info · .aparte-alert--neutral · .aparte-alert--primary · .aparte-alert--secondary · .aparte-alert--success · .aparte-alert--warning · .aparte-alert__body · .aparte-alert__dismiss · .aparte-alert__icon · .aparte-alert__message · .aparte-alert__title

Accessibility

• An alert that appears while someone is reading takes role="status" (or role="alert" when it must interrupt); one that is part of the page from the start needs neither.
• The intent is written in the title or the message, not only coloured.
• The dismiss button shows a cross: give it an aria-label.

Related

• Error — a failed turn, drawn as an alert.
• Badge — a status in a word rather than a sentence.