Skip to content

role alert

Alert draft v0.1.0

A brief, important message that draws attention without interrupting the task.

An alert tells people something important about the page or what they just did: a saved change, a failed payment, a maintenance window, a quota about to run out. It sits in the content, tinted by its intent with an icon and a title, and is announced by assistive technology when it appears. It never moves focus and never blocks the page: a message that needs a decision is a dialog, a short transient confirmation is a toast.

Playground

HTML 
<div class="ds-alert" role="alert" data-intent="info">
  <span
    class="ds-alert__icon"
    data-part="icon"
    aria-hidden="true"
  >info</span>
  <div class="ds-alert__content" data-part="content">
    <p
      class="ds-alert__title"
      data-part="title"
    >Scheduled maintenance</p>
    <p
      class="ds-alert__message"
      data-part="message"
    >The service will be unavailable on Sunday from 02:00 to 04:00 UTC.</p>
  </div>
</div>