shadcn.io is an independent project built on shadcn/ui
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 Vue, Ark UI does not schedule the update.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger :asChild="true">
<Button variant="outline">Show Info</Button>
</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>
<AlertDialogClose :asChild="true">
<AlertDialogAction>OK</AlertDialogAction>
</AlertDialogClose>
</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.
API Reference
Alert Dialog
Sets asChild. The rest is on the Alert Dialog page.
Button
Sets variant="outline". The rest is on the Button page.
