Dialog

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

Loading... 
<twig:Dialog id="delete_account">
    <twig:Dialog:Trigger>
        <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Open Dialog</twig:Button>
    </twig:Dialog:Trigger>
    <twig:Dialog:Content class="sm:max-w-[425px]">
        <twig:Dialog:Header>
            <twig:Dialog:Title>Edit profile</twig:Dialog:Title>
            <twig:Dialog:Description>
                Make changes to your profile here. Click save when you&apos;re done.
            </twig:Dialog:Description>
        </twig:Dialog:Header>
        <div class="grid gap-4">
            <div class="grid gap-3">
                <twig:Label for="name">Name</twig:Label>
                <twig:Input id="name" name="name" value="Pedro Duarte" />
            </div>
            <div class="grid gap-3">
                <twig:Label for="username">Username</twig:Label>
                <twig:Input id="username" name="username" value="@peduarte" />
            </div>
        </div>
        <twig:Dialog:Footer>
            <twig:Dialog:Close>
                <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
            </twig:Dialog:Close>
            <twig:Button type="submit">Save changes</twig:Button>
        </twig:Dialog:Footer>
    </twig:Dialog:Content>
</twig:Dialog>

Installation

bin/console ux:install dialog --kit shadcn

That's it!

Install the following Composer dependencies:

composer require symfony/ux-icons twig/extra-bundle twig/html-extra:^3.24.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0 symfony/ux-twig-component:^2.35

Copy the following file(s) into your Symfony app:

