dialog/introduction

A hassle-free dialog: modal mode, AlertDialog, ... all in one component.

Quick Demo

Quick Start

Here's how the component is structured:

<Dialog>
  <DialogHeading>
    <DialogTitle/>
    <DialogSubtitle/>
  </DialogHeading>

  {/* some content */}

  <DialogAction/>
</Dialog>

1️⃣ <Dialog/>

Our <dialog> is built on top of these 3 core components from HeadlessUI:

DialogBackdrop
DialogPanel
Dialog

All 3 are always included. You can style the dialog content (DialogPanel) with Tailwind, and all props go to Dialog. Here's how to remove the overlay:

2️⃣ Dialog vs. Modal vs. Alert Dialog

Most libraries don't explain these differences well, but it's super important to know before you code.

Both Modal and Alert Dialog block user interaction until they make a choice. Here's how they differ:

Alert Dialog is super strict - no ESC key, no outside clicks, and no 'X' button in the corner. 0 implicit dismissal.
Modal is more chill - usually has an 'X' button since it's seen as a semi-explicit action.

Thanks to Alert Dialog's strict nature, we can simplify dialogs into just 2 types: Alert or not. Try the dismissal tricks in these demos:

3️⃣ <DialogHeading/>

Works just like the Heading component, but it's rebuilt for dialogs. It auto-adds all the right ARIA attributes (check any demo's DevTools to see them in action).

4️⃣ <DialogAction/>

Since dialogs often need buttons that stack differently on mobile/desktop for better UX, we made DialogAction to handle this. Try resizing any demo to see it in action!

Want more examples? Check out the API docs.