Skip to content

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

Free

Mixed Button Styles Alert Dialog for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not update the project.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

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

API Reference

Alert Dialog

Sets asChild and props. The rest is on the Alert Dialog page.

Button

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

All 39 alert dialog examples