Modal
Focus a task in an accessible native dialog.
Preview
Example
<.modal id="invite" title="Invite teammate"><:trigger>Invite</:trigger>Invitation form</.modal>API contract
modal/1 uses declared Phoenix attributes and slots. This table is generated from the compiled component metadata.
| Attribute | Type | Required | Default | Accepted values |
|---|---|---|---|---|
id |
:string |
Yes | — |
Any value matching the declared type |
title |
:string |
Yes | — |
Any value matching the declared type |
description |
:string |
No | nil |
Any value matching the declared type |
placement |
:atom |
No | :middle |
[:top, :middle, :bottom, :start, :end] |
trigger_class |
:any |
No | nil |
Any value matching the declared type |
class |
:any |
No | nil |
Any value matching the declared type |
| Slot | Required | Slot attributes |
|---|---|---|
trigger |
Yes | No slot attributes |
inner_block |
Yes | No slot attributes |
actions |
No | No slot attributes |
States and behavior
Closed and open states use a native dialog. The trigger, explicit Close action, Escape key, and backdrop form all close predictably.
Keyboard and accessibility
Opening moves interaction into the native dialog. Escape closes it, and browser focus containment remains active while it is open.