Preview

Installation

npx sigma-ui@latest add dialog

Usage

<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
</script>

<template>
  <Dialog>
    <DialogTrigger>
      Edit Profile
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when you're done.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        Save changes
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

• Use v-model:open on <Dialog> to control the open state.
• Use <DialogClose> to render your own close control.
• Use <DialogScrollContent> instead of <DialogContent> when the overlay itself should scroll.

Opening from a menu

To open a Dialog from a Context Menu or Dropdown Menu, wrap the menu in the Dialog component. For more information, see this issue.

<template>
  <Dialog>
    <ContextMenu>
      <ContextMenuTrigger>Right click</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Open</ContextMenuItem>
        <ContextMenuItem>Download</ContextMenuItem>
        <DialogTrigger as-child>
          <ContextMenuItem>
            <span>Delete</span>
          </ContextMenuItem>
        </DialogTrigger>
      </ContextMenuContent>
    </ContextMenu>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Are you absolutely sure?</DialogTitle>
        <DialogDescription>
          This action cannot be undone. Are you sure you want to permanently
          delete this file from our servers?
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <Button type="submit">
          Confirm
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

Examples

Custom close button

Scroll body

The content scrolls inside the dialog while the header and footer stay in place.

Scroll overlay

The whole dialog scrolls inside the overlay with <DialogScrollContent>.

API Reference

Dialog

Props

Prop	Type	Default
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	-
modal The modality of the dialog When set to true, <br> interaction with outside elements will be disabled and only dialog content will be visible to screen readers.	boolean	-
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

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.	-

DialogClose

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.	-

DialogTrigger

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.	-

DialogHeader

Slots

Slot	Scope
default The content of the component.	-

DialogTitle

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.	-

DialogDescription

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.	-

DialogContent

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	-
closeLabel	string	"Close"

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.	-

DialogScrollContent

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	-
closeLabel	string	"Close"

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.	-

DialogFooter

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Adheres to the Dialog (Modal) 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.