Component detail entry

Overlay

@vean/ui

SDialog

Dialog

Dialog belongs to the Overlay category. Start with demos and usage, then use the API tables to finish integration and styling decisions.

Use the quick jump panel to reach overview, usage, demos, and API first, then continue through the full page.

Quick jump

Overview Usage Demos API Changelog

Related components

If you are composing interactions in the same family, these components usually pair well together.

Drawer HoverCard Popconfirm Popover Sheet Tooltip

Dialog

Overview

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

SDialog is the declarative wrapper for inline usage. dialog(...) is the imperative API for creating alert-style dialogs programmatically. It combines the DialogRoot/DialogTrigger/DialogOverlay/DialogPopup/DialogHeader/DialogContent/DialogFooter/DialogTitle/DialogDescription/DialogClose/DialogFullscreen/DialogCancel/DialogConfirm Aria primitive family (zero styles) with the dialogVariants style recipe (12 slots, 6 sizes).

Mount SDialogProvider once near your app root before calling the imperative dialog(...) API.

Usage

Declarative

Imperative API

<script setup lang="ts">
import { h } from 'vue';
import { SButton, SDialogProvider, dialog } from '@vean/ui';

function openWarningDialog() {
  dialog.warning('Delete Project', {
    description: 'This action cannot be undone.',
    content: h('div', 'Please confirm before continuing.'),
    confirmText: 'Delete'
  });
}
</script>

<template>
  <SDialogProvider />

  <SButton color="warning" @click="openWarningDialog">Open Dialog</SButton>
</template>

Features

🧩 Aria/styled split — DialogCompact aggregates the primitives and composes the overlay/popup/header/content/footer; SDialog only injects styles and forwards slots/events
🖱️ Declarative + imperative — inline SDialog with a trigger, or dialog.* API driven by SDialogProvider
🎭 Modal by default — modal renders aria-modal, useHideOthers, outside-pointer blocking and focus trapping; toggle with modal={false}
⚠️ Alert mode — isAlert switches to role="alertdialog", adds the type icon and aria-live (polite/assertive)
🏷️ Accessible title/description — title/description wire aria-labelledby/aria-describedby
❌ Closable — showClose renders a close control; Escape, outside pointer/focus and the close button all dismiss
🖐️ Draggable — draggable lets you move the dialog by dragging its header (powered by useDraggable from @vueuse/core)
⛶ Fullscreen — showFullscreen renders a toggle; fullscreen/defaultFullscreen drive a v-model:fullscreen state
🔘 Cancel/confirm — showCancel/showConfirm with localized cancelText/confirmText from dialog.cancel/dialog.confirm
🧹 Pure mode — pure drops the header/footer for fully custom content
📐 6 sizes — xs–2xl size; per-slot ui overrides
♿ Accessible — real role="dialog", focus trap + loop, focus restoration on close, axe-core zero violations

Component family

SDialog (styled) — the entry wrapper; dialogVariants recipe with dynamic slot forwarding
SDialogProvider (styled) — hosts the imperative dialog(...) API; subscribes to DialogState
DialogRoot (Aria) — the state owner; open via useControllableState, dir/modal, provideDialogRootContext
DialogTrigger (Aria) — a Button that opens the dialog
DialogOverlay (Aria) — the dimmed backdrop
DialogPopup / DialogPopupImpl (Aria) — the focus-trapped, dismissable surface hosting the dialog body
DialogTitle / DialogDescription (Aria) — the labelled/described elements
DialogClose (Aria) — the close control, toggles open and emits close
DialogFullscreen (Aria) — the fullscreen toggle, toggles the fullscreen state and emits fullscreen
DialogCancel / DialogConfirm (Aria) — footer actions, emit cancel/confirm
DialogHeader / DialogContent / DialogFooter (Aria) — layout sections
DialogCompact (Aria) — the aggregated composite; composes all primitives and exposes the per-part slots

Demos

Basic

100%

Footer

100%

State

100%

Prevent

100%

Dialog API

100%

Draggable

100%

Fullscreen

100%

API

Aria Layer

Dialog

35 Props13 Emits9 Slots

Props

