Dialog

Open focused content above the page with modal or non-modal behavior.

Usage

Keep focus inside the open dialog and restore it to the trigger when the dialog closes.

<!-- Dialog / Modal -->
<script setup lang="ts">
import { DialogRoot, DialogTrigger, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from '@sectile/vue/dialog'
</script>

<template>
  <DialogRoot>
    <DialogTrigger>Open deployment</DialogTrigger>
    <DialogOverlay class="dialog-overlay" />
    <DialogContent>
      <DialogTitle>Deployment</DialogTitle>
      <DialogDescription>Review the release before continuing.</DialogDescription>
      <DialogClose>Close</DialogClose>
    </DialogContent>
  </DialogRoot>
</template>

Leave surrounding content interactive while the dialog remains open.

<!-- Dialog / Non Modal -->
<script setup lang="ts">
import { DialogRoot, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose } from '@sectile/vue/dialog'
</script>

<template>
  <DialogRoot :modal="false">
    <DialogTrigger>Open deployment details</DialogTrigger>
    <DialogContent>
      <DialogTitle>Deployment details</DialogTitle>
      <DialogDescription>
        Keep the page interactive while these details remain open.
      </DialogDescription>
      <DialogClose>Close</DialogClose>
    </DialogContent>
  </DialogRoot>
</template>

Controlled

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

<!-- Dialog / Controlled -->
<script setup lang="ts">
import { DialogRoot, DialogTrigger, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from '@sectile/vue/dialog'
import { ref } from 'vue'

const open = ref(false)

</script>

<template>
  <DialogRoot v-model:open="open">
    <DialogTrigger>Open deployment</DialogTrigger>
    <DialogOverlay class="dialog-overlay" />
    <DialogContent>
      <DialogTitle>Deployment</DialogTitle>
      <DialogDescription>Review the release before continuing.</DialogDescription>
      <DialogClose>Close</DialogClose>
    </DialogContent>
  </DialogRoot>
</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

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

API

Vue package: @sectile/vue/dialog

Components

DialogRoot
DialogTrigger
DialogPortal
DialogOverlay
DialogContent
DialogTitle
DialogDescription
DialogClose

Props

`DialogRootProps`

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: TypebooleanDefaulttrue
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.
modal: TypebooleanDefaulttrue
Whether open content blocks interaction with the surrounding page.
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.

`DialogPartProps`

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.

`DialogPortalProps`

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

`DialogRootSlotProps`

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

Other types

`DialogOpenChangeHandler`

type DialogOpenChangeHandler = PopupFactoryOptions['onOpenChange']

`DialogInteractOutsideHandler`

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

Parts

Shared scope: [data-scope="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 dialog connects title and description, isolates modal background content, traps focus, locks page scroll, and restores focus on close.

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

Dialog ​

Usage ​

Modal ​

Non modal ​

Controlled ​

Outside interaction ​

API ​

Props ​

DialogRootProps ​

DialogPartProps ​

DialogPortalProps ​

Slots ​

DialogRootSlotProps ​

Other types ​

DialogOpenChangeHandler ​

DialogInteractOutsideHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​