Alert

Alert presents important inline information, success, warning, or error feedback in the content flow.

Purpose

Alert presents important inline information in the content flow. Use semantic variants for information, success, warning, and error feedback that should remain visible while the user continues working.

Inline feedback

Workspace synced

All pending updates are available for the team.

Review required

The billing address is missing a tax region.

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

export function Example() {
  return (
    <Alert variant="info">
      <AlertTitle>Workspace synced</AlertTitle>
      <AlertDescription>All pending updates are available.</AlertDescription>
    </Alert>
  );
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/alert

Import

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

Need the machine-readable source metadata? View registry JSON.

Usage

Use Alert for persistent information, warnings and errors inside the page flow.

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

export function Example() {
  return (
    <Alert variant="info">
      <AlertTitle>Workspace synced</AlertTitle>
      <AlertDescription>All pending updates are available.</AlertDescription>
    </Alert>
  );
}

Examples

Variants, the icon slot, actions and dismissal are compositions of the same primitive.

Variants

Heads up

Neutral note inside the page flow.

Workspace synced

All pending updates are available.

Invoice sent

The client received a copy by email.

Review required

The billing address is missing a tax region.

Export failed

The report could not be generated.

<Alert>
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>Neutral note inside the page flow.</AlertDescription>
</Alert>

<Alert variant="info">
  <InfoIcon />
  <AlertTitle>Workspace synced</AlertTitle>
  <AlertDescription>All pending updates are available.</AlertDescription>
</Alert>

<Alert variant="success">
  <CircleCheckIcon />
  <AlertTitle>Invoice sent</AlertTitle>
  <AlertDescription>The client received a copy by email.</AlertDescription>
</Alert>

<Alert variant="warning">
  <TriangleAlertIcon />
  <AlertTitle>Review required</AlertTitle>
  <AlertDescription>The billing address is missing a tax region.</AlertDescription>
</Alert>

<Alert variant="error">
  <CircleAlertIcon />
  <AlertTitle>Export failed</AlertTitle>
  <AlertDescription>The report could not be generated.</AlertDescription>
</Alert>

With icon

A leading svg child lands in the icon column of the alert grid automatically.

Heads up

Describe what can be done about it here.

<Alert>
  <InfoIcon />
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>Describe what can be done about it here.</AlertDescription>
</Alert>

With actions

Update available

Restart to apply the latest version.

<Alert>
  <InfoIcon />
  <AlertTitle>Update available</AlertTitle>
  <AlertDescription>Restart to apply the latest version.</AlertDescription>
  <AlertAction>
    <Button size="sm" variant="ghost">Dismiss</Button>
    <Button size="sm">Restart</Button>
  </AlertAction>
</Alert>

Dismissible

Storage almost full

Review the plan before publishing new work.

function DismissibleAlert() {
  const [visible, setVisible] = useState(true);

  if (!visible) {
    return (
      <Button onClick={() => setVisible(true)} variant="outline">
        Reset alert
      </Button>
    );
  }

  return (
    <Alert variant="warning">
      <TriangleAlertIcon />
      <AlertTitle>Storage almost full</AlertTitle>
      <AlertDescription>
        Review the plan before publishing new work.
      </AlertDescription>
      <AlertAction>
        <Button onClick={() => setVisible(false)} size="sm" variant="ghost">
          Dismiss
        </Button>
      </AlertAction>
    </Alert>
  );
}

API Reference

The reference lists the source-owned exports and props that are easy to miss in visual examples. Inherited Base UI props remain available unless the wrapper narrows them.

variant accepts "default", "info", "success", "warning", and "error".
Use AlertTitle for the short summary, AlertDescription for supporting detail, and AlertAction for optional real Button or link controls.
Use Alert Dialog when a decision must block the workflow.

Motion

Component motion uses the shared Siteplane motion contract. See the global motion guide for provider setup, tokens and reduced-motion behavior.

Alert has no mount or exit animation.
Actions use their own Button or link interaction states; do not animate the Alert container locally.

Accessibility

Alert renders with role="alert".
Keep the title and description concise so announcements remain useful.
Do not communicate severity through color alone; the copy must identify the outcome or risk.
Actions require visible focus and an accessible name.

Implementation Guidance

Match the variant to the message semantics.
Use Alert Dialog for blocking confirmation and Toast for transient system feedback.
Keep native slots, variants, and accessibility behavior intact.