Alert

A message that stays on the page until the situation changes.

Changes saved
Your project is up to date and ready to share.
Fig. 1 A message about what’s on screen, with a title and a description.

When to use it

Use Alert for information about the current page that people need to see: a failed sync, a trial ending, a form-wide error.

For a quick confirmation that can disappear, use Toast. For a decision that must be made first, use Alert Dialog.

AlertThis page

Stays on the page.

Changes saved
Your project is up to date and ready to share.

Warnings and errors about this page.

Toast

Comes and goes.

Confirmations that need no reply.

Badge

Labels a status.

PublishedTrialCurrentInternal

Published, Draft, and Beta.

Empty

Nothing here yet.

No documents yet
Write specs, meeting notes, and decisions in one place. Documents you create or that teammates share with you will show up here.

Tip: press⌘Nfrom anywhere to start a document.

First runs and empty searches.

Fig. 2 Four ways to tell people something. Pick by how long it should stay and how much it matters.

How it behaves

Default and success variants use role=status; destructive uses role=alert for urgent feedback.

Insert live feedback after an action. Keep messages specific and explain how to fix errors.

Success and destructive variants use soft status backgrounds, tinted borders, and colored icons and titles. Supporting text stays neutral; the default uses a muted surface.

Compose AlertTitle, AlertDescription, and optional AlertAction. Add a decorative icon explicitly; native div props are forwarded. AlertDescription also works without a title and stays aligned beside an icon.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

alert-example.tsx

The full source is yours to edit once installed:

alert.tsx