Prop	Type	Default	Description
showFullscreen	boolean	false	Whether show the fullscreen toggle button in the header of the dialog.
class	ClassValue	—	the popup class of the dialog
size	ThemeSize	—	Visual size of the component.
ui	Partial<DialogUi>	—	Per-slot class overrides for the component.
title	string	—	The title of the dialog. This is used for accessibility purposes and will be rendered in the header of the dialog if the `title` slot is not provided.
description	string	—	The description of the dialog. This is used for accessibility purposes and will be rendered in the content of the dialog if the `description` slot is not provided.
icon	IconValue	—	The icon of the dialog. This is used for accessibility purposes and will be rendered in the header of the dialog if the `icon` slot is not provided.
showClose	boolean	true	Whether show the close button in the header of the dialog.
pure	boolean	false	Whether to use the pure version of the dialog, which does not include the header and footer. This is useful when you want to fully control the content of the dialog and do not need the built-in header and footer.
showCancel	boolean \| 'onlyWarning'	'onlyWarning'	Whether to show the cancel button. When set to `onlyWarning`, the cancel button will only be shown when the dialog is an alert dialog with `alertType="warning"`. When set to `true`, the cancel button will always be shown.
cancelText	string	—	The text of the cancel button. This is used for accessibility purposes and will be rendered in the footer of the dialog if the `cancel` slot is not provided. Defaults to the localized `dialog.cancel` message from `ConfigProvider`.
showConfirm	boolean	—	Whether to show the confirm button when the dialog is an alert dialog. The default value is `true` when the dialog is an alert dialog.
confirmText	string	—	The text of the confirm button. This is used for accessibility purposes and will be rendered in the footer of the dialog if the `confirm` slot is not provided. Defaults to the localized `dialog.confirm` message from `ConfigProvider`.
triggerProps	DialogTriggerProps	—	Properties forwarded to the trigger element.
overlayProps	DialogOverlayProps	—	Properties forwarded to the overlay element.
portalProps	PortalProps	—	Properties forwarded to the portal element.
popupProps	DialogPopupProps	—	Properties forwarded to the popup element.
headerProps	DialogHeaderProps	—	Properties forwarded to the header element.
contentProps	DialogContentProps	—	Properties forwarded to the content element.
footerProps	DialogFooterProps	—	Properties forwarded to the footer element.
titleProps	DialogTitleProps	—	Properties forwarded to the title element.
descriptionProps	DialogDescriptionProps	—	Properties forwarded to the description element.
closeProps	DialogCloseProps	—	Properties forwarded to the close element.
fullscreenProps	DialogFullscreenProps	—	Properties forwarded to the fullscreen element.
cancelProps	DialogCancelProps	—	Properties forwarded to the cancel element.
confirmProps	DialogConfirmProps	—	Properties forwarded to the confirm element.
modal	ModalityTier	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers. Set to `'trap-focus'` to trap focus while still letting outside pointer events through (non-modal side panels such as `Drawer` in the `'trap-focus'` tier).
dir	Direction	—	The text direction of the dialog
isAlert	boolean	false	Whether the dialog is an alert dialog. An alert dialog is a dialog that interrupts the user's workflow to communicate an important message and requires a response. When set to `true`, the dialog will have `role="alertdialog"` and will require a `DialogTitle` to be provided. This is used for accessibility purposes.
alertType	DialogAlertType	—	The alert type of the dialog, which determines the default icon and styles when the dialog is an alert dialog.
draggable	boolean	false	Whether the dialog can be moved by dragging its header.
fullscreen	boolean	undefined	The controlled fullscreen state of the dialog. Can be bound with `v-model:fullscreen`.
defaultFullscreen	boolean	false	The fullscreen state of the dialog when it is initially rendered. Use when you do not need to control its fullscreen state.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.
update:fullscreen	boolean	Event handler called when the fullscreen state of the dialog changes.
click	PointerEvent	Event handler called when the dialog trigger is activated.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	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.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
close	MouseEvent	Event handler called when the dialog is requested to be closed.
fullscreen	MouseEvent	Event handler called when the fullscreen state of the dialog is requested to be toggled.
confirm	MouseEvent	Event handler called when the dialog is requested to be closed by confirming.
cancel	MouseEvent	Event handler called when the dialog is requested to be canceled.

Slots

