elements
Manual UI Templates Alert

Alert

elements man ui/templates/alert

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

Example
import { Alert, AlertTitle, AlertDescription, AlertAction } from "@elements/ui/alert";
import { Icon } from "@elements/ui/icon";
import { Button } from "@elements/ui/button";

<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>

Parts

Part What it is
AlertTitle .alert-title: the strong first line.
AlertDescription .alert-description: the body, paragraphs and lists spaced.
AlertAction .alert-action: a control at the top inline end, in its own column.
icon Any direct <svg> child, such as <Icon name="info" />.

Attributes

Alert

Attribute Type Default Description
variant "neutral" | "info" | "success" | "warning" | "danger" | "accent" "neutral" neutral is a plain notice; the rest are the callout intents.
title string "" Renders an AlertTitle.
description string "" Renders an AlertDescription.
role "alert" | "status" | "none" "alert" alert is announced at once, status politely, none not at all.
class string "" Extra classes; custom colors go here.
attrs Record<string, string | number | boolean | undefined> {} Other attributes: id, aria-*, data-*.

AlertTitle, AlertDescription, AlertAction

Attribute Type Default Description
class string "" Extra classes.

Slots

Slot Part Content
default Alert An <Icon>, the parts, anything. Each finds its column by itself.
default each part The part's content.

Data attributes

Attribute Values On
data-variant the variant root

Accessibility

  • role="alert" by default, announced at once. Use role="status" for a polite message and role="none" for a notice that is on the page from the start.
  • An alert never moves focus. Controls inside it keep their own keyboard behavior.
  • The icon is decorative; the title says what happened, so color is never the only signal.

See also