View as Markdown

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

100%
Loading... 
<div style="min-height: 204px">
    <twig:AlertDialog id="delete_account">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content>
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    This action cannot be undone. This will permanently delete your
                    account from our servers.
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>

Installation

php bin/console ux:install alert-dialog --kit shadcn

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.24.0 tales-from-a-dev/twig-tailwind-extra:^1.3.0 symfony/ux-twig-component:^3.5

Install the following front-end dependencies:

npm install shadcn tw-animate-css
# ...or with Symfony AssetMapper
php bin/console importmap:require tw-animate-css/dist/tw-animate.css shadcn/dist/tailwind.css

Copy the following file(s) into your app:

assets/controllers/alert_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');
            }
        }
    }

    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/AlertDialog.html.twig 
{%- props
    ## string Unique identifier used to generate internal AlertDialog IDs.
    id,
    ## boolean Whether the dialog is open on initial render.
    open = false
-%}

{%- set _alertDialog_id = 'alert-dialog-' ~ id -%}
{%- set _alertDialog_titleId = _alertDialog_id ~ '-title' -%}
{%- set _alertDialog_descriptionId = _alertDialog_id ~ '-description' -%}
{%- do provide('alertDialog.id', _alertDialog_id) -%}
{%- do provide('alertDialog.titleId', _alertDialog_titleId) -%}
{%- do provide('alertDialog.descriptionId', _alertDialog_descriptionId) -%}
<div
    data-alert-dialog-open-value="{{ open }}"
    {{ attributes.defaults({
        'data-controller': 'alert-dialog',
    }) }}