Slot Name	Parameters	Description
default	props: DialogCompactBaseSlotProps	Custom content for the default slot.
trigger	DialogCompactBaseSlotProps	Custom content for the trigger slot.
title	DialogCompactBaseSlotProps	Custom content for the title slot.
description	DialogCompactBaseSlotProps	Custom content for the description slot.
close	DialogCompactBaseSlotProps	Custom content for the close slot.
fullscreen	DialogCompactBaseSlotProps	Custom content for the fullscreen slot.
footer	DialogCompactBaseSlotProps	Custom content for the footer slot.
cancel	DialogCompactBaseSlotProps	Custom content for the cancel slot.
confirm	DialogCompactBaseSlotProps	Custom content for the confirm slot.

DialogCancel

4 Props1 Emits

Props

Prop	Type	Default	Description
type	ButtonType	'button'	The type of the button element. Can be one of 'button', 'submit', or 'reset'.
disabled	boolean	—	Whether the component is disabled.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

Emits

Emit Name	Parameters	Description
cancel	MouseEvent	Event handler called when the dialog is requested to be canceled.

DialogClose

4 Props1 Emits

Props

Prop	Type	Default	Description
type	ButtonType	'button'	The type of the button element. Can be one of 'button', 'submit', or 'reset'.
disabled	boolean	—	Whether the component is disabled.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

Emits

Emit Name	Parameters	Description
close	MouseEvent	Event handler called when the dialog is requested to be closed.

DialogCompact

32 Props13 Emits9 Slots

Props

Prop	Type	Default	Description
title	string	—	The title of the dialog. This is used for accessibility purposes and will be rendered in the header of the dialog if the `title` slot is not provided.
description	string	—	The description of the dialog. This is used for accessibility purposes and will be rendered in the content of the dialog if the `description` slot is not provided.
icon	IconValue	—	The icon of the dialog. This is used for accessibility purposes and will be rendered in the header of the dialog if the `icon` slot is not provided.
showClose	boolean	true	Whether show the close button in the header of the dialog.
showFullscreen	boolean	true	Whether show the fullscreen toggle button in the header of the dialog.
pure	boolean	false	Whether to use the pure version of the dialog, which does not include the header and footer. This is useful when you want to fully control the content of the dialog and do not need the built-in header and footer.
showCancel	boolean \| 'onlyWarning'	'onlyWarning'	Whether to show the cancel button. When set to `onlyWarning`, the cancel button will only be shown when the dialog is an alert dialog with `alertType="warning"`. When set to `true`, the cancel button will always be shown.
cancelText	string	—	The text of the cancel button. This is used for accessibility purposes and will be rendered in the footer of the dialog if the `cancel` slot is not provided. Defaults to the localized `dialog.cancel` message from `ConfigProvider`.
showConfirm	boolean	—	Whether to show the confirm button when the dialog is an alert dialog. The default value is `true` when the dialog is an alert dialog.
confirmText	string	—	The text of the confirm button. This is used for accessibility purposes and will be rendered in the footer of the dialog if the `confirm` slot is not provided. Defaults to the localized `dialog.confirm` message from `ConfigProvider`.
triggerProps	DialogTriggerProps	—	Properties forwarded to the trigger element.
overlayProps	DialogOverlayProps	—	Properties forwarded to the overlay element.
portalProps	PortalProps	—	Properties forwarded to the portal element.
popupProps	DialogPopupProps	—	Properties forwarded to the popup element.
headerProps	DialogHeaderProps	—	Properties forwarded to the header element.
contentProps	DialogContentProps	—	Properties forwarded to the content element.
footerProps	DialogFooterProps	—	Properties forwarded to the footer element.
titleProps	DialogTitleProps	—	Properties forwarded to the title element.
descriptionProps	DialogDescriptionProps	—	Properties forwarded to the description element.
closeProps	DialogCloseProps	—	Properties forwarded to the close element.
fullscreenProps	DialogFullscreenProps	—	Properties forwarded to the fullscreen element.
cancelProps	DialogCancelProps	—	Properties forwarded to the cancel element.
confirmProps	DialogConfirmProps	—	Properties forwarded to the confirm element.
modal	ModalityTier	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers. Set to `'trap-focus'` to trap focus while still letting outside pointer events through (non-modal side panels such as `Drawer` in the `'trap-focus'` tier).
dir	Direction	—	The text direction of the dialog
isAlert	boolean	false	Whether the dialog is an alert dialog. An alert dialog is a dialog that interrupts the user's workflow to communicate an important message and requires a response. When set to `true`, the dialog will have `role="alertdialog"` and will require a `DialogTitle` to be provided. This is used for accessibility purposes.
alertType	DialogAlertType	—	The alert type of the dialog, which determines the default icon and styles when the dialog is an alert dialog.
draggable	boolean	false	Whether the dialog can be moved by dragging its header.
fullscreen	boolean	undefined	The controlled fullscreen state of the dialog. Can be bound with `v-model:fullscreen`.
defaultFullscreen	boolean	false	The fullscreen state of the dialog when it is initially rendered. Use when you do not need to control its fullscreen state.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.
update:fullscreen	boolean	Event handler called when the fullscreen state of the dialog changes.
click	PointerEvent	Event handler called when the dialog trigger is activated.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	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.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
close	MouseEvent	Event handler called when the dialog is requested to be closed.
fullscreen	MouseEvent	Event handler called when the fullscreen state of the dialog is requested to be toggled.
confirm	MouseEvent	Event handler called when the dialog is requested to be closed by confirming.
cancel	MouseEvent	Event handler called when the dialog is requested to be canceled.

