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.
Version history is grouped by release so you can quickly see what changed for this component across published versions.
2026-09-14
label the icon-only close trigger via locale
restore fullscreen toggle visible by default
hide fullscreen toggle by default
remove redundant showFullscreen default
label the icon-only close trigger via locale
2026-08-20
add fullscreen and draggable features
add fullscreen and draggable features
2026-05-17
adjust popup max height for better responsiveness
2026-05-03
rename DialogRootProps to extend DialogBaseProps for consistency
2026-04-26
Implement DialogCompact and refactor `useDialog`
enable showConfirm prop in DialogCompact component
enhance slot props binding for DialogCompact component
Implement DialogCompact and refactor `useDialog`
enable showConfirm prop in DialogCompact component
enhance slot props binding for DialogCompact component
2026-03-24
update content styles for responsive design
2026-03-07
update dialog content styles to use w-max for better responsiveness
2026-03-06
add min-width constraints to dialog content sizes
2026-03-06
update max-width for dialog size variants
2026-03-06
add class prop to bind content class
2026-03-06
remove unnecessary sm: prefix from rounded-lg class
2026-01-01
replace DialogContent with DialogPopup, and update related types and context management for improved structure and functionality
rename DialogPopup to DialogContent
2025-11-18
implement dialog component with context management and accessibility features
introduce DialogContentImpl component for improved focus management and dismissable layer functionality
integrate useHideOthers composable for improved accessibility and focus management
add dialog example component showcasing usage of DialogRoot, DialogTrigger, and related elements
expose closeModal function in dialog slot for improved control
introduce DialogThemeContext for theming support and add DialogHeader and DialogFooter components
add Dialog component and related context, close, and types for enhanced dialog functionality
add multiple dialog examples with default, footer, state control, and prevent close functionality
add SDialogPure component with customizable properties and variants
add beforeClose prop to DialogClose component to control closing behavior
update beforeClose prop to allow returning void in Dialog and AlertDialog components
implement useDialog composable and integrate DialogProvider for enhanced dialog management
adjust closeIcon positioning and add outline-none to dialog content for improved accessibility and visual consistency
remove unused theme context and update DialogClose class binding
update DialogClose component to use theme context and rename closeIcon to closable
update dialog component to use v-bind for dismissable layer and focus scope props
replace closeModal with onOpenChange for improved dialog state management
simplify dialog component structure by removing unused imports and enhancing focus management
streamline dialog component structure by updating prop bindings and consolidating context imports
restructure dialog context and provider, removing legacy code and enhancing dialog management
add beforeClose prop to DialogClose component to control closing behavior
update beforeClose prop to allow returning void in Dialog and AlertDialog components
implement useDialog composable and integrate DialogProvider for enhanced dialog management
restructure dialog context and provider, removing legacy code and enhancing dialog management
implement dialog component with context management and accessibility features
introduce DialogContentImpl component for improved focus management and dismissable layer functionality
integrate useHideOthers composable for improved accessibility and focus management
add dialog example component showcasing usage of DialogRoot, DialogTrigger, and related elements
expose closeModal function in dialog slot for improved control
introduce DialogThemeContext for theming support and add DialogHeader and DialogFooter components
add Dialog component and related context, close, and types for enhanced dialog functionality
add multiple dialog examples with default, footer, state control, and prevent close functionality
add SDialogPure component with customizable properties and variants
adjust closeIcon positioning and add outline-none to dialog content for improved accessibility and visual consistency
remove unused theme context and update DialogClose class binding
update DialogClose component to use theme context and rename closeIcon to closable
update dialog component to use v-bind for dismissable layer and focus scope props
replace closeModal with onOpenChange for improved dialog state management
simplify dialog component structure by removing unused imports and enhancing focus management
streamline dialog component structure by updating prop bindings and consolidating context imports