Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert examples · Success

Success with Everything Alert for React

A success alert with a check icon, a title, a description, and View Details and Dismiss buttons.

Framework
UI library

This is the full success alert: a CircleCheckIcon from Lucide, a title, a description, and View Details and Dismiss buttons in an Alert with variant="success". The icon goes first and the alert gives it its own column in the success color. Use it for confirmations that should stand out, such as a completed payment, an activated account or a finished migration.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What is in this success alert?

CircleCheckIcon first, then AlertTitle, AlertDescription, and View Details plus Dismiss in AlertAction. The root is variant="success" with className="max-w-lg".

What color is the CircleCheck icon?

The theme's --success color, set by variant="success" on the alert. You don't add color or size classes to the icon; the alert handles both, and the text keeps its regular colors.

How does the icon line up with the title?

Put it first, before AlertTitle: the alert places a direct svg child in its own column spanning the title and description, and aligns it with the title's first line.

Why is the icon aria-hidden?

The title already says Success, so the icon is decorative. The demo sets aria-hidden="true" on CircleCheckIcon.

How are the buttons set up?

View Details is the default Button and Dismiss is variant="outline". Both are size="xs" in one AlertAction with className="flex gap-2". Neither has a click handler.

What does the description say?

"Your changes have been saved successfully and are now live." It is an AlertDescription in the muted color. The success tint is on the background, the border, and the icon.

All 25 alert examples