Mixed Button Styles Alert Dialog for React

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.

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.

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.

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.

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.

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.