- 1.5.0

Dialog

No Close Button

The X close button is hidden.
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

 
<:trigger :let={id}>
  <.dm_btn command="show-modal" commandfor={id}>Open</.dm_btn>
</:trigger>
<:title>No Close Button</:title>
<:body><p>The X close button is hidden.</p></:body>
<:footer>
  <.dm_btn variant="primary" command="close" commandfor="dialog-no-close">OK</.dm_btn>
</:footer>
title :slot

Modal title
Show slot attributes Hide slot attributes
class :any

title container CSS classes

 
<:trigger :let={id}>
  <.dm_btn command="show-modal" commandfor={id}>Open</.dm_btn>
</:trigger>
<:title>No Close Button</:title>
<:body><p>The X close button is hidden.</p></:body>
<:footer>
  <.dm_btn variant="primary" command="close" commandfor="dialog-no-close">OK</.dm_btn>
</:footer>
Required body * :slot

Modal content
Show slot attributes Hide slot attributes
class :any

body container CSS classes

 
<:trigger :let={id}>
  <.dm_btn command="show-modal" commandfor={id}>Open</.dm_btn>
</:trigger>
<:title>No Close Button</:title>
<:body><p>The X close button is hidden.</p></:body>
<:footer>
  <.dm_btn variant="primary" command="close" commandfor="dialog-no-close">OK</.dm_btn>
</:footer>
footer :slot

Modal footer with actions
Show slot attributes Hide slot attributes 
<:trigger :let={id}>
  <.dm_btn command="show-modal" commandfor={id}>Open</.dm_btn>
</:trigger>
<:title>No Close Button</:title>
<:body><p>The X close button is hidden.</p></:body>
<:footer>
  <.dm_btn variant="primary" command="close" commandfor="dialog-no-close">OK</.dm_btn>
</:footer>