Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Information with Status Badge Alert Dialog for React

A maintenance notice with a calendar icon, an Upcoming badge, and one Understood button. The date in the copy is static.

The title is Scheduled Maintenance. The badge says Upcoming. The description names a Sunday window. Understood does not subscribe anyone.

Use a badge when the status is not the title, such as upcoming rather than an outage. A live incident belongs in an Alert on the page. In React, Base UI does not check that window.

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

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Show Info
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle className="flex items-center gap-2">
        <CalendarIcon aria-hidden="true" className="size-5" />
        Scheduled Maintenance
      </AlertDialogTitle>
      <Badge pill variant="info">
        Upcoming
      </Badge>
      <AlertDialogDescription>
        We&apos;ll be performing scheduled maintenance on Sunday, March 15th
        from 2:00 AM - 4:00 AM EST. During this time, the service may be
        temporarily unavailable.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogAction>Understood</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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.

API Reference

Alert Dialog

No extra props in this demo. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Badge

Sets pill and variant="info". The rest is on the Badge page.

All 39 alert dialog examples