Alert

Tells people about part of the page, with an icon, a title and an action. Also the page-wide banner.

Library

Possible duplicates

This lead looks like 2 existing leads. View duplicates

Installation

pnpm dlx shadcn@latest add @wisty/alert

The CLI installs the Radix or Base UI file to match your project.

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

Create an app with AlertBuild in Wisty to publish inside Salesforce in minutes. Nothing to deploy.Open in Wisty

When to use

Use it

A message is about one part of a page, like a record, a card or a form section, and should stay in view.
Something needs attention before people go on: an error, a warning or missing data.
The whole app or page has a status that lasts, like a sandbox or a lost connection. Use variant="banner".

Don't use it

The message confirms an action people just took, like a save. Use Sonner: a success message belongs in a toast, not a notification that stays.
The message is about one field. Use the field's error text in Field.
People must decide something before they go on. Use Alert Dialog.
You need a short status label, like "Active". Use Badge.

Usage

import { TriangleAlertIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

Alert
├── icon (optional)
├── AlertTitle (optional)
├── AlertDescription
└── AlertAction (optional button)

<Alert variant="warning">
  <TriangleAlertIcon />
  <AlertTitle>No price book</AlertTitle>
  <AlertDescription>Add one before you create quotes.</AlertDescription>
</Alert>

A banner for the top of a page takes a close button in an AlertAction, as the Banner example shows. It has the info colors. For a warning or error banner, pass the state's color pair:

<Alert variant="banner" className="bg-warning-container text-on-warning">

Errors take bg-error-container text-on-error. Both pairs change with the theme.

Examples

Variants

The error, warning, success and info colors, set with `variant`, where errors are `destructive`.

Couldn't save the record

Review the errors on this page.

This account has no owner

Assign one so the account shows up in reports.

Import finished

240 contacts were added.

Sandbox

Changes here don't affect production.

Banner

The page-wide alert from `variant="banner"`, with a link and a close button in `AlertAction`.

Logged in as Ada Lovelace (ada@acme.example). Log out

API reference

Part	Built on
`Alert`	`<div>` (opens in a new tab)
`AlertTitle`	`<div>` (opens in a new tab)
`AlertDescription`	`<div>` (opens in a new tab)
`AlertAction`	`<div>` (opens in a new tab)

`Alert`

Prop	Type	Default
`variant`	`"default" \| "destructive" \| "warning" \| "success" \| "info" \| "banner"`	`"default"`

SLDS mapping

Alert is slds-scoped-notification in the media object layout (slds-media slds-media_center), with the icon as its media figure. banner is slds-notify slds-notify_alert, the page-wide alert. AlertAction sits at the end like slds-notify__close, and points the button tokens at the alert's text color, so an icon button in it matches as SLDS's close button does. AlertTitle has no SLDS counterpart: SLDS notifications are one block of text, so a description-only alert is the exact form.

Known gaps:

SLDS's dark scoped notification (slds-scoped-notification_dark) isn't a variant. It doesn't exist in Cosmos.
Only the info banner is a variant. SLDS's warning and error banners are the class recipe in Usage, and its offline banner has no matching token pair.
Icons are lucide's, not SLDS's utility icons.

Prop	Value	SLDS	Notes
`variant`	`default`	`slds-scoped-notification slds-scoped-notification_light`
`variant`	`destructive`	`slds-scoped-notification slds-theme_error`
`variant`	`warning` (added)	`slds-scoped-notification slds-theme_warning`
`variant`	`success` (added)	`slds-scoped-notification slds-theme_success`	SLDS advises against scoped notifications for success. Prefer a toast.
`variant`	`info` (added)	`slds-scoped-notification slds-theme_info`
`variant`	`banner` (added)	`slds-notify slds-notify_alert`	The page-wide alert, in the info colors.

Accessibility

Alert has role="alert", so screen readers announce it when it appears. For a message that's on the page from the start and isn't urgent, pass role="status" instead.
Give an icon-only button in AlertAction an aria-label, like "Close".
Icons are hidden from assistive technology. Say the meaning in the text, not only through the color or icon.
The default alert in Lightning Blue has gray text on gray below 4.5:1, the pair Salesforce's own light notification uses.

Responsive behavior

The alert fills its container; add a max-w-* class to narrow it. Long text wraps, and the icon stays centered beside it.
A banner wraps its text and stays centered, keeping room at the end for its close button.

Rules

Pick the variant by meaning: default for neutral notes, destructive for errors, warning for problems people should fix.
Put the icon first, as a direct child of Alert, so the layout places it.
Recolor only with the theme's state pairs, as the banner recipe does. A literal color pins one look into every theme.
Use variant="banner" only for a page-wide, lasting message at the top of a page.