Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Informational

Information with Status Badge Alert Dialog for React

An informational dialog with a status badge under the title announcing scheduled maintenance.

Framework
UI library

Status matters: upcoming maintenance isn't an outage. This React alert dialog puts an Upcoming badge under the title of a maintenance notice, with a calendar icon in the title. It's shadcn.io's Alert Dialog on Base UI with an info Badge.

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

Where should the badge go?

Under the title, before the description, in AlertDialogHeader. The title says what, the badge says when, the description gives details.

Which badge variant should a status use?

variant="info" for upcoming, warning for pending, success for done, destructive for failures. The variants follow the theme in dark mode.

What should the badge say?

One or two words: Upcoming, In Progress, Completed. Times and details belong in the description.

Can I show several badges?

Avoid it; one status is clearer. Mention anything else in the description.

Badge or icon?

Both work together: the calendar icon says what kind of message it is, the badge says its status.

Does Understood 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