Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Informational

Simple Information Alert Alert Dialog for React

A simple informational dialog with one OK button.

Framework
UI library

Not every dialog needs a decision. This React alert dialog tells people a system update is coming and asks only for an OK. It's shadcn.io's Alert Dialog on Base UI with a title, a description and a single action.

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.

FAQ

Alert dialog or toast?

A dialog for information people must acknowledge, like changes to their workflow. A toast for FYI messages they can ignore, like Settings saved.

Why an Alert Dialog instead of a Dialog?

It stays open until people acknowledge it: no close button, no closing on a click outside. A Dialog suits content people may dismiss at any time.

When should it appear?

When it's relevant to what people are doing, or when it's urgent. Not on every page load, or people learn to click OK without reading.

How often?

Once per message per person. Remember dismissals so the same notice doesn't come back.

How much text?

Two or three sentences. Link to details if there's more.

Does OK 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.