Dialog

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

Variants

Different dialog types for different use cases.

html 
<!-- Trigger -->
<button onclick="openDialog('myDialog')">Open Dialog</button>

<!-- Dialog -->
<div id="myDialog" class="uc-dialog-overlay" role="dialog" aria-modal="true" aria-hidden="true">
  <div class="uc-dialog">
    <div class="uc-p-6">
      <h3 class="uc-text-lg uc-font-semibold">Dialog Title</h3>
      <p class="uc-text-sm uc-text-fg-disabled uc-mt-1.5">Description text.</p>
    </div>
    <div class="uc-flex uc-justify-end uc-gap-2 uc-p-6 uc-pt-0">
      <button onclick="closeDialog('myDialog')">Cancel</button>
      <button onclick="closeDialog('myDialog')">Confirm</button>
    </div>
  </div>
</div>

Static Preview

Dialog content rendered inline.

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

Confirm: Destructive

Confirmation for irreversible actions like deleting data.

Delete item?

This action is permanent and cannot be undone. All associated data will be lost.

Confirm: Warning

Confirmation for potentially risky but reversible actions.

Unsaved changes

You have unsaved changes. Are you sure you want to leave? Your changes will be lost.

Confirm: Info

Standard confirmation for non-destructive actions.

Publish article?

This will make the article visible to everyone. You can unpublish it later.

Confirm: Centered

Centered confirmation dialog with icon.

Revoke access?

This user will immediately lose access to all shared resources.

Confirm: With Input

Requires typing to confirm the action.

Delete repository

This will permanently delete my-project and all of its data.

Anatomy

HTML structure of the Dialog component.

div.uc-dialog-overlay              ← Full-screen backdrop
└── div.uc-dialog                    ← Dialog panel
    ├── div.uc-p-6                   ← Header area
    │   ├── h3                       ← Title
    │   └── p                        ← Description
    ├── div.uc-p-6.uc-pt-0           ← Body content (optional)
    └── div.uc-flex.uc-justify-end   ← Footer with action buttons

API Reference

All CSS classes available for the Dialog component.

Class Type Description
uc-dialog-overlay Base Full-screen backdrop with centered layout
uc-dialog Base Dialog panel — rounded card with max-width
uc-open State Added to overlay to show the dialog

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use dialog element or role="dialog" with aria-modal="true"
Label Dialog must have aria-labelledby pointing to the title element
Focus trap Focus is trapped inside the dialog while open, restored on close
Keyboard Escape closes the dialog, Tab cycles through focusable elements
Close Close button should have aria-label="Close dialog"