Getting Started

Installation Configuration

Components

Alert Badge Button Card Dialog Dropdown Icon Menu Table Tile Toggle Tooltip Typography

Dialogs

Pop! ...goes the dialog. Or is it a modal? In our case, it's technically a "modal dialog". They're overlay windows that appear on top of the main content, requiring user interaction before returning to the main page.

Using Dialogs

Use the <ui:dialog> tag to create a dialog. In their simplest form, they require a trigger slot and content in the main slot. Here's a basic example:

Basic Dialog
Copied!
 
1<ui:dialog>
2    <x-slot:trigger>
3        <ui:button>Modal, or Dialog? Who knows.</ui:button>
4    </x-slot:trigger>
5 
6    <p class="min-h-[200px] text-center mt-20">All my happy little content mistakes end up here.</p>
7</ui:dialog>
1<ui:dialog>
2    <x-slot:trigger>
3        <ui:button>Modal, or Dialog? Who knows.</ui:button>
4    </x-slot:trigger>
5 
6    <p class="min-h-[200px] text-center mt-20">All my happy little content mistakes end up here.</p>
7</ui:dialog>

Properties

Property Type Default Description
size string 'md' Controls the maximum width of the dialog.
hideCloseButton boolean false Hides the default close button in the top-right corner.
cardClass string|null null Additional CSS classes to apply to the dialog card.
containerClass string|null null Additional CSS classes to apply to the dialog container.

size

Controls the maximum width of the dialog. Available options are 'xs', 'sm', 'md', 'lg', 'xl', and 'full'.

1<ui:dialog size="lg">
2    <!-- Dialog content -->
3</ui:dialog>
1<ui:dialog size="lg">
2    <!-- Dialog content -->
3</ui:dialog>
Copied!

hideCloseButton

Hides the default close button in the top-right corner of the dialog.

1<ui:dialog :hideCloseButton="true">
2    <!-- Dialog content -->
3</ui:dialog>
1<ui:dialog :hideCloseButton="true">
2    <!-- Dialog content -->
3</ui:dialog>
Copied!

cardClass

Additional CSS classes to apply to the dialog card.

1<ui:dialog cardClass="bg-gray-100">
2    <!-- Dialog content -->
3</ui:dialog>
1<ui:dialog cardClass="bg-gray-100">
2    <!-- Dialog content -->
3</ui:dialog>
Copied!

containerClass

Additional CSS classes to apply to the dialog container.

1<ui:dialog containerClass="bg-opacity-75">
2    <!-- Dialog content -->
3</ui:dialog>
1<ui:dialog containerClass="bg-opacity-75">
2    <!-- Dialog content -->
3</ui:dialog>
Copied!

Slots

trigger

Use <x-slot:trigger> to define the element that opens the dialog when clicked.

1<x-slot:trigger>
2    <ui:button>Open Dialog</ui:button>
3</x-slot:trigger>
1<x-slot:trigger>
2    <ui:button>Open Dialog</ui:button>
3</x-slot:trigger>
Copied!

header

Custom header content for the dialog. If not provided, a default close button will be shown (unless hideCloseButton is set to true).

1<x-slot:header>
2    <ui:heading>Custom Header</ui:heading>
3</x-slot:header>
1<x-slot:header>
2    <ui:heading>Custom Header</ui:heading>
3</x-slot:header>
Copied!
Dialog with Header
Copied!
 
 1<ui:dialog>
 2    <x-slot:trigger>
 3        <ui:button>Example - Header slot</ui:button>
 4    </x-slot:trigger>
 5 
 6    <x-slot:header>
 7        <ui:heading>There are no mistakes</ui:heading>
 8    </x-slot:header>
 9 
10    <p class="min-h-[200px] text-center mt-20">We'll play with clouds today.</p>
11</ui:dialog>
 1<ui:dialog>
 2    <x-slot:trigger>
 3        <ui:button>Example - Header slot</ui:button>
 4    </x-slot:trigger>
 5 
 6    <x-slot:header>
 7        <ui:heading>There are no mistakes</ui:heading>
 8    </x-slot:header>
 9 
10    <p class="min-h-[200px] text-center mt-20">We'll play with clouds today.</p>
11</ui:dialog>

default

The main content of the dialog.

1<ui:dialog>
2    <!-- ... -->
3    <p>This is the main content of the dialog.</p>
4</ui:dialog>
1<ui:dialog>
2    <!-- ... -->
3    <p>This is the main content of the dialog.</p>
4</ui:dialog>
Copied!

footer

Optional footer content for the dialog.

1<x-slot:footer>
2    <ui:button x-on:click="closeDialog">Close</ui:button>
3    <ui:button color="primary">Save</ui:button>
4</x-slot:footer>
1<x-slot:footer>
2    <ui:button x-on:click="closeDialog">Close</ui:button>
3    <ui:button color="primary">Save</ui:button>
4</x-slot:footer>
Copied!
Dialog with Header
Copied!
 
 1<ui:dialog>
 2    <x-slot:trigger>
 3        <ui:button>Example - Footer slot</ui:button>
 4    </x-slot:trigger>
 5 
 6    <p class="min-h-[200px] text-center mt-20">We'll play with clouds today.</p>
 7 
 8    <x-slot:footer>
 9        I'm a footer, put buttons in me!
10    </x-slot:footer>
11</ui:dialog>
 1<ui:dialog>
 2    <x-slot:trigger>
 3        <ui:button>Example - Footer slot</ui:button>
 4    </x-slot:trigger>
 5 
 6    <p class="min-h-[200px] text-center mt-20">We'll play with clouds today.</p>
 7 
 8    <x-slot:footer>
 9        I'm a footer, put buttons in me!
10    </x-slot:footer>
11</ui:dialog>

Accessibility

Dialog components include many accessibility considerations. Here are some key features:

  • Traps focus within the dialog when open, returns it when it closes
  • Automatically sets ARIA label and description when ui:heading and ui:subheading components present
  • Includes the role and other modal-related aria attributes by default
  • Implements a mobile-friendly drag-to-close feature

JavaScript Interaction

The dialog uses Alpine.js for its functionality. You can interact with the dialog programmatically using the following methods:

  • openDialog(): Opens the dialog
  • closeDialog(): Closes the dialog

Example:

1<ui:dialog x-ref="myDialog">
2    <!-- Dialog content -->
3</ui:dialog>
4 
5<ui:button x-on:click="$refs.myDialog.openDialog()">Open Dialog</ui:button>
1<ui:dialog x-ref="myDialog">
2    <!-- Dialog content -->
3</ui:dialog>
4 
5<ui:button x-on:click="$refs.myDialog.openDialog()">Open Dialog</ui:button>
Copied!
Like this project? Stop by the bear cave to stargaze.