Skip to main content
Fluid Primitives

Dialog

A popup that opens on top of the entire page.

View Sourcefor Dialog componentZag.js Docsfor Dialog component
Example.html
<primitives:dialog.root>
    <primitives:dialog.trigger asChild="{true}">
        <ui:button>Open Dialog</ui:button>
    </primitives:dialog.trigger>
    <ui:portal>
        <primitives:dialog.backdrop class="{ui:cn(value: '
            fixed inset-0 bg-black/50 
            transition-all ease-out duration-150 transition-discrete 
            starting:data-[state=open]:opacity-0 starting:data-[state=open]:backdrop-blur-none
            data-[state=closed]:opacity-0 data-[state=closed]:backdrop-blur-none
            data-[state=open]:opacity-100 data-[state=open]:backdrop-blur-xs
        ')}" />
        <primitives:dialog.positioner class="fixed inset-0 grid place-items-center p-6">
            <primitives:dialog.content class="{ui:cn(value: '
                bg-popover text-popover-foreground rounded-lg shadow-lg w-full max-w-md border p-4
                transition-all ease-out duration-175 transition-discrete 
                starting:data-[state=open]:opacity-0 starting:data-[state=open]:scale-90 starting:data-[state=open]:blur-[4px]
                data-[state=closed]:opacity-0 data-[state=closed]:scale-90 data-[state=closed]:blur-[4px]
                data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=open]:blur-0
            ')}">
                <div class="space-y-2 text-center sm:text-left">
                    <primitives:dialog.closeTrigger class="float-end size-4 -translate-y-0.5 translate-x-0.25 grid leading-none place-items-center ring-offset-background focus-visible:ring-ring rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-hidden">
                        <span class="sr-only">Close</span>
                        <span aria-hidden="true">✕</span>
                    </primitives:dialog.closeTrigger>
                    <primitives:dialog.title class="text-lg leading-none font-semibold">
                        Dialog Title
                    </primitives:dialog.title>
                    <primitives:dialog.description class="text-muted-foreground text-sm">
                        This is a simple dialog example.
                    </primitives:dialog.description>
                    <div class="flex justify-end gap-2">
                        <primitives:dialog.closeTrigger asChild="{true}">
                            <ui:button>Close</ui:button>
                        </primitives:dialog.closeTrigger>
                    </div>
                </div>
            </primitives:dialog.content>
        </primitives:dialog.positioner>
    </ui:portal>
</primitives:dialog.root>

<vite:asset entry="EXT:fluid_primitives/Resources/Public/JavaScript/dist/dialog.entry.js" />

Installation

typo3 ui:add dialog

Read more about installing Components and Primitives.

Usage

<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 dialog description.</ui:dialog.description>
        </ui:dialog.header>
        <p>Dialog content goes here.</p>
        <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>