Preview

Installation

npx sigma-ui@latest add alert-dialog

Usage

<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger>Open</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction>Continue</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

• Use v-model:open on <AlertDialog> to control the open state.
• Unlike a regular dialog, it does not close when you click outside. The user has to pick <AlertDialogCancel> or <AlertDialogAction>.

Examples

Basic

API Reference

AlertDialog

Props

Prop	Type	Default
unmountOnHide When set to false, the dialog content will not be unmounted when closed, but instead hidden with CSS. <br> Useful for SEO or when you want to improve performance by not remounting the component on every open.	boolean	true
open The controlled open state of the dialog. Can be binded as v-model:open.	boolean	-
defaultOpen The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.	boolean	-

Events

Event	Payload
update:open Event handler called when the open state of the dialog changes.	[value: boolean]

Slots

Slot	Scope
default The content of the component.	-

AlertDialogTrigger

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

AlertDialogContent

Props

Prop	Type	Default
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
disableOutsidePointerEvents When true, hover/focus/click interactions will be disabled on elements outside the DismissableLayer. Users will need to click twice on outside elements to interact with them: once to close the DismissableLayer, and again to trigger the element.	boolean	-

Events

Event	Payload
escapeKeyDown Event handler called when the escape key is down. Can be prevented.	[event: KeyboardEvent]
pointerDownOutside Event handler called when a pointerdown event happens outside of the DismissableLayer. Can be prevented.	[event: PointerDownOutsideEvent]
focusOutside Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.	[event: FocusOutsideEvent]
interactOutside Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.	[event: PointerDownOutsideEvent | FocusOutsideEvent]
openAutoFocus Event handler called when auto-focusing on open. Can be prevented.	[event: Event]
closeAutoFocus Event handler called when auto-focusing on close. Can be prevented.	[event: Event]

Slots

Slot	Scope
default The content of the component.	-

AlertDialogHeader

Slots

Slot	Scope
default The content of the component.	-

AlertDialogTitle

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

AlertDialogDescription

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

AlertDialogFooter

Slots

Slot	Scope
default The content of the component.	-

AlertDialogAction

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

AlertDialogCancel

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Adheres to the Alert and Message Dialogs WAI-ARIA design pattern. Reka UI traps focus inside the dialog and returns it to the trigger on close.

Key	Description
Space	Opens or closes the dialog.
Enter	Opens or closes the dialog.
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.
Esc	Closes the dialog and moves focus to the trigger.