Alert · kit

Example

Information

A neutral message with supporting text.

Success

Confirms that something worked.

Warning

Something needs attention soon. Alerts can carry an action.

Error

Says what went wrong and how to fix it.

Show the markup

<div class="demo-stack demo-fill">
  <div class="kit-alert">
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="10" cy="10" r="7.5"/><path d="M10 9v4.5M10 6.5h.01"/></svg>
    <div><p class="kit-alert-title">Information</p><p>A neutral message with supporting text.</p></div>
  </div>
  <div class="kit-alert" data-tone="good">
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="10" cy="10" r="7.5"/><path d="m6.8 10.2 2.2 2.2 4.2-4.6"/></svg>
    <div><p class="kit-alert-title">Success</p><p>Confirms that something worked.</p></div>
  </div>
  <div class="kit-alert" data-tone="warn">
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M10 3.5 2.8 16h14.4L10 3.5Z"/><path d="M10 8.5v3.5M10 14h.01"/></svg>
    <div><p class="kit-alert-title">Warning</p><p>Something needs attention soon. Alerts can carry an action.</p></div>
    <div class="kit-alert-actions"><button class="kit-button" data-size="sm" type="button">Action</button></div>
  </div>
  <div class="kit-alert" data-tone="bad">
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="10" cy="10" r="7.5"/><path d="m7.5 7.5 5 5m0-5-5 5"/></svg>
    <div><p class="kit-alert-title">Error</p><p>Says what went wrong and how to fix it.</p></div>
  </div>
</div>

Usage

<div class="kit-alert" data-tone="warn">
  <svg aria-hidden="true">…</svg>
  <div>
    <p class="kit-alert-title">Nearly out of storage</p>
    <p>68 of 100 GB used. Old exports are deleted after 30 days.</p>
  </div>
</div>

Attribute	Values	Default
`data-tone`	`info`, `good`, `warn`, `bad`	`info`

Put buttons or links that act on the message in <div class="kit-alert-actions">.

Accessibility

An alert that's on the page when it loads needs no role: people read it like any other text.
One that appears later, after something happens, needs announcing: add role="status" (polite), or role="alert" only for errors that need attention straight away. Add the role before the text arrives, or use kit's announce().
The tone is never shown by colour alone: each one has its own icon, and the title says what happened.
Text and icons meet WCAG AA contrast on every tone's background, in light and dark.