Dialog

A popup that opens on top of the entire page.

<ui:dialog.root>
    <ui:dialog.trigger asChild="{true}">
        <ui:button>Open Dialog</ui:button>
    </ui:dialog.trigger>
    <ui:dialog.content>
        <ui:dialog.header>
            <ui:dialog.title>Dialog Title</ui:dialog.title>
            <ui:dialog.description>This is a simple dialog example.</ui:dialog.description>
        </ui:dialog.header>
        <ui:dialog.footer>
            <ui:dialog.close asChild="{true}">
                <ui:button>Close</ui:button>
            </ui:dialog.close>
        </ui:dialog.footer>
    </ui:dialog.content>
</ui:dialog.root>

import { mount } from 'fluid-primitives';
import { Dialog } from 'fluid-primitives/dialog';

mount('dialog', ({ props }) => {
	const dialog = new Dialog(props);
	dialog.init();
	return dialog;
});

Features

Focus is trapped within the dialog and restored when closed
Supports modal and non-modal modes
Scrolling is blocked when dialog is open (in modal mode)
Pressing Escape closes the dialog
Supports controlled and uncontrolled open state

Installation

typo3 ui:add dialog

Read more about installing Components and Primitives.

Examples

Alert Dialog

For critical confirmations or destructive actions, use role="alertdialog". Alert dialogs differ from regular dialogs in important ways:

Automatic focus: The close/cancel button receives focus when opened, prioritizing the safest action
Requires explicit dismissal: Cannot be closed by clicking outside, only via button clicks or Escape key

<ui:dialog.root role="alertdialog">
    <ui:dialog.trigger asChild="{true}">
        <ui:button>Delete Item</ui:button>
    </ui:dialog.trigger>
    <ui:dialog.content>
        <ui:dialog.header>
            <ui:dialog.title>Are you sure?</ui:dialog.title>
            <ui:dialog.description>This action cannot be undone. This will permanently delete your item.</ui:dialog.description>
        </ui:dialog.header>
        <ui:dialog.footer>
            <ui:dialog.close asChild="{true}">
                <ui:button variant="secondary">Cancel</ui:button>
            </ui:dialog.close>
            <ui:button>Delete</ui:button>
        </ui:dialog.footer>
    </ui:dialog.content>
</ui:dialog.root>

Prevent Close on Outside Click

Keep the dialog open when clicking outside.

<ui:dialog.root closeOnInteractOutside="{false}">
    <ui:dialog.trigger asChild="{true}">
        <ui:button>Open Dialog</ui:button>
    </ui:dialog.trigger>
    <ui:dialog.content>
        <ui:dialog.header>
            <ui:dialog.title>Persistent Dialog</ui:dialog.title>
            <ui:dialog.description>Click outside won't close this dialog.</ui:dialog.description>
        </ui:dialog.header>
        <ui:dialog.footer>
            <ui:dialog.close asChild="{true}">
                <ui:button>Close</ui:button>
            </ui:dialog.close>
        </ui:dialog.footer>
    </ui:dialog.content>
</ui:dialog.root>

Prevent Close on Escape

Disable closing the dialog with the Escape key.

<ui:dialog.root closeOnEscape="{false}">
    <ui:dialog.trigger asChild="{true}">
        <ui:button>Open Dialog</ui:button>
    </ui:dialog.trigger>
    <ui:dialog.content>
        <ui:dialog.header>
            <ui:dialog.title>No Escape</ui:dialog.title>
            <ui:dialog.description>Pressing Escape won't close this dialog.</ui:dialog.description>
        </ui:dialog.header>
        <ui:dialog.footer>
            <ui:dialog.close asChild="{true}">
                <ui:button>Close</ui:button>
            </ui:dialog.close>
        </ui:dialog.footer>
    </ui:dialog.content>
</ui:dialog.root>

Anatomy

<primitives:dialog.root>
    <primitives:dialog.trigger />
    <primitives:dialog.backdrop />
    <primitives:dialog.positioner>
        <primitives:dialog.content>
            <primitives:dialog.title />
            <primitives:dialog.description />
        </primitives:dialog.content>
    </primitives:dialog.positioner>
</primitives:dialog.root>