Slots

Slot Name	Parameters	Description
default	props: DialogCompactBaseSlotProps	Custom content for the default slot.
trigger	DialogCompactBaseSlotProps	Custom content for the trigger slot.
title	DialogCompactBaseSlotProps	Custom content for the title slot.
description	DialogCompactBaseSlotProps	Custom content for the description slot.
close	DialogCompactBaseSlotProps	Custom content for the close slot.
fullscreen	DialogCompactBaseSlotProps	Custom content for the fullscreen slot.
footer	DialogCompactBaseSlotProps	Custom content for the footer slot.
cancel	DialogCompactBaseSlotProps	Custom content for the cancel slot.
confirm	DialogCompactBaseSlotProps	Custom content for the confirm slot.

DialogCompactBase

DialogConfirm

4 Props1 Emits

Props

Prop	Type	Default	Description
type	ButtonType	'button'	The type of the button element. Can be one of 'button', 'submit', or 'reset'.
disabled	boolean	—	Whether the component is disabled.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

Emits

Emit Name	Parameters	Description
confirm	MouseEvent	Event handler called when the dialog is requested to be closed by confirming.

DialogContent

DialogDescription

DialogFooter

DialogFullscreen

4 Props1 Emits

Props

Prop	Type	Default	Description
type	ButtonType	'button'	The type of the button element. Can be one of 'button', 'submit', or 'reset'.
disabled	boolean	—	Whether the component is disabled.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

Emits

Emit Name	Parameters	Description
fullscreen	MouseEvent	Event handler called when the fullscreen state of the dialog is requested to be toggled.

DialogFullscreenState

1 Emits

Emits

Emit Name	Parameters	Description
update:fullscreen	boolean	Event handler called when the fullscreen state of the dialog changes.

DialogHeader

DialogOverlay

1 Props

Props

Prop	Type	Default	Description
forceMount	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

DialogPopup

3 Props6 Emits

Props

