Alert

In-page message for important status and warnings.

MDN: role="alert"

Heads up

Your changes were saved successfully. 
<div data-header>
  <div role="alert">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <path fill="currentColor" d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14s14-6.268 14-14S23.732 2 16 2m0 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4m1.5 16h-3v-9h3z">
      </path>
    </svg>
    <p>
      Heads up
    </p>
    <small>
      Your changes were saved successfully.
    </small>
  </div>
</div>

Use role="alert" for important messages that should be announced by assistive technology.

Alerts are CSS-only and use semantic HTML for structure.

Usage

A container element with role="alert".

  • svg — Icon. Optional icon element. Optional.
  • p — Title. Alert title text. Optional.
  • small — Description. Alert description text. Optional.
<div role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <path fill="currentColor" d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14s14-6.268 14-14S23.732 2 16 2m0 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4m1.5 16h-3v-9h3z">
    </path>
  </svg>
  <p>
    Heads up
  </p>
  <small>
    Your changes were saved successfully.
  </small>
</div>

Examples

Variant

Use the destructive variant to indicate a negative action or warning.

Heads up

Your billing address was updated successfully. 
<div data-component="alert" data-dimension="variant">
  <div data-component="alert" data-example="variant" data-variant="default">
    <div role="alert">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor" d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14s14-6.268 14-14S23.732 2 16 2m0 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4m1.5 16h-3v-9h3z">
        </path>
      </svg>
      <p>
        Heads up
      </p>
      <small>
        Your billing address was updated successfully.
      </small>
    </div>
  </div>
  <div data-component="alert" data-example="variant" data-variant="destructive">
    <div role="alert" class="destructive">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor" d="M16 3L2 27h28Zm1.5 19h-3v-3h3Zm0-5h-3v-6h3Z">
        </path>
      </svg>
      <p>
        Unable to delete project
      </p>
      <small>
        This action failed because the project still has active deployments.
      </small>
    </div>
  </div>
</div>

Content

Icon and description are optional.

Profile updated

New sign-in detected

Maintenance scheduled

Expect a short interruption between 02:00 and 02:15 UTC. 
<div data-component="alert" data-dimension="content">
  <div data-component="alert" data-example="content" data-variant="title">
    <div role="alert">
      <p>
        Profile updated
      </p>
    </div>
  </div>
  <div data-component="alert" data-example="content" data-variant="iconTitle">
    <div role="alert">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor" d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14s14-6.268 14-14S23.732 2 16 2m0 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4m1.5 16h-3v-9h3z">
        </path>
      </svg>
      <p>
        New sign-in detected
      </p>
    </div>
  </div>
  <div data-component="alert" data-example="content" data-variant="iconTitleDescription">
    <div role="alert">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor" d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14s14-6.268 14-14S23.732 2 16 2m0 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4m1.5 16h-3v-9h3z">
        </path>
      </svg>
      <p>
        Maintenance scheduled
      </p>
      <small>
        Expect a short interruption between 02:00 and 02:15 UTC.
      </small>
    </div>
  </div>
</div>