Skip to content

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

Free

Simple Information Alert Alert Dialog for React

A one-button notice titled System Update, saying an update will install in the next maintenance window.

The title is System Update. The text says the update installs in the next maintenance window. OK is the only button. It does not install anything.

Use one button when there is no decision. Add cancel if people must choose. A note that should not take over the page is an Alert. In React, Base UI does not schedule the update.

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>System Update</AlertDialogTitle>
      <AlertDialogDescription>
        A new system update is available. The update will be installed during
        the next maintenance window.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogAction>OK</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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.

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.

All 39 alert dialog examples