Destructive action

Removing something goes one of two ways. If it can be reversed, do it at once and offer Undo in a Toast. If it can't, confirm first with an Alert Dialog. Both start from the row's Dropdown Menu. Try Archive, then Delete.

How it works

• Archive is reversible, so there's no dialog: the row goes, and the toast's Undo puts it back in the same place. A confirm step on something you can undo only teaches people to click through confirms.
• Delete is not, so the menu item opens a confirm. Its label ends in … because it asks something before acting.
• The dialog is controlled (open and onOpenChange), because a menu item opens it, not an AlertDialogTrigger.
• AlertDialogAction is a plain Button: unlike Radix, it doesn't close the dialog. Close it yourself when the request succeeds, so the dialog stays up with its pending label ("Deleting service") while the request runs, and can't be dismissed mid-request.
• The dialog keeps its last target after closing, so the title doesn't go blank during the exit animation.
• If the request fails, the dialog stays open and an error toast says nothing changed, so trying again is one click.

Guidelines

• Name the object in the title ("Delete payroll-api?"), not "Are you sure?".
• Say what is lost in the description ("Its deploys, logs and environment variables are deleted for good").
• The confirm button is the verb and the noun ("Delete service"), variant="destructive". Never "OK" or "Yes".
• Destructive items go last in the menu, after a separator, with variant="destructive".
• For the most dangerous deletes (a whole workspace), ask the user to type the name before the button enables: AlertDialogConfirmInput with useConfirmText (see Alert Dialog, Typed confirmation).