Dialog

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

Examples

Default

A basic dialog with title, description, and a close button.

Edit Profile Edit profile Make changes to your profile here. Click save when you're done.
Name
Username
Cancel Save changes 
<c-dialog>
  <c-dialog-trigger>
    <c-button variant="outline">Edit Profile</c-button>
  </c-dialog-trigger>
  <c-dialog-content>
    <c-dialog-header>
      <c-dialog-title>Edit profile</c-dialog-title>
      <c-dialog-description>
        Make changes to your profile here. Click save when you're done.
      </c-dialog-description>
    </c-dialog-header>
    <div class="grid gap-4">
      <div class="grid gap-3">
        <c-label label-classes="text-right">Name</c-label>
        <c-input value="Pedro Duarte"></c-input>
      </div>
      <div class="grid gap-3">
        <c-label label-classes="text-right">Username</c-label>
        <c-input value="@peduarte"></c-input>
      </div>
    </div>
    <c-dialog-footer>
      <c-dialog-close>
        <c-button type="submit">Save changes</c-button>
      </c-dialog-close>
    </c-dialog-footer>
  </c-dialog-content>
</c-dialog>

Custom Close Button

A dialog with a custom close button in the footer.

Share Share link Anyone with the link will be able to view this.
Close 
<c-dialog>
  <c-dialog-trigger>
    <c-button variant="outline">Share</c-button>
  </c-dialog-trigger>
  <c-dialog-content show-close-button="false">
    <c-dialog-header>
      <c-dialog-title>Share link</c-dialog-title>
      <c-dialog-description>
        Anyone with the link will be able to view this.
      </c-dialog-description>
    </c-dialog-header>
    <div class="flex items-center space-x-2 py-4">
      <c-input
        class="w-full"
        input-classes="flex-1"
        value="https://example.com/link/to/document"
        readonly
      ></c-input>
    </div>
    <c-dialog-footer dialog-footer-classes="sm:justify-start">
      <c-dialog-close>
        <c-button variant="secondary">Close</c-button>
      </c-dialog-close>
      <c-button>Copy Link</c-button>
    </c-dialog-footer>
  </c-dialog-content>
</c-dialog>

API Reference

c-dialog

The root component that manages open/close state.

Prop Type Default Description
open boolean false Controls the open state of the dialog.
dialog-classes string "" Additional CSS classes for the dialog root.

c-dialog-trigger

A wrapper that opens the dialog when clicked.

Prop Type Default Description
dialog-trigger-classes string "" Additional CSS classes for the trigger wrapper.

c-dialog-content

The modal panel that is displayed when the dialog is open. Includes the overlay and optional close button.

Prop Type Default Description
dialog-content-classes string "" Additional CSS classes for the dialog content panel.
show-close-button boolean true Whether to show the built-in X close button in the top-right corner.

c-dialog-header

Layout wrapper for the title and description at the top of the dialog.

Prop Type Default Description
dialog-header-classes string "" Additional CSS classes for the header.

Layout wrapper for action buttons at the bottom of the dialog.

Prop Type Default Description
dialog-footer-classes string "" Additional CSS classes for the footer.

c-dialog-title

The accessible title of the dialog.

Prop Type Default Description
dialog-title-classes string "" Additional CSS classes for the title.

c-dialog-description

The accessible description of the dialog.

Prop Type Default Description
dialog-description-classes string "" Additional CSS classes for the description.

c-dialog-close

A wrapper that closes the dialog when its content is clicked.

Prop Type Default Description
dialog-close-classes string "" Additional CSS classes for the close wrapper.

Keyboard Navigation

Key Description
Escape Closes the dialog.
Tab Moves focus to the next focusable element within the dialog.
Shift + Tab Moves focus to the previous focusable element within the dialog.