Skip to content

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

Free

Mixed Button Styles Alert Dialog for React

A status dialog with Cancel apart, an outline Mark as On Hold, and a filled Mark as Complete beside it.

The title is Update Project Status. On Hold is outline and Complete is the solid action. Neither button changes a project.

Split the styles when one choice is the recommendation. If the choices are peers, make them look the same. A longer list of statuses fits a Select. In React, Base UI does not update the project.

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" />}>
    Update Status
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Update Project Status</AlertDialogTitle>
      <AlertDialogDescription>
        Choose the new status for this project.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter className="sm:justify-between">
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <div className="flex flex-col-reverse gap-2 sm:flex-row">
        <AlertDialogAction variant="outline">
          Mark as On Hold
        </AlertDialogAction>
        <AlertDialogAction>Mark as Complete</AlertDialogAction>
      </div>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

Which button gets which style?

The recommended action gets the default solid style, the alternative gets variant="outline", and Cancel keeps its outline look. Use variant="destructive" only for actions that destroy something.

Can I use other colors than the variants?

Prefer the variants, since they follow the theme in light and dark mode. If you need a green success button, check the variants first rather than adding raw color classes, which won't adapt to the theme.

How are the buttons grouped?

AlertDialogFooter takes sm:justify-between; Cancel sits on one side and the two actions share a flex gap-2 group on the other, so the layout reads as cancel versus act, then which act.

What happens on small screens?

The footer stacks its children, and the action group uses flex-col-reverse below sm, so every button is full width and the primary action ends up on top.

Is it enough to tell the buttons apart by style?

No. Style helps sighted users, but the labels carry the meaning for everyone, including screen reader users and people who don't see color. Mark as On Hold and Mark as Complete say what each does.

Do all three buttons close the dialog?

Yes. Each action closes it after its click handler runs. On Base UI, AlertDialogAction is a plain button that leaves the dialog open: control open and set it to false in the action's handler.

API Reference

Alert Dialog

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

Button

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

All 39 alert dialog examples