Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Informational

Information with Icon Alert Dialog for React

An informational dialog with an info icon beside the title and a single button to acknowledge it.

Framework
UI library

An icon tells people what kind of message this is before they read it. This React alert dialog adds an info icon beside the title of a feature announcement, with a single Got it button. 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

What color should an info icon be?

text-info, the theme's blue for neutral information. Keep destructive, success and warning colors for messages with that weight.

Beside the title or above it?

Beside it, in a flex items-center gap-2 row, for routine information. Center it above the title for messages that need more attention.

What size?

size-5 matches the title text.

Can different messages use different icons?

Yes, consistently: info for general notes, a lightbulb for tips, a bell for notifications. People learn the system.

Does the icon need a label?

No. It's decorative and aria-hidden, because the title says New Features Available. Label an icon only when it carries meaning the text doesn't.

Does Got it 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