Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Informational

Information with Centered Icon Alert Dialog for React

An informational dialog with a centered lightbulb icon and a keyboard shortcut in its text.

Framework
UI library

A good tip deserves a moment of attention. This React alert dialog centers a lightbulb in a tinted circle above a Pro Tip that teaches a keyboard shortcut. It's shadcn.io's Alert Dialog on Base UI with the shortcut set in a Kbd.

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

When should the icon be centered?

For messages worth pausing on: tips, milestones, announcements. Routine information reads faster with the icon beside the title.

Which colors suit a tip?

bg-warning/10 behind a text-warning icon, the theme's amber. Use info for general notes and success for completions; the tokens adapt to dark mode.

What size should the circle be?

size-12 with a size-6 icon inside, so the icon is half the circle's width.

How is the shortcut shown?

With the Kbd component inside AlertDialogDescription, which styles Cmd+K as a key and renders a kbd element.

Should the description be centered too?

Yes, AlertDialogHeader centers everything with sm:place-items-center sm:text-center. For long text, start-align it instead.

How often should tips appear?

Once per tip per person. Remember which tips were dismissed, and show each when it's relevant, not on every visit. 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