Alert

A callout that draws attention to a message, with an icon, a title and an action.

Basic

An icon, a title and a description.

Account updated successfully

Your profile changes are saved and live.

Code

<Alert title="Account updated successfully" description="Your profile changes are saved and live.">
  <Icon name="check-circle" />
</Alert>

Usage

import { Alert, AlertTitle, AlertDescription, AlertAction } from "@elements/ui/alert";

<Alert variant="success" title="Payment successful" description="Your receipt is on its way.">
  <Icon name="check-circle" />
</Alert>

<Alert variant="danger">
  <Icon name="alert-circle" />
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>Your card was declined.</AlertDescription>
  <AlertAction><Button size="sm">Retry</Button></AlertAction>
</Alert>

Examples

Variants

neutral by default, and the callout intents.

Neutral

The neutral alert, read from the theme's surface tokens.

Info

The info alert, read from the theme's info tokens.

Success

The success alert, read from the theme's success tokens.

Warning

The warning alert, read from the theme's warning tokens.

Danger

The danger alert, read from the theme's danger tokens.

Accent

The accent alert, read from the theme's accent tokens.

Code

<Alert variant="info" title="Info" description="..."><Icon name="info" /></Alert>
<Alert variant="success" ...><Icon name="check-circle" /></Alert>
<Alert variant="warning" ...><Icon name="alert" /></Alert>
<Alert variant="danger" ...><Icon name="alert-circle" /></Alert>
<Alert variant="accent" ...><Icon name="star" /></Alert>

Destructive

Parts composed by hand; the description holds paragraphs and lists.

Payment failed

Your card was declined. Check these and try again, or update your card:

The card number and expiry date
Enough funds for the charge

Code

<Alert variant="danger">
  <Icon name="alert-circle" />
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>
    <p>Your card was declined. Check these and try again, or <a href="/billing">update your card</a>:</p>
    <ul>
      <li>The card number and expiry date</li>
      <li>Enough funds for the charge</li>
    </ul>
  </AlertDescription>
</Alert>

Title with a composed description

The title attribute beside a hand-composed AlertDescription: the title reads first.

Heads up!

You can add components to your app using the cli.

Code

<Alert title="Heads up!">
  <Icon name="info" />
  <AlertDescription>You can add components to your app using the <a href="/cli">cli</a>.</AlertDescription>
</Alert>

Action

AlertAction sits at the top right in its own column; long text wraps before it.

Dark mode is now available

Turn it on in your profile settings. It follows your system setting until you choose, and every theme ships a dark palette of its own, so nothing on the page needs to change.

Code

<Alert title="Dark mode is now available" description="Turn it on in your profile settings.">
  <Icon name="star" />
  <AlertAction><Button size="sm" onclick={enable}>Enable</Button></AlertAction>
</Alert>

Triggered

An alert rendered after an action is announced at once. Focus stays on the button, and the alert stays until the page changes (APG).

Code

<Button onclick={() => shown = true}>Trigger alert</Button>
<Alert e:if={shown} variant="warning" title="Session expires soon" description="Save your work; you will be signed out in 5 minutes.">
  <Icon name="alert" />
</Alert>

Without an icon

The text starts at the padding. role=none for a notice that is part of the page.

Heads up

Notices that are part of the page use role none.

Code

<Alert role="none" title="Heads up" description="Notices that are part of the page use role none." />

Custom colors

A class on the alert, reading theme tokens.

Your subscription ends in 3 days

Renew to keep your projects online.

Code

<Alert class="amber" title="Your subscription ends in 3 days" description="Renew to keep your projects online.">
  <Icon name="alert" />
</Alert>

RTL

The rule, the icon and the action sit on the inline sides, so they mirror under dir=rtl.

تم تحديث الحساب

تم حفظ تغييرات ملفك الشخصي.

Code

<div dir="rtl">
  <Alert variant="info">
    <Icon name="info" />
    <AlertTitle>تم تحديث الحساب</AlertTitle>
    <AlertDescription>تم حفظ تغييرات ملفك الشخصي.</AlertDescription>
    <AlertAction><Button size="sm">تراجع</Button></AlertAction>
  </Alert>
</div>

Reference Alert in the manual Every part, attribute, slot, key and data attribute.