Skip to content
Lattice

Modals

Modal::make($id)->title('…')->schema([...]) declares a dialog. It renders nothing until it is opened, and it is driven from the server: an action returns an open-modal / close-modal effect targeting the modal’s $id.

use Lattice\Ui\Components\Modal;


Modal::make('invite-member')
    ->title('Invite a member')
    ->description('They will receive an email invitation.')
    ->schema([
        // form fields, text, buttons…
    ]);

The dialog’s $id is how effects find it:

use Lattice\Facades\Effects;
use Lattice\Ui\Components\Button;


Button::make('Invite')
    ->effects(Effects::openModal('invite-member'));
  • ->title('…') and ->description('…') set the dialog header.
  • ->closeLabel('…') relabels the close button (defaults to Close).
  • ->open() renders the modal already open — for a dialog that should show on load, rather than in response to an effect.
  • ->slideOut() docks the dialog to a viewport edge as a full-height sheet; ->slideOut(Side::Start) picks the leading edge instead of the trailing one.
  • ->width(ModalWidth::…) sets the dialog width — the max width of a centered dialog and the panel width of a sheet. Defaults to ModalWidth::Lg (32rem).

Slide-out sheets

Section titled “Slide-out sheets”

->slideOut() presents the dialog as a full-height sheet docked to a viewport edge instead of a centered window — the pattern for quick previews and edits alongside a table. The default edge is the trailing one; pass a Side to dock it to the leading edge.

use Lattice\Ui\Enums\ModalWidth;
use Lattice\Ui\Enums\Side;


Modal::make('order-preview')
    ->title('Order #1042')
    ->slideOut()
    ->width(ModalWidth::Xl2)
    ->schema([
        // …
    ]);


Modal::make('saved-filters')
    ->title('Saved filters')
    ->slideOut(Side::Start)
    ->schema([
        // …
    ]);

Sheets and centered dialogs share the same width scale: ->width() caps a centered dialog and sets a sheet’s panel width.