LayerDialog
Implemented OverlayLayered native modal with actions, forms, nested dialogs and pending states.
Kumo reference: kumo-ui.com/components/layer-dialog/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Informational dialog
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-informational-dialog" title="Project settings" description="Manage this project configuration." trigger_label="Informational dialog" %}
<p class="text-base">Review the selected project settings before continuing.</p>
{% endwdj_component %}Standard action
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-standard-action" title="Project settings" description="Manage this project configuration." trigger_label="Standard action" footer=audit_layer_footer %}
<p class="text-base">Review the selected project settings before continuing.</p>
{% endwdj_component %}Alert confirmation
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-alert-confirmation" title="Project settings" description="Manage this project configuration." trigger_label="Alert confirmation" alert=True footer=audit_layer_footer close_on_backdrop=False %}
<p class="text-base">Review the selected project settings before continuing.</p>
{% endwdj_component %}Small width
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-small-width" title="Project settings" description="Manage this project configuration." trigger_label="Small width" size="sm" %}
<p class="text-base">Review the selected project settings before continuing.</p>
{% endwdj_component %}Large width
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-large-width" title="Project settings" description="Manage this project configuration." trigger_label="Large width" size="lg" %}
<p class="text-base">Review the selected project settings before continuing.</p>
{% endwdj_component %}Top placement
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-top-placement" title="Project settings" description="Manage this project configuration." trigger_label="Top placement" placement="top" %}
<p class="text-base">Review the selected project settings before continuing.</p>
{% endwdj_component %}Scrolling body
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-scrolling-body" title="Project settings" description="Manage this project configuration." trigger_label="Scrolling body" %}
{% for option in audit_long_options %}<p class="py-2 text-base">{{ option.label }}: synthetic configuration.</p>{% endfor %}
{% endwdj_component %}Native form
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-form" title="Edit settings" trigger_label="Edit settings" %}
<form data-demo-form class="flex flex-col gap-4">{% include "wdj/components/input.html" with id="audit-layer-form-name" name="name" label="Project name" required=True only %}{% include "wdj/components/button.html" with type="submit" label="Validate settings" variant="primary" only %}</form>
{% endwdj_component %}Search and pickers
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-search" title="Choose project" trigger_label="Choose project" %}
{% include "wdj/components/combobox.html" with id="audit-layer-picker" label="Project" options=audit_options only %}{% include "wdj/components/select.html" with id="audit-layer-select" label="Environment" options=audit_options mode="custom" only %}
{% endwdj_component %}Nested dialogs
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-parent" title="Parent dialog" trigger_label="Open parent dialog" %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-child" title="Child confirmation" trigger_label="Open child dialog" %}
<p class="text-base">The native modal stack returns focus to the parent trigger.</p>
{% endwdj_component %}
{% endwdj_component %}Pending work
Show template
{% load wdj %}
<div x-data="{ busy: false }">{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-pending" title="Save settings" trigger_label="Pending work" attrs=audit_pending_attrs %}
<button type="button" class="h-9 rounded-lg bg-kumo-brand px-3 text-white" @click="busy = true; setTimeout(() => busy = false, 600)" :disabled="busy" x-text="busy ? 'Saving…' : 'Simulate save'"></button><p class="mt-2 text-base" aria-live="polite" x-text="busy ? 'Please wait' : 'Ready'"></p>
{% endwdj_component %}</div>Multiple primary actions
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-multiple" title="Export project" trigger_label="Choose export" footer=audit_multiple_footer %}<p>Choose the format that suits your workflow.</p>{% endwdj_component %}Localized dialog
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-localized" title="Editează proiectul" trigger_label="Deschide dialogul" close_label="Închide dialogul" footer=audit_localized_footer %}<p>Modificările se salvează după confirmare.</p>{% endwdj_component %}Dismissal cleanup
Show template
{% load wdj %}
<div x-data="{ draft: '' }" @wdj:dialog-close="draft = ''">{% wdj_component "wdj/components/layer_dialog.html" id="audit-layer-cleanup" title="Temporary draft" trigger_label="Edit temporary draft" %}<label class="flex flex-col gap-2">Draft<input class="h-9 rounded-lg bg-kumo-control px-3 ring-1 ring-kumo-line" x-model="draft"></label><p class="mt-2 text-base text-kumo-subtle">Closing clears this local draft.</p>{% endwdj_component %}</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | unset | Stable unique DOM ID; important for HTMX targets and focus restoration. |
| title | string | unset | Title; pass the documented value shown in the examples. |
| description | string | unset | Description; pass the documented value shown in the examples. |
| trigger_label | string | unset | Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text. |
| size | string | base | Size; pass the documented value shown in the examples. |
| placement | string | unset | Placement; pass the documented value shown in the examples. |
| alert | bool | False | Alert; pass the documented value shown in the examples. |
| slot | string / HTML slot | unset | Rich HTML supplied by the wdj_component block tag, rendered in an isolated context. |
| footer | string / HTML slot | unset | Footer; pass the documented value shown in the examples. |
| close_on_backdrop | bool | True | Close on backdrop; pass the documented value shown in the examples. |
| dismiss_disabled | bool | False | Dismiss disabled; pass the documented value shown in the examples. |
| close_label | string | unset | Close label; pass the documented value shown in the examples. |
| attrs | dict | {} | Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only. |
| class | string | "" | Class; pass the documented value shown in the examples. |