Alert

Heads up

Your changes are saved as a draft.

Something failed

Your session expired. Sign in again.

<div class="alert">
  <h3 class="alert-title">Heads up</h3>
  <p class="alert-description">Your changes are saved as a draft.</p>
</div>

<div class="alert alert-destructive">
  <h3 class="alert-title">Something failed</h3>
  <p class="alert-description">Your session expired. Sign in again.</p>
</div>

Usage

<div class="alert" role="alert">
  <h3 class="alert-title">Heads up</h3>
  <p class="alert-description">Your changes are saved as a draft.</p>
</div>

Composition

Heads up

The icon, the title and the description each sit in their own slot.

Class	Part
`.alert`	Container
`.alert-title`	Heading line
`.alert-description`	Body copy
`.alert-action`	Control pinned to the trailing corner
`.alert-destructive`	Error variant

An svg as the first child takes its own column and the text shifts across; .alert-action takes the trailing corner and reserves room so a long title never runs under it.

Basic

Draft saved

Scheduled maintenance

The API is read-only between 02:00 and 03:00 UTC.

<div class="alert">
  <h3 class="alert-title">Draft saved</h3>
</div>

<div class="alert">
  <h3 class="alert-title">Scheduled maintenance</h3>
  <p class="alert-description">The API is read-only between 02:00 and 03:00 UTC.</p>
</div>

A title on its own is a complete alert. The description is for the consequence, not a restatement.

Destructive

Payment failed

Your card was declined. Update it to keep the service running.

<div class="alert alert-destructive">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 8v4M12 16h.01"></path>
  </svg>
  <h3 class="alert-title">Payment failed</h3>
  <p class="alert-description">Your card was declined. Update it to keep the service running.</p>
</div>

The variant recolours the text and the icon. The surface stays the card colour, so the alert does not turn into a solid block of red.

Action

Update available

Version 2.1 is ready to install.

<div class="alert">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M12 2v13m0 0 4-4m-4 4-4-4M4 21h16"></path>
  </svg>
  <h3 class="alert-title">Update available</h3>
  <p class="alert-description">Version 2.1 is ready to install.</p>
  <div class="alert-action">
    <button class="btn btn-outline btn-sm">Install</button>
  </div>
</div>

Custom Colors

light-dark() picks the pair for the theme in use, which works because partialkit sets color-scheme on the root.

Deployment finished

Version 2.1 is live in every region.

<div class="alert"
     style="background-color: light-dark(oklch(0.96 0.03 150), oklch(0.24 0.04 150));
            color: light-dark(oklch(0.33 0.08 150), oklch(0.92 0.09 150))">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M20 6 9 17l-5-5"></path>
  </svg>
  <h3 class="alert-title">Deployment finished</h3>
  <p class="alert-description" style="color: inherit">
    Version 2.1 is live in every region.
  </p>
</div>

RTL

Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading direction on their own. See the button page for a live example.

Accessibility

An alert that is on the page from the start needs nothing. One that appears in response to something must be announced, and the role decides how:

Role	When
`role="alert"`	Errors and anything the user must act on. Interrupts what is being read.
`role="status"`	Confirmations and progress. Waits for a pause.

<div class="alert alert-destructive" role="alert">
  <h3 class="alert-title">Payment failed</h3>
</div>

Put the element in the DOM before you fill it, or the announcement can be missed — assistive tech watches an existing live region for changes rather than discovering a new one.

If the alert has a dismiss control, that control needs a name: aria-label="Dismiss" on an icon-only button.