Prop	Type	Default	Description
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`
forceMount	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Emits

Emit Name	Parameters	Description
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	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.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.

DialogPortal

DialogProvider

DialogRoot

9 Props1 Emits

Props

Prop	Type	Default	Description
modal	ModalityTier	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers. Set to `'trap-focus'` to trap focus while still letting outside pointer events through (non-modal side panels such as `Drawer` in the `'trap-focus'` tier).
dir	Direction	—	The text direction of the dialog
isAlert	boolean	false	Whether the dialog is an alert dialog. An alert dialog is a dialog that interrupts the user's workflow to communicate an important message and requires a response. When set to `true`, the dialog will have `role="alertdialog"` and will require a `DialogTitle` to be provided. This is used for accessibility purposes.
alertType	DialogAlertType	—	The alert type of the dialog, which determines the default icon and styles when the dialog is an alert dialog.
draggable	boolean	false	Whether the dialog can be moved by dragging its header.
fullscreen	boolean	undefined	The controlled fullscreen state of the dialog. Can be bound with `v-model:fullscreen`.
defaultFullscreen	boolean	false	The fullscreen state of the dialog when it is initially rendered. Use when you do not need to control its fullscreen state.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.

DialogTitle

DialogTrigger

4 Props1 Emits

Props

Prop	Type	Default	Description
type	ButtonType	'button'	The type of the button element. Can be one of 'button', 'submit', or 'reset'.
disabled	boolean	—	Whether the component is disabled.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

Emits

Emit Name	Parameters	Description
click	PointerEvent	Event handler called when the dialog trigger is activated.

Notes

Architecture and benchmark differences

DialogCompact owns the overlay/popup/header/content/footer composition and the imperative dialog(...) state flow while every primitive stays style-free and only the UI wrapper injects the dialogVariants classes. This mirrors radix-ui/shadcn-ui’s headless/styled split. Ant Design, Element Plus, Mantine and Naive UI ship a single styled dialog with mask/closable/keyboard/width props; VeanUI additionally exposes a per-slot *Props channel, a size scale, and an imperative provider API (dialog.*) that the single-package libraries fold into a static service.

Capability	VeanUI	shadcn/ui	Ant Design Modal	Element Plus Dialog	Mantine Modal	Naive UI Dialog
Aria/styled split	✅	✅	—	—	—	—
Imperative API	✅	—	✅	✅	✅	✅
Modal (aria-modal + trap)	✅	✅	✅	✅	✅	✅
Alert mode (alertdialog)	✅	✅	✅	—	—	✅
Focus return on close	✅	✅	✅	✅	✅	✅
Sizes (6)	✅	—	—	—	—	—
Localized cancel/confirm text	✅	—	—	—	—	—
Pure (no header/footer)	✅	—	—	—	—	—

— = unsupported or a different interaction model.

Cautions

DialogCompact defaults to modal (true); the portal teleports the popup to document.body and the body scroll is managed by the hide-others layer.
showConfirm defaults to true when the dialog is an alert; showCancel defaults to 'onlyWarning' (cancel appears only for alertType="warning"). Pass an explicit boolean to override.
cancelText/confirmText default to the localized dialog.cancel/dialog.confirm messages; override per instance.
isAlert requires a DialogTitle for accessibility (role="alertdialog" must be labelled). Set title or the title slot.
pure removes the header and footer, so title/description are no longer rendered — provide your own accessible label in that mode.
The imperative dialog(...) API needs SDialogProvider mounted; calling it without the provider is a no-op.

FAQ

How do I control the open state?

Bind open with v-model, or pass defaultOpen for an uncontrolled dialog:

<SDialog v-model:open="open" title="Preferences">...</SDialog>

How do I show an alert-style dialog?

Set is-alert with an alert-type. The popup gets role="alertdialog" and the matching type icon:

<SDialog is-alert alert-type="warning" title="Delete" description="This cannot be undone.">
  <template #trigger><SButton>Delete</SButton></template>
</SDialog>

How do I use the imperative API?

Mount SDialogProvider once, then call dialog.* from anywhere (see the Overview section for a full example):

import { dialog } from '@vean/ui';
dialog.warning('Disk full', { description: 'Free up space.' });

How do I build a fully custom dialog?

Use pure and fill the default slot:

<SDialog v-model:open="open" pure>
  <div class="custom">...</div>
</SDialog>

How do I make a non-modal dialog?

Set modal={false} to allow interacting with content outside the dialog:

<SDialog v-model:open="open" :modal="false" title="Palette">...</SDialog>

How do I make a draggable dialog?

Set draggable and drag the header to move the dialog. The position is kept until the dialog is closed:

<SDialog draggable title="Panel">
  <template #trigger><SButton>Open</SButton></template>
  <div>Drag the header to move this dialog.</div>
</SDialog>

How do I use the fullscreen mode?

Toggle it with the header button (showFullscreen, hidden by default — pass show-fullscreen to opt in) or drive it with v-model:fullscreen:

<SDialog v-model:fullscreen="fullscreen" title="Panel">...</SDialog>

Changelog

Version history is grouped by release so you can quickly see what changed for this component across published versions.

v0.40.0

2026-09-14

Compare release

Fix

label the icon-only close trigger via locale

Scope: dialogAuthors: soybeanfeView commitabe07

Fix

restore fullscreen toggle visible by default

Scope: dialogAuthors: soybeanfeView commit600a0

Fix

hide fullscreen toggle by default

Scope: dialogAuthors: soybeanfeView commit3ae1c

Refactor

remove redundant showFullscreen default

Scope: dialogAuthors: soybeanfeView commit956d7

Fix

label the icon-only close trigger via locale

Scope: dialogAuthors: soybeanfeView commitabe07

v0.30.0

2026-08-20

Compare release

Feature

add fullscreen and draggable features

Scope: dialogAuthors: soybeanjsView commitfac2c

Feature

add fullscreen and draggable features

Scope: dialogAuthors: soybeanjsView commitfac2c

v0.22.3

2026-05-17

Compare release

Fix

adjust popup max height for better responsiveness

Scope: dialogAuthors: soybeanfeView commit9e115

v0.17.0

2026-05-03

Compare release

Optimization

rename DialogRootProps to extend DialogBaseProps for consistency

Scope: dialogAuthors: soybeanjsView commit7b052

v0.15.0

2026-04-26

Compare release

Breaking

Implement DialogCompact and refactor `useDialog`

Scope: dialogAuthors: soybeanjsView commit39019

Feature

enable showConfirm prop in DialogCompact component

Scope: dialogAuthors: soybeanfeView commite8a13

Optimization

enhance slot props binding for DialogCompact component

Scope: dialogAuthors: soybeanfeView commita3c2d

Breaking

Implement DialogCompact and refactor `useDialog`

Scope: dialogAuthors: soybeanjsView commit39019

Feature

enable showConfirm prop in DialogCompact component

Scope: dialogAuthors: soybeanfeView commite8a13

Optimization

enhance slot props binding for DialogCompact component

Scope: dialogAuthors: soybeanfeView commita3c2d

v0.13.8

2026-03-24

Compare release

Fix

update content styles for responsive design

Scope: dialogAuthors: soybeanjsView commit77fa2

v0.12.1

2026-03-07

Compare release

Optimization

update dialog content styles to use w-max for better responsiveness

Scope: dialogAuthors: soybeanjsView commiteb13c

v0.11.4

2026-03-06

Compare release

Feature

add min-width constraints to dialog content sizes

Scope: dialogAuthors: soybeanjsView commit9a5e1

v0.11.3

2026-03-06

Compare release

Feature

update max-width for dialog size variants

Scope: dialogAuthors: soybeanjsView commit417a0

v0.11.2

2026-03-06

Compare release

Feature

add class prop to bind content class

Scope: dialogAuthors: soybeanjsView commit1e779

v0.10.3

2026-03-06

Compare release

Fix

remove unnecessary sm: prefix from rounded-lg class

Scope: dialogAuthors: soybeanjsView commit30fd6

v0.0.8

2026-01-01

Compare release

Refactor

replace DialogContent with DialogPopup, and update related types and context management for improved structure and functionality

Scope: dialogAuthors: soybeanjsView commit4d82e

Refactor

rename DialogPopup to DialogContent

Scope: dialogAuthors: soybeanjsView commite0796

v0.0.2

2025-11-18

Compare release

Feature

implement dialog component with context management and accessibility features

Scope: dialogAuthors: soybeanjsView commitadfcc

Feature

introduce DialogContentImpl component for improved focus management and dismissable layer functionality

Scope: dialogAuthors: soybeanjsView commit8861f

Feature

integrate useHideOthers composable for improved accessibility and focus management

Scope: dialogAuthors: soybeanjsView commit1139a

Feature

add dialog example component showcasing usage of DialogRoot, DialogTrigger, and related elements

Scope: dialogAuthors: soybeanjsView commite08d4

Feature

expose closeModal function in dialog slot for improved control

Scope: dialogAuthors: soybeanjsView commit2f005

Feature

introduce DialogThemeContext for theming support and add DialogHeader and DialogFooter components

Scope: dialogAuthors: soybeanjsView commitf2b65

Feature

add Dialog component and related context, close, and types for enhanced dialog functionality

Scope: dialogAuthors: soybeanjsView commit8378a

Feature

add multiple dialog examples with default, footer, state control, and prevent close functionality

Scope: dialogAuthors: soybeanjsView commit9bdd9

Feature

add SDialogPure component with customizable properties and variants

Scope: dialogAuthors: soybeanjsView commit5ff73

Feature

add beforeClose prop to DialogClose component to control closing behavior

Scope: dialogAuthors: soybeanjsView commit35bd1

Feature

update beforeClose prop to allow returning void in Dialog and AlertDialog components

Scope: dialogAuthors: soybeanjsView commitf295b

Feature

implement useDialog composable and integrate DialogProvider for enhanced dialog management

Scope: dialogAuthors: soybeanjsView commit2041c

Fix

adjust closeIcon positioning and add outline-none to dialog content for improved accessibility and visual consistency

Scope: dialogAuthors: soybeanjsView commit40fc9

Fix

remove unused theme context and update DialogClose class binding

Scope: dialogAuthors: soybeanjsView commitbe3ae

Optimization

update DialogClose component to use theme context and rename closeIcon to closable

Scope: dialogAuthors: soybeanjsView commit82210

Refactor

update dialog component to use v-bind for dismissable layer and focus scope props

Scope: dialogAuthors: soybeanjsView commitceba2

Refactor

replace closeModal with onOpenChange for improved dialog state management

Scope: dialogAuthors: soybeanjsView commit430be

Refactor

simplify dialog component structure by removing unused imports and enhancing focus management

Scope: dialogAuthors: soybeanjsView commit5072c

Refactor

streamline dialog component structure by updating prop bindings and consolidating context imports

Scope: dialogAuthors: soybeanjsView commita4447

Refactor

restructure dialog context and provider, removing legacy code and enhancing dialog management

Scope: dialogAuthors: soybeanjsView commitde4f2

Feature

add beforeClose prop to DialogClose component to control closing behavior

Scope: dialogAuthors: soybeanjsView commit35bd1

Feature

update beforeClose prop to allow returning void in Dialog and AlertDialog components

Scope: dialogAuthors: soybeanjsView commitf295b

Feature

implement useDialog composable and integrate DialogProvider for enhanced dialog management

Scope: dialogAuthors: soybeanjsView commit2041c

Refactor

restructure dialog context and provider, removing legacy code and enhancing dialog management

Scope: dialogAuthors: soybeanjsView commitde4f2

Feature

implement dialog component with context management and accessibility features

Scope: dialogAuthors: soybeanjsView commitadfcc

Feature

introduce DialogContentImpl component for improved focus management and dismissable layer functionality

Scope: dialogAuthors: soybeanjsView commit8861f

Feature

integrate useHideOthers composable for improved accessibility and focus management

Scope: dialogAuthors: soybeanjsView commit1139a

Feature

add dialog example component showcasing usage of DialogRoot, DialogTrigger, and related elements

Scope: dialogAuthors: soybeanjsView commite08d4

Feature

expose closeModal function in dialog slot for improved control

Scope: dialogAuthors: soybeanjsView commit2f005

Feature

introduce DialogThemeContext for theming support and add DialogHeader and DialogFooter components

Scope: dialogAuthors: soybeanjsView commitf2b65

Feature

add Dialog component and related context, close, and types for enhanced dialog functionality

Scope: dialogAuthors: soybeanjsView commit8378a

Feature

add multiple dialog examples with default, footer, state control, and prevent close functionality

Scope: dialogAuthors: soybeanjsView commit9bdd9

Feature

add SDialogPure component with customizable properties and variants

Scope: dialogAuthors: soybeanjsView commit5ff73

Fix

adjust closeIcon positioning and add outline-none to dialog content for improved accessibility and visual consistency

Scope: dialogAuthors: soybeanjsView commit40fc9

Fix

remove unused theme context and update DialogClose class binding

Scope: dialogAuthors: soybeanjsView commitbe3ae

Optimization

update DialogClose component to use theme context and rename closeIcon to closable

Scope: dialogAuthors: soybeanjsView commit82210

Refactor

update dialog component to use v-bind for dismissable layer and focus scope props

Scope: dialogAuthors: soybeanjsView commitceba2

Refactor

replace closeModal with onOpenChange for improved dialog state management

Scope: dialogAuthors: soybeanjsView commit430be

Refactor

simplify dialog component structure by removing unused imports and enhancing focus management

Scope: dialogAuthors: soybeanjsView commit5072c

Refactor

streamline dialog component structure by updating prop bindings and consolidating context imports

Scope: dialogAuthors: soybeanjsView commita4447