alert-dialog

Alert Dialog

Asks the shopper to confirm or cancel an action before it happens, such as removing an address, and keeps focus inside until they choose.

States: Default

Parts

Part	File	Does
AlertDialog	AlertDialog.vue	Groups all parts of the alert dialog.
AlertDialogAction	AlertDialogAction.vue	Confirms the action the dialog asks about and closes the dialog.
AlertDialogCancel	AlertDialogCancel.vue	Dismisses the dialog without taking the action.
AlertDialogContent	AlertDialogContent.vue	Holds what the alert dialog shows while open.
AlertDialogDescription	AlertDialogDescription.vue	Explains what the action in the dialog will do.
AlertDialogFooter	AlertDialogFooter.vue	Holds the cancel and confirm buttons at the bottom of the dialog.
AlertDialogHeader	AlertDialogHeader.vue	Groups the title and description at the top of the dialog.
AlertDialogMedia	AlertDialogMedia.vue	Holds an icon or image that illustrates the dialog.
AlertDialogTitle	AlertDialogTitle.vue	Names the action the dialog asks the user to confirm.
AlertDialogTrigger	AlertDialogTrigger.vue	Opens the alert dialog.

Anatomy

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia />
      <AlertDialogTitle />
      <AlertDialogDescription />
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel />
      <AlertDialogAction />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Styling

Part	Recipe
AlertDialogContent	alert-dialog-content
AlertDialogContent	alert-dialog-overlay
AlertDialogDescription	alert-dialog-description
AlertDialogFooter	alert-dialog-footer
AlertDialogHeader	alert-dialog-header
AlertDialogMedia	alert-dialog-media
AlertDialogTitle	alert-dialog-title

Install

Writes 11 files into components/ui/alert-dialog/. For agents, npx @frontic/ui docs alert-dialog prints this reference as markdown; the MCP server serves the same.

Installs with it: button
npm packages: @vueuse/core; class-variance-authority; reka-ui

Built from

Button

API reference

AlertDialog AlertDialog.vue

Groups all parts of the alert dialog.

Prop	Type	Default
unmountOnHide	boolean	true

open	boolean	false

defaultOpen	boolean	false

Event	Payload
update:open	value: boolean

Slot	Slot props
default	{ open: boolean; close: () => void; }

Parts

Anatomy

Styling

Install

Built from

API reference

AlertDialog AlertDialog.vue

AlertDialogAction AlertDialogAction.vue

AlertDialogCancel AlertDialogCancel.vue

AlertDialogContent AlertDialogContent.vue

AlertDialogDescription AlertDialogDescription.vue

AlertDialogFooter AlertDialogFooter.vue

AlertDialogHeader AlertDialogHeader.vue

AlertDialogMedia AlertDialogMedia.vue

AlertDialogTitle AlertDialogTitle.vue

AlertDialogTrigger AlertDialogTrigger.vue