Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Success

Success with Icon Alert Dialog for React

A success dialog with a check icon beside the title confirming a payment.

Framework
UI library

A green check says it worked before anyone reads. This React alert dialog confirms a payment with a check icon beside the title and the amount in the description. It's shadcn.io's Alert Dialog on Base UI.

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

Which icon for success?

A circled check is clear without being heavy. Keep playful icons for celebrations, not payments.

Should it always be green?

Use text-success, the theme's success color, which people read as done. It adapts to dark mode.

How specific should the description be?

Very: the amount, a reference, where the receipt went. Your payment of $99.00 has been processed successfully gives people proof.

Should I mention the email receipt?

Yes, for anything people may need to prove later. It also saves support requests.

What size should the icon be?

size-5, in a flex items-center gap-2 row with the title.

Does Done close the dialog?

Yes. On Base UI, AlertDialogAction is a plain button: control open and close the dialog in its handler, or use AlertDialogCancel for a button that only dismisses.

All 39 alert dialog examples