COMPONENTS

Alerts

Messages with one alert class. Theme, accent, shape, size, density, depth, borders, fill and material follow the parent. Attributes are optional exceptions, not required on every alert.

Usage

Markup: .alert

Behaviour: Static messages have no automatic live region or dismissal.

Default: primary variant with a tinted appearance. Primary uses your inherited accent for informational messages. Success, warning, danger and neutral share the badge vocabulary. Write the meaning in text; colour alone is insufficient.
Use ordinary div, section or paragraph markup for static messages. The alert class does not create a live region. For a message updated by your application, establish role="status" before a non-urgent update, or role="alert" for an urgent update that warrants interruption. These ARIA roles do not add interactivity.
data-variant and data-appearance work on html, parent sections or individual exceptions. Unsupported values preserve the nearest valid ancestor setting. Decorative data-edge does not apply to alerts.
Alerts are persistent. CSS does not provide a dismiss action; no inactive close buttons are included. Use native links for destinations and buttons only for actions implemented by your application.

Component API and styling module · Inherited appearance settings

One class, no attributes

A static informational message uses the inherited accent and needs no announcement role.

Information: Your draft is saved locally.

<div class="alert">
  <strong>Information:</strong> Your draft is saved locally.
</div>

Shared status variants

Choose meaning through visible text and optional variants. Each message stays readable without relying on its colour.

Information: Your next invoice arrives on Monday.

Success: Your changes have been saved.

Warning: Your subscription expires in three days.

Error: Your payment could not be processed.

Note: This project is archived.

<div class="stack">
  <div class="alert">Information: Your next invoice arrives on Monday.</div>
  <div class="alert" data-variant="success">Success: Your changes have been saved.</div>
  <div class="alert" data-variant="warning">Warning: Your subscription expires in three days.</div>
  <div class="alert" data-variant="danger">Error: Your payment could not be processed.</div>
  <div class="alert" data-variant="neutral">Note: This project is archived.</div>
</div>

Headings, lists and links

Ordinary HTML supports richer messages. Use a heading level that fits your document and descriptive links.

Review before continuing

Please check the following details:

Your billing address
Your preferred payment method

Return to the documentation content

<section class="alert" data-variant="warning" aria-labelledby="alert-review-heading">
  <h3 id="alert-review-heading">Review before continuing</h3>
  <p>Please check the following details:</p>
  <ul>
    <li>Your billing address</li>
    <li>Your preferred payment method</li>
  </ul>
  <p><a href="#main">Return to the documentation content</a></p>
</section>

Parent defaults and local exceptions

Both alerts inherit appearance and shape. Only the exception needs its own variant.

Success: Your profile is complete.

Warning: Verify your email address.

<section class="stack" data-variant="success" data-appearance="tinted"
         data-shape="rounded" data-density="comfortable">
  <div class="alert">Success: Your profile is complete.</div>
  <div class="alert" data-variant="warning">Warning: Verify your email address.</div>
</section>

Tinted, solid and outline

The same appearance setting configures badges and alerts. Outline keeps an opaque surface backing for readable content.

Success: Tinted appearance.

Success: Solid appearance.

Success: Outline appearance.

<div class="stack" data-variant="success">
  <div class="alert">Success: Tinted appearance.</div>
  <div class="alert" data-appearance="solid">Success: Solid appearance.</div>
  <div class="alert" data-appearance="outline">Success: Outline appearance.</div>
</div>

Glass with a solid exception

Load the optional glass extension. Parent material carries into alerts; a local solid section stops it. Unsupported blur retains opaque backing.

Information: A frosted message surface.

Information: An opaque local exception.

<section class="stack" data-theme="dark" data-material="glass">
  <div class="alert">Information: A frosted message surface.</div>
  <section data-material="solid">
    <div class="alert">Information: An opaque local exception.</div>
  </section>
</section>

Application announcement markup

This markup is for an application that later updates the message. Keep the region in the document before updating its contents; use urgent alerts sparingly.

<!-- Non-urgent feedback; populate after a completed action. -->
<div class="alert" data-variant="success" role="status"></div>

<!-- Urgent feedback; populate when immediate attention is needed. -->
<div class="alert" data-variant="danger" role="alert"></div>