XV
UI

Dialog

Modal dialogs for confirmations, forms, and focused content.

Trigger Slot

Open Dialog

This dialog was opened via the trigger slot. Press Esc or click the backdrop to close.

Cancel Got it

Destructive Confirmation

Delete

This action cannot be undone. The item will be permanently removed from your account and all associated data will be lost.

Cancel Yes, delete

Sizes

Small

A compact dialog for brief messages or quick confirmations.

Close
Medium

The default size, suitable for most dialogs with a moderate amount of content and a couple of action buttons.

Cancel Confirm
Large

A wider dialog for richer content, forms, or longer explanations that benefit from more horizontal space.

Cancel Save changes

Custom Header

Custom Header
Heads up

The header slot replaces the built-in title. Use it for custom layouts — icons, badges, or multi-line headings.

Understood

No Backdrop Close

Open Sticky

This dialog will not close when clicking the backdrop — only via the × button, Esc, or an explicit action below.

Dismiss

Draggable

Header drag

Drag the header area to reposition this dialog anywhere on screen. The grip icon on the left indicates the drag handle.

Done
Panel drag

The entire panel surface is the drag handle — click and drag anywhere on this dialog to move it.

Done