- 1.5.0

Dialog

Top Position

Modal anchored to the top of the viewport.

Middle Position

Modal anchored to the middle of the viewport.

Bottom Position

Modal anchored to the bottom of the viewport.
Attribute Type Documentation Default Value
id :any

Modal id
class :any

Additional CSS classes
hide_close :boolean

Hide the close button
false
position :string

Modal position (top / bottom; middle is default centered)
size :string

Modal size (sm / lg / xl map to core classes; xs and md use default width)
close_label :string

Accessible label for the close button
"Close"
dialog_label :string

Accessible fallback label when no title slot is provided (i18n)
"Dialog"
phx-mounted %JS{}

additional LiveView JS commands composed before preserving the open attribute
%Phoenix.LiveView.JS{ops: []}
rest :global
trigger :slot

Element that opens the modal
Show slot attributes Hide slot attributes
class :any

trigger wrapper CSS classes

 
[Multiple values]
title :slot

Modal title
Show slot attributes Hide slot attributes
class :any

title container CSS classes

 
[Multiple values]
Required body * :slot

Modal content
Show slot attributes Hide slot attributes
class :any

body container CSS classes

 
[Multiple values]
footer :slot

Modal footer with actions
Show slot attributes Hide slot attributes