Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Informational

Information with Action Button Alert Dialog for React

An informational dialog with a bell icon, a Not Now button and a Learn More action.

Framework
UI library

Information can be an invitation as well as a notice. This React alert dialog suggests enabling notifications and offers Not Now or Learn More, so people can decline gently or explore. It's shadcn.io's Alert Dialog on Base UI with a bell icon beside the title.

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 should the action say?

What happens next: Learn More opens details, it doesn't turn anything on. Avoid Yes or Proceed, which don't say where they lead.

Should Learn More change a setting?

No. Let it navigate to details or settings, and ask for the actual change there. This dialog informs and invites; it doesn't commit people to anything.

Why Not Now instead of Cancel?

It's softer and implies the offer still stands. Keep Cancel for forms and real decisions.

Does an information dialog always need two buttons?

Only when there's a meaningful action to offer. For plain acknowledgment, one button is enough, as in Simple Information Alert.

Should both buttons look equally important?

No. AlertDialogAction gets the solid style and AlertDialogCancel the outline one, which suggests the preferred path while keeping the way out clear.

Does Learn More close the dialog?

Yes; navigate in its click handler. On Base UI, AlertDialogAction is a plain button that leaves the dialog open: control open and set it to false in the action's handler.

All 39 alert dialog examples