- 1.5.0

Dialog

SM Dialog

SM sized modal.

LG Dialog

LG sized modal.

XL Dialog

XL sized modal.
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