assets/controllers/dialog_controller.js 
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static targets = ['trigger', 'dialog'];

    static values = {
        open: Boolean,
    };

    connect() {
        if (this.openValue) {
            this.open();
        }
    }

    open() {
        this.dialogTarget.showModal();

        if (this.hasTriggerTarget) {
            if (this.dialogTarget.getAnimations().length > 0) {
                this.dialogTarget.addEventListener('transitionend', () => {
                    this.triggerTarget.setAttribute('aria-expanded', 'true');
                });
            } else {
                this.triggerTarget.setAttribute('aria-expanded', 'true');
            }
        }
    }

    closeOnClickOutside({ target }) {
        if (target === this.dialogTarget) {
            this.close();
        }
    }

    close() {
        this.dialogTarget.close();

        if (this.hasTriggerTarget) {
            if (this.dialogTarget.getAnimations().length > 0) {
                this.dialogTarget.addEventListener('transitionend', () => {
                    this.triggerTarget.setAttribute('aria-expanded', 'false');
                });
            } else {
                this.triggerTarget.setAttribute('aria-expanded', 'false');
            }
        }
    }
}
templates/components/Dialog.html.twig 
{# @prop id string Unique identifier used to generate internal Dialog IDs #}
{# @prop open boolean Whether the dialog is open on initial render. Defaults to `false` #}
{# @block content The dialog structure, typically includes `Dialog:Trigger` and `Dialog:Content` #}
{%- props id, open = false -%}

{%- set _dialog_id = 'dialog-' ~ id -%}
{%- set _dialog_title_id = _dialog_id ~ '-title' -%}
{%- set _dialog_description_id = _dialog_id ~ '-description' -%}
<div {{ attributes.defaults({
    'data-controller': 'dialog',
    'data-dialog-open-value': open,
    'aria-labelledby': _dialog_title_id,
    'aria-describedby': _dialog_description_id,
}) }}>
    {% block content %}{% endblock %}
</div>
templates/components/Dialog/Close.html.twig 
{# @block content The close trigger element (e.g., a `Button`) that closes the dialog when clicked #}
{%- set dialog_close_attrs = {
    'data-action': 'click->dialog#close'|html_attr_type('sst'),
} -%}
{%- block content %}{% endblock -%}
templates/components/Dialog/Content.html.twig 
{# @prop showCloseButton boolean Whether to display the close button in the top-right corner. Defaults to `true` #}
{# @block content The dialog content, typically includes `Dialog:Header` and optionally `Dialog:Footer` #}
{%- props showCloseButton = true -%}

<dialog
    id="{{ _dialog_id }}"
    class="{{ ('text-foreground bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 ' ~ attributes.render('class'))|tailwind_merge }}"
    data-dialog-target="dialog"
    data-action="keydown.esc->dialog#close:prevent click->dialog#closeOnClickOutside"
>
    {%- block content %}{% endblock -%}
    {% if showCloseButton %}
        <button type="button" class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" data-action="click->dialog#close">
            <twig:ux:icon name="lucide:x" />
            <span class="sr-only">Close</span>
        </button>
    {% endif %}
</dialog>
templates/components/Dialog/Description.html.twig 
{# @block content The descriptive text explaining the dialog purpose #}
<p
    id="{{ _dialog_description_id }}"
    class="{{ ('text-muted-foreground text-sm ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes.without('id') }}
>
    {%- block content %}{% endblock -%}
</p>
templates/components/Dialog/Footer.html.twig 
{# @block content The footer area, typically contains action buttons #}
<footer
    class="{{ ('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</footer>
templates/components/Dialog/Header.html.twig 
{# @block content The header area, typically contains `Dialog:Title` and `Dialog:Description` #}
<header
    class="{{ ('flex flex-col gap-2 text-center sm:text-left ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</header>
templates/components/Dialog/Title.html.twig 
{# @block content The title text of the dialog #}
<h2
    id="{{ _dialog_title_id }}"
    class="{{ ('text-lg leading-none font-semibold ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes.without('id') }}
>
    {%- block content %}{% endblock -%}
</h2>
templates/components/Dialog/Trigger.html.twig 
{# @block content The trigger element (e.g., a `Button`) that opens the dialog when clicked #}
{%- set dialog_trigger_attrs = {
    'data-action': 'click->dialog#open'|html_attr_type('sst'),
    'data-dialog-target': 'trigger',
    'aria-haspopup': 'dialog',
} -%}
{%- block content %}{% endblock -%}

Happy coding!

Usage

<twig:Dialog id="delete_account">
    <twig:Dialog:Trigger>
        <twig:Button {{ ...dialog_trigger_attrs }}>Open</twig:Button>
    </twig:Dialog:Trigger>
    <twig:Dialog:Content>
        <twig:Dialog:Header>
            <twig:Dialog:Title>Are you absolutely sure?</twig:Dialog:Title>
            <twig:Dialog:Description>
                This action cannot be undone. This will permanently delete your account
                and remove your data from our servers.
            </twig:Dialog:Description>
        </twig:Dialog:Header>
    </twig:Dialog:Content>
</twig:Dialog>

Examples

Opened by default

Loading... 
<twig:Dialog id="delete_account" open>
    <twig:Dialog:Trigger>
        <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Open Dialog</twig:Button>
    </twig:Dialog:Trigger>
    <twig:Dialog:Content class="sm:max-w-[425px]">
        <twig:Dialog:Header>
            <twig:Dialog:Title>Edit profile</twig:Dialog:Title>
            <twig:Dialog:Description>
                Make changes to your profile here. Click save when you&apos;re done.
            </twig:Dialog:Description>
        </twig:Dialog:Header>
        <div class="grid gap-4">
            <div class="grid gap-3">
                <twig:Label for="name">Name</twig:Label>
                <twig:Input id="name" name="name" value="Pedro Duarte" />
            </div>
            <div class="grid gap-3">
                <twig:Label for="username">Username</twig:Label>
                <twig:Input id="username" name="username" value="@peduarte" />
            </div>
        </div>
        <twig:Dialog:Footer>
            <twig:Dialog:Close>
                <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
            </twig:Dialog:Close>
            <twig:Button type="submit">Save changes</twig:Button>
        </twig:Dialog:Footer>
    </twig:Dialog:Content>
</twig:Dialog>

Custom close button

Loading... 
<twig:Dialog id="share_link">
    <twig:Dialog:Trigger>
        <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Share</twig:Button>
    </twig:Dialog:Trigger>
    <twig:Dialog:Content class="sm:max-w-md">
        <twig:Dialog:Header>
            <twig:Dialog:Title>Share link</twig:Dialog:Title>
            <twig:Dialog:Description>
                Anyone who has this link will be able to view this.
            </twig:Dialog:Description>
        </twig:Dialog:Header>
        <div class="flex items-center gap-2">
            <div class="grid flex-1 gap-2">
                <twig:Label for="link" class="sr-only">Link</twig:Label>
                <twig:Input id="link" value="https://ui.shadcn.com/docs/installation" readonly />
          </div>
        </div>
        <twig:Dialog:Footer class="sm:justify-start">
            <twig:Dialog:Close>
                <twig:Button type="button" variant="secondary" {{ ...dialog_close_attrs }}>
                    Close
                </twig:Button>
            </twig:Dialog:Close>
        </twig:Dialog:Footer>
    </twig:Dialog:Content>
</twig:Dialog>

With Tooltip

Combining Dialog with Tooltip requires merging their *_trigger_attrs attributes using the html_attr_merge Twig filter, available in twig/html-extra:^3.24.

Loading... 
<twig:Dialog id="delete_account">
    <twig:Dialog:Trigger>
        <twig:Tooltip id="tooltip-alert-dialog">
            <twig:Tooltip:Trigger>
                <twig:Button variant="outline" {{ ...dialog_trigger_attrs|html_attr_merge(tooltip_trigger_attrs) }}>
                    Edit Profile
                </twig:Button>
            </twig:Tooltip:Trigger>
            <twig:Tooltip:Content>
                <p>A super useful tooltip</p>
            </twig:Tooltip:Content>
        </twig:Tooltip>
    </twig:Dialog:Trigger>
    <twig:Dialog:Content class="sm:max-w-[425px]">
        <twig:Dialog:Header>
            <twig:Dialog:Title>Edit profile</twig:Dialog:Title>
            <twig:Dialog:Description>
                Make changes to your profile here. Click save when you&apos;re done.
            </twig:Dialog:Description>
        </twig:Dialog:Header>
        <div class="grid gap-4">
            <div class="grid gap-3">
                <twig:Label for="name">Name</twig:Label>
                <twig:Input id="name" name="name" value="Pedro Duarte" />
            </div>
            <div class="grid gap-3">
                <twig:Label for="username">Username</twig:Label>
                <twig:Input id="username" name="username" value="@peduarte" />
            </div>
        </div>
        <twig:Dialog:Footer>
            <twig:Dialog:Close>
                <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
            </twig:Dialog:Close>
            <twig:Button type="submit">Save changes</twig:Button>
        </twig:Dialog:Footer>
    </twig:Dialog:Content>
</twig:Dialog>

API Reference

Dialog

Prop Type Description
id string Unique identifier used to generate internal Dialog IDs
open boolean Whether the dialog is open on initial render. Defaults to false
Block Description
content The dialog structure, typically includes Dialog:Trigger and Dialog:Content

Dialog:Close

Block Description
content The close trigger element (e.g., a Button) that closes the dialog when clicked

Dialog:Content

Prop Type Description
showCloseButton boolean Whether to display the close button in the top-right corner. Defaults to true
Block Description
content The dialog content, typically includes Dialog:Header and optionally Dialog:Footer

Dialog:Description

Block Description
content The descriptive text explaining the dialog purpose

Dialog:Footer

Block Description
content The footer area, typically contains action buttons

Dialog:Header

Block Description
content The header area, typically contains Dialog:Title and Dialog:Description

Dialog:Title

Block Description
content The title text of the dialog

Dialog:Trigger

Block Description
content The trigger element (e.g., a Button) that opens the dialog when clicked