>
    {## The dialog structure, typically includes `AlertDialog:Trigger` and `AlertDialog:Content`. -#}
    {% block content %}{% endblock %}
</div>
templates/components/AlertDialog/Action.html.twig 
{%- props
    ## 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The button style variant.
    variant = 'default',
    ## 'default'|'sm'|'lg'|'xs'|'icon' The button size.
    size = 'default'
-%}
<twig:Button variant="{{ variant }}" size="{{ size }}" data-slot="alert-dialog-action" {{ ...attributes }}>
    {##- The action button label. -#}
    {{- block(outerBlocks.content) -}}
</twig:Button>
templates/components/AlertDialog/Cancel.html.twig 
{%- props
    ## 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The button style variant.
    variant = 'outline',
    ## 'default'|'sm'|'lg'|'xs'|'icon' The button size.
    size = 'default'
-%}
<twig:Button variant="{{ variant }}" size="{{ size }}" data-slot="alert-dialog-cancel" data-action="click->alert-dialog#close" {{ ...attributes }}>
    {##- The cancel button label. -#}
    {{- block(outerBlocks.content) -}}
</twig:Button>
templates/components/AlertDialog/Content.html.twig 
{%- props
    ## 'default'|'sm' The size of the dialog.
    size = 'default'
-%}
{%- set _alertDialog_id = inject('alertDialog.id') -%}
{%- set _alertDialog_titleId = inject('alertDialog.titleId') -%}
{%- set _alertDialog_descriptionId = inject('alertDialog.descriptionId') -%}
<dialog
    id="{{ _alertDialog_id }}"
    aria-labelledby="{{ _alertDialog_titleId }}"
    aria-describedby="{{ _alertDialog_descriptionId }}"
    data-size="{{ size }}"
    data-alert-dialog-target="dialog"
    data-slot="alert-dialog-content"
    {{ attributes.defaults({
        class: 'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none transition-all transition-discrete backdrop:transition-discrete backdrop:duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/10 open:backdrop:backdrop-blur-xs scale-95 opacity-0 starting:open:scale-95 starting:open:opacity-0'|tailwind_classes,
        'data-action': 'keydown.esc->alert-dialog#close:prevent',
    }).without('id') }}
>
    {##- The dialog content, typically includes `AlertDialog:Header` and `AlertDialog:Footer`. -#}
    {%- block content %}{% endblock -%}
</dialog>
templates/components/AlertDialog/Description.html.twig 
{%- set _alertDialog_descriptionId = inject('alertDialog.descriptionId') -%}
<p
    id="{{ _alertDialog_descriptionId }}"
    data-slot="alert-dialog-description"
    {{ attributes.without('id').defaults({class: 'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground'|tailwind_classes}) }}
>
    {##- The descriptive text explaining the alert dialog purpose. -#}
    {%- block content %}{% endblock -%}
</p>
templates/components/AlertDialog/Footer.html.twig 
<div
    data-slot="alert-dialog-footer"
    {{ attributes.defaults({
        class: '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end'|tailwind_classes,
    }) }}
>
    {##- The footer area, typically contains `AlertDialog:Cancel` and `AlertDialog:Action` buttons. -#}
    {%- block content %}{% endblock -%}
</div>
templates/components/AlertDialog/Header.html.twig 
<div
    data-slot="alert-dialog-header"
    {{ attributes.defaults({
        class: 'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]'|tailwind_classes,
    }) }}
>
    {##- The header area, typically contains `AlertDialog:Title` and `AlertDialog:Description`. -#}
    {%- block content %}{% endblock -%}
</div>
templates/components/AlertDialog/Media.html.twig 
<div
    data-slot="alert-dialog-media"
    {{ attributes.defaults({
        class: ("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6 ")|tailwind_classes,
    }) }}
>
    {##- The media element (icon or image) to display in the alert dialog header. -#}
    {%- block content %}{% endblock -%}
</div>
templates/components/AlertDialog/Title.html.twig 
{%- set _alertDialog_titleId = inject('alertDialog.titleId') -%}
<h2
    id="{{ _alertDialog_titleId }}"
    data-slot="alert-dialog-title"
    {{ attributes.without('id').defaults({class: 'cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2'|tailwind_classes}) }}
>
    {##- The title text of the alert dialog. -#}
    {%- block content %}{% endblock -%}
</h2>
templates/components/AlertDialog/Trigger.html.twig 
{%- set alert_dialog_trigger_attrs = {
    'data-action': 'click->alert-dialog#open'|html_attr_type('sst'),
    'data-alert-dialog-target': 'trigger',
    'aria-haspopup': 'dialog',
    'aria-expanded': 'false',
} -%}
{##- The trigger element (e.g., a `Button`) that opens the dialog when clicked. -#}
{%- block content %}{% endblock -%}
templates/components/Button.html.twig 
{%- props
    ## 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant.
    variant = 'default',
    ## 'default'|'xs'|'sm'|'lg'|'icon'|'icon-xs'|'icon-sm'|'icon-lg' The button size.
    size = 'default',
    ## 'button'|'a' The HTML tag to render; use `a` when the button navigates.
    as = 'button'
-%}
{%- set style = html_cva(
    base: "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
    variants: {
        variant: {
            default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
            outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
            ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
            destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
            link: 'text-primary underline-offset-4 hover:underline',
        },
        size: {
            default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',
            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
            lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',
            icon: 'size-8',
            'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
            'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
            'icon-lg': 'size-9',
        },
    },
) -%}
<{{ as }}
    data-slot="button"
    data-size="{{ size }}"
    data-variant="{{ variant }}"
    {{ attributes.defaults({
        class: style.apply({variant: variant, size: size})|tailwind_classes,
        type: as == 'button' ? 'button' : false,
    }) }}
>
    {##- The button label and/or icon. -#}
    {%- block content %}{% endblock -%}
</{{ as }}>

Usage

<twig:AlertDialog id="delete_account">
    <twig:AlertDialog:Trigger>
        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
    </twig:AlertDialog:Trigger>
    <twig:AlertDialog:Content>
        <twig:AlertDialog:Header>
            <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
            <twig:AlertDialog:Description>
                This action cannot be undone. This will permanently delete your
                account and remove your data from our servers.
            </twig:AlertDialog:Description>
        </twig:AlertDialog:Header>
        <twig:AlertDialog:Footer>
            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
        </twig:AlertDialog:Footer>
    </twig:AlertDialog:Content>
</twig:AlertDialog>

Examples

Basic

A basic alert dialog with a title, description, and cancel and continue buttons.

100%
Loading... 
<div style="min-height: 204px">
    <twig:AlertDialog id="alert-dialog-basic">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content>
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    This action cannot be undone. This will permanently delete your
                    account and remove your data from our servers.
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>

Small

Use the size="sm" prop to make the alert dialog smaller.

100%
Loading... 
<div style="min-height: 204px">
    <twig:AlertDialog id="alert-dialog-small">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content size="sm">
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Title>Allow accessory to connect?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    Do you want to allow the USB accessory to connect to this device?
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Don't allow</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action>Allow</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>

Media

Use the AlertDialog:Media component to add a media element such as an icon or image to the alert dialog.

100%
Loading... 
<div style="min-height: 204px">
    <twig:AlertDialog id="alert-dialog-media">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Share Project</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content>
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Media>
                    <twig:ux:icon name="lucide:circle-fading-plus" />
                </twig:AlertDialog:Media>
                <twig:AlertDialog:Title>Share this project?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    Anyone with the link will be able to view and edit this project.
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action>Share</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>

Small with Media

Use the size="sm" prop to make the alert dialog smaller and the AlertDialog:Media component to add a media element such as an icon or image to the alert dialog.

100%
Loading... 
<div style="min-height: 254px">
    <twig:AlertDialog id="alert-dialog-small-with-media">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content size="sm">
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Media>
                    <twig:ux:icon name="lucide:bluetooth" />
                </twig:AlertDialog:Media>
                <twig:AlertDialog:Title>Allow accessory to connect?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    Do you want to allow the USB accessory to connect to this device?
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Don't allow</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action>Allow</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>

Destructive

Use the AlertDialog:Action component to add a destructive action button to the alert dialog.

100%
Loading... 
<div style="min-height: 254px">
    <twig:AlertDialog id="alert-dialog-destructive">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="destructive" {{ ...alert_dialog_trigger_attrs }}>Delete Chat</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content size="sm">
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Media class="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
                    <twig:ux:icon name="lucide:trash-2" />
                </twig:AlertDialog:Media>
                <twig:AlertDialog:Title>Delete chat?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    This will permanently delete this chat conversation. View
                    <a href="#">Settings</a> delete any memories saved during this chat.
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action variant="destructive">Delete</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

100%
Loading... 
<div style="min-height: 254px">
    <div class="flex flex-col gap-8">
        <div dir="rtl" class="flex gap-4">
            <twig:AlertDialog id="rtl-ar-default">
                <twig:AlertDialog:Trigger>
                    <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>إظهار الحوار</twig:Button>
                </twig:AlertDialog:Trigger>
                <twig:AlertDialog:Content dir="rtl">
                    <twig:AlertDialog:Header>
                        <twig:AlertDialog:Title>هل أنت متأكد تمامًا؟</twig:AlertDialog:Title>
                        <twig:AlertDialog:Description>
                            لا يمكن التراجع عن هذا الإجراء. سيتم حذف حسابك نهائيًا من خوادمنا.
                        </twig:AlertDialog:Description>
                    </twig:AlertDialog:Header>
                    <twig:AlertDialog:Footer>
                        <twig:AlertDialog:Cancel>إلغاء</twig:AlertDialog:Cancel>
                        <twig:AlertDialog:Action>متابعة</twig:AlertDialog:Action>
                    </twig:AlertDialog:Footer>
                </twig:AlertDialog:Content>
            </twig:AlertDialog>
            <twig:AlertDialog id="rtl-ar-sm">
                <twig:AlertDialog:Trigger>
                    <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>إظهار الحوار (صغير)</twig:Button>
                </twig:AlertDialog:Trigger>
                <twig:AlertDialog:Content size="sm" dir="rtl">
                    <twig:AlertDialog:Header>
                        <twig:AlertDialog:Media>
                            <twig:ux:icon name="lucide:bluetooth" />
                        </twig:AlertDialog:Media>
                        <twig:AlertDialog:Title>السماح للملحق بالاتصال؟</twig:AlertDialog:Title>
                        <twig:AlertDialog:Description>
                            هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟
                        </twig:AlertDialog:Description>
                    </twig:AlertDialog:Header>
                    <twig:AlertDialog:Footer>
                        <twig:AlertDialog:Cancel>عدم السماح</twig:AlertDialog:Cancel>
                        <twig:AlertDialog:Action>السماح</twig:AlertDialog:Action>
                    </twig:AlertDialog:Footer>
                </twig:AlertDialog:Content>
            </twig:AlertDialog>
        </div>
        <div dir="rtl" class="flex gap-4">
            <twig:AlertDialog id="rtl-he-default">
                <twig:AlertDialog:Trigger>
                    <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>הצג דיאלוג</twig:Button>
                </twig:AlertDialog:Trigger>
                <twig:AlertDialog:Content dir="rtl">
                    <twig:AlertDialog:Header>
                        <twig:AlertDialog:Title>האם אתה בטוח לחלוטין?</twig:AlertDialog:Title>
                        <twig:AlertDialog:Description>
                            לא ניתן לבטל. זה ימחק לצמיתות את החשבון שלך מהשרתים שלנו.
                        </twig:AlertDialog:Description>
                    </twig:AlertDialog:Header>
                    <twig:AlertDialog:Footer>
                        <twig:AlertDialog:Cancel>ביטול</twig:AlertDialog:Cancel>
                        <twig:AlertDialog:Action>המשך</twig:AlertDialog:Action>
                    </twig:AlertDialog:Footer>
                </twig:AlertDialog:Content>
            </twig:AlertDialog>
            <twig:AlertDialog id="rtl-he-sm">
                <twig:AlertDialog:Trigger>
                    <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>הצג דיאלוג (קטן)</twig:Button>
                </twig:AlertDialog:Trigger>
                <twig:AlertDialog:Content size="sm" dir="rtl">
                    <twig:AlertDialog:Header>
                        <twig:AlertDialog:Media>
                            <twig:ux:icon name="lucide:bluetooth" />
                        </twig:AlertDialog:Media>
                        <twig:AlertDialog:Title>לחבר התקן?</twig:AlertDialog:Title>
                        <twig:AlertDialog:Description>
                            חבר התקן USB למכשיר זה?
                        </twig:AlertDialog:Description>
                    </twig:AlertDialog:Header>
                    <twig:AlertDialog:Footer>
                        <twig:AlertDialog:Cancel>דחה</twig:AlertDialog:Cancel>
                        <twig:AlertDialog:Action>אשר</twig:AlertDialog:Action>
                    </twig:AlertDialog:Footer>
                </twig:AlertDialog:Content>
            </twig:AlertDialog>
        </div>
    </div>
</div>

Accessibility

  • AlertDialog:Content renders a native <dialog> opened with showModal(), so the browser traps focus, makes the rest of the page inert and exposes the modal semantics.
  • The <dialog> is labelled by AlertDialog:Title and described by AlertDialog:Description through aria-labelledby and aria-describedby built from the id prop. Render both, since the references point at those IDs whether or not the elements exist.
  • Escape closes the dialog. Unlike Dialog, clicking the backdrop does not close it, because an alert dialog asks for a deliberate answer.
  • AlertDialog:Trigger exposes aria-haspopup="dialog" and an aria-expanded that the controller keeps in sync.
  • Put the consequence in the title and description rather than in the button colour alone, so a destructive action reads as destructive without it.

API Reference

<twig:AlertDialog>

Prop Type Default
id 
 string -
open 
 boolean false
Block Description
content The dialog structure, typically includes AlertDialog:Trigger and AlertDialog:Content.

<twig:AlertDialog:Action>

Prop Type Default
variant 
 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' 'default'
size 
 'default'|'sm'|'lg'|'xs'|'icon' 'default'
Block Description
content The action button label.

<twig:AlertDialog:Cancel>

Prop Type Default
variant 
 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' 'outline'
size 
 'default'|'sm'|'lg'|'xs'|'icon' 'default'
Block Description
content The cancel button label.

<twig:AlertDialog:Content>

Prop Type Default
size 
 'default'|'sm' 'default'
Block Description
content The dialog content, typically includes AlertDialog:Header and AlertDialog:Footer.

<twig:AlertDialog:Description>

Block Description
content The descriptive text explaining the alert dialog purpose.

<twig:AlertDialog:Footer>

Block Description
content The footer area, typically contains AlertDialog:Cancel and AlertDialog:Action buttons.

<twig:AlertDialog:Header>

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

<twig:AlertDialog:Media>

Block Description
content The media element (icon or image) to display in the alert dialog header.

<twig:AlertDialog:Title>

Block Description
content The title text of the alert dialog.

<twig:AlertDialog:Trigger>

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