Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert examples · Success

Success with Title and Action Alert for React

A success alert with a title and View Details and Dismiss buttons.

Framework
UI library

Success with a next step beats a passive confirmation. This React alert puts View Details and Dismiss buttons in AlertAction, at the end of an Alert with variant="success" and a single AlertTitle. Use it for confirmations the reader may want to follow up on, such as a finished upload or a completed task.

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 sits next to the Success title?

View Details and Dismiss, in one AlertAction. The alert is variant="success" with a single AlertTitle and no description.

Why is View Details a default button rather than green?

Button has no success variant, so View Details uses the default variant and Dismiss uses outline. The alert's green tint already says it's good news; the filled button only marks the main action.

What button variants work best for success alerts?

A default button for the main action and outline for Dismiss, as here, both size="xs". In the success variant, ghost buttons inside AlertAction take a green hover color, which suits a quieter pair.

Where are the buttons positioned?

AlertAction is absolutely positioned at the top right, and the alert adds right padding so the title keeps its room. className="flex gap-2" puts the two buttons in one row.

Do these buttons do anything in the file?

No. Neither has a click handler. Alert has no built-in dismiss, so Dismiss hides the alert only when your state stops rendering it.

What else is set on the alert?

className="max-w-lg" caps the width. The title text is Success. There is no icon, so the alert does not open an icon column.

All 25 alert examples