Alert Dialog

Interrupt a destructive action with an explicit confirmation decision.

Usage

Destructive confirmation

Require explicit confirmation before running an action that cannot be undone.

<!-- Alert Dialog / Destructive -->
<script setup lang="ts">
import { AlertDialogRoot, AlertDialogTrigger, AlertDialogOverlay, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogClose } from '@sectile/vue/alert-dialog'
</script>

<template>
  <AlertDialogRoot>
    <AlertDialogTrigger>Delete project</AlertDialogTrigger>
    <AlertDialogOverlay class="dialog-overlay" />
    <AlertDialogContent>
      <AlertDialogTitle>Delete project?</AlertDialogTitle>
      <AlertDialogDescription>
        This permanently removes the project and its deployment history.
      </AlertDialogDescription>
      <div class="actions">
        <AlertDialogClose>Cancel</AlertDialogClose>
        <AlertDialogClose class="danger">Delete project</AlertDialogClose>
      </div>
    </AlertDialogContent>
  </AlertDialogRoot>
</template>

Unsaved changes

Confirm before discarding changes that have not been saved.

<!-- Alert Dialog / Unsaved -->
<script setup lang="ts">
import { AlertDialogRoot, AlertDialogTrigger, AlertDialogOverlay, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogClose } from '@sectile/vue/alert-dialog'
</script>

<template>
  <AlertDialogRoot>
    <AlertDialogTrigger>Discard draft</AlertDialogTrigger>
    <AlertDialogOverlay class="dialog-overlay" />
    <AlertDialogContent>
      <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
      <AlertDialogDescription>
        Your edits to Release 0.3 will be lost.
      </AlertDialogDescription>
      <div class="actions">
        <AlertDialogClose>Keep editing</AlertDialogClose>
        <AlertDialogClose class="warning">Discard changes</AlertDialogClose>
      </div>
    </AlertDialogContent>
  </AlertDialogRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

<!-- Alert Dialog / Controlled -->
<script setup lang="ts">
import { AlertDialogRoot, AlertDialogTrigger, AlertDialogOverlay, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogClose } from '@sectile/vue/alert-dialog'
import { ref } from 'vue'

const open = ref(false)

</script>

<template>
  <AlertDialogRoot v-model:open="open">
    <AlertDialogTrigger>Delete project</AlertDialogTrigger>
    <AlertDialogOverlay class="dialog-overlay" />
    <AlertDialogContent>
      <AlertDialogTitle>Delete project?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
      <AlertDialogClose>Cancel</AlertDialogClose>
    </AlertDialogContent>
  </AlertDialogRoot>
</template>

Outside interaction

closeOnInteractOutside controls whether a pointer interaction outside the content closes it. Elements in interactOutsideExclusions stay interactive in a modal and do not count as outside. For conditional decisions, call preventDefault() from the interact-outside event.

template

<AlertDialogRoot
  :interact-outside-exclusions="[ignoredElement]"
  @interact-outside="(event) => {
    if (event.isInside(temporarilyIgnoredElement)) event.preventDefault()
  }"
/>

API

Vue package: @sectile/vue/alert-dialog

Components

AlertDialogRoot
AlertDialogTrigger
AlertDialogPortal
AlertDialogOverlay
AlertDialogContent
AlertDialogTitle
AlertDialogDescription
AlertDialogClose

Props

`AlertDialogRootProps`

align: TypePositionAlignDefault'center'
Alignment of positioned content relative to its anchor.
arrowPadding: TypenumberDefault8
Minimum space kept between an arrow and the edge of positioned content.
autoFocus: TypebooleanDefaulttrue
Whether focus moves into the component when it opens.
avoidCollisions: TypebooleanDefaulttrue
Whether positioned content may flip or shift to remain visible.
closeOnInteractOutside: TypebooleanDefaultfalse
Whether interaction outside the content closes it.
collisionBoundary: TypePositionBoundaryDefaultundefined
Boundary used to keep positioned content visible.
collisionPadding: TypePositionPaddingDefault8
Space kept between positioned content and its collision boundary.
defaultOpen: TypebooleanDefaultfalse
Initial uncontrolled open state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
hideWhenDetached: TypebooleanDefaultfalse
Whether positioned content hides when its anchor leaves the layout.
initialFocus: TypeHTMLElementDefaultundefined
Element or resolver that receives focus when the component opens.
interactOutsideExclusions: Typereadonly HTMLElement[]Defaultundefined
Elements that stay interactive and do not count as outside interaction.
label: TypestringDefaultundefined
Accessible name announced for the control.
open: TypebooleanDefaultundefined
Whether the associated popup or disclosure is open.
restoreFocus: TypebooleanDefaulttrue
Whether focus returns to the trigger when open content closes.
side: TypePositionSideDefault'bottom'
Preferred side of the anchor for positioned content.
sideOffset: TypenumberDefault8
Distance between positioned content and its anchor.
strategy: TypePositionStrategyDefault'absolute'
CSS positioning strategy used for anchored content.
tracking: TypePositionTrackingDefaultundefined
Update strategy used while anchored content is open.
trapFocus: TypebooleanDefaulttrue
Whether keyboard focus stays inside open content.
unmountOnExit: TypebooleanDefaultfalse
Whether presence-managed content is removed from the DOM after its exit motion completes.

`AlertDialogPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

`AlertDialogPortalProps`

defer: TypebooleanDefaultfalse
Whether Teleport target resolution waits until the end of the current mount or update tick.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
to: Typestring | HTMLElementDefault'body'
Teleport target for portalled content.

Slots

`AlertDialogRootSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
open: Typeboolean
Whether the associated popup or disclosure is open.

Other types

`AlertDialogOpenChangeHandler`

type AlertDialogOpenChangeHandler = PopupFactoryOptions['onOpenChange']

`AlertDialogInteractOutsideHandler`

type AlertDialogInteractOutsideHandler = NonNullable<PopupFactoryOptions['onInteractOutside']>

Parts

Shared scope: [data-scope="alert-dialog"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`trigger`	`[data-part="trigger"]`	Opens, closes, or activates the associated content.	—
`overlay`	`[data-part="overlay"]`	Covers surrounding content while a modal surface is open.	—
`content`	`[data-part="content"]`	Contains the component content shown for the active state.	—
`title`	`[data-part="title"]`	Labels the associated content.	—
`description`	`[data-part="description"]`	Describes the associated content or decision.	—
`close`	`[data-part="close"]`	Closes or dismisses the current surface.	—

Keyboard interaction

Key	Behavior
`Enter` / `Space`	Activate the trigger or focused action.
`Tab` / `Shift+Tab`	Move through available controls; modal content keeps focus inside.
`Escape`	Close the popup and restore focus when configured.

Accessibility

The alert dialog names its title and description, keeps modal focus inside, and restores focus on close.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Alert Dialog ​

Usage ​

Destructive confirmation ​

Unsaved changes ​

Controlled ​

Outside interaction ​

API ​

Props ​

AlertDialogRootProps ​

AlertDialogPartProps ​

AlertDialogPortalProps ​

Slots ​

AlertDialogRootSlotProps ​

Other types ​

AlertDialogOpenChangeHandler ​

AlertDialogInteractOutsideHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​