Overlays

Sheet

Edge-anchored panels in four directions.

Slide-over panel (drawer) that enters from a screen edge. Shares the modal's open_dialog/close_dialog runtime with focus trap and Escape/backdrop dismissal.

Trigger & content

A button opens the sheet; it shares the modal's open_dialog/close_dialog runtime.

<.button phx-click={open_dialog("settings")}>Open sheet</.button>

<.sheet id="settings" title="Edit settings">
  <p>Sheet body content goes here.</p>
  <:footer>
    <.button variant="outline" size="sm" phx-click={close_dialog("settings")}>Cancel</.button>
    <.button variant="solid" size="sm" phx-click={close_dialog("settings")}>Save</.button>
  </:footer>
</.sheet>

Placement

Slides in from any edge — left, right (default), top, or bottom.

<.sheet id="nav" placement="left">…</.sheet>
<.sheet id="panel" placement="right">…</.sheet>
<.sheet id="banner" placement="top">…</.sheet>
<.sheet id="tray" placement="bottom">…</.sheet>

Prevent closing

prevent_closing removes the close button and disables Escape/backdrop dismissal — the sheet must be closed by an explicit action.

<.sheet id="confirm" title="Confirm" prevent_closing>
  <p>You must choose an action.</p>
  <:footer>
    <.button variant="solid" size="sm" phx-click={close_dialog("confirm")}>Done</.button>
  </:footer>
</.sheet>

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`animation`	`string`	`nil`	Accepted for Fluxon compat; slide is token-driven.
`animation_enter`	`string`	`nil`	Accepted for Fluxon compat.
`animation_leave`	`string`	`nil`	Accepted for Fluxon compat.
`backdrop_class`	`any`	`nil`	Extra classes on the dimmed backdrop.
`class`	`any`	`nil`	Extra classes on the sliding panel.
`close_on_esc`	`boolean`	`true`	Close when Escape is pressed.
`close_on_outside_click`	`boolean`	`true`	Close when the backdrop is clicked.
`container_class`	`any`	`nil`	Extra classes on the overlay root.
`controlled`	`boolean`	`false`	Strict server-driven open state: `open` is truth, patches flow into the machine.
`hide_close_button`	`boolean`	`false`	Hide the built-in close control.
`id`*	`string`	`—`	Stable DOM id used by open_dialog/close_dialog.
`on_change`	`string`	`nil`	Server event pushed on open change (`lantern:dialog:open/close` replies).
`on_change_client`	`string`	`nil`	Bubbling DOM CustomEvent dispatched on open change.
`on_close`	`{:struct, Phoenix.LiveView.JS}`	`nil`	JS command run when the sheet closes.
`on_open`	`{:struct, Phoenix.LiveView.JS}`	`nil`	JS command run when the sheet opens.
`open`	`boolean`	`false`	render already open (server-driven sheets)
`placement`	`left \| right \| top \| bottom`	`"right"`	Screen edge the panel slides in from.
`prevent_closing`	`boolean`	`false`	Block Escape and outside-click close.
`title`	`string`	`nil`	optional header title beside the close button
Slots
`:footer`	sticky footer (action buttons)
`:header`	custom header content (replaces `title`)
`:inner_block`*	Sheet body content.