Internal QA/reference page for the canonical LAGO dialog system. Every example opens the real production component. Not linked from any product navigation.
DS-010 LagoModal is the canonical LAGO dialog system for focused tasks, confirmations, notices, and contained workflows. This page is a permanent internal Design System QA/reference asset — it is not linked from any product navigation.
DS-010 — LagoModal
Status: Approved · v1.0
Standard dialog system for focused tasks, confirmations, notices, and contained workflows. Background interaction is blocked; focus is trapped; Escape closes dismissible modals.
LagoModal component — no static reproductions. Resize your browser window below 640px to validate the mobile full-screen behavior.The complete anatomy of a standard modal: header (close control, title, supporting description), content region, and footer (secondary + primary action).
The close control (X) is shown by default. It can be hidden with showClose={false} when the workflow requires an explicit action to exit — always provide an intentional exit path.
Every canonical variant with realistic representative content. Differences come from semantic context and content — not unrelated styling.
closeOnBackdrop={false} so an accidental outside click does not perform or dismiss the action — the user must use an explicit button.A real interactive multi-step workflow inside the modal. Back is disabled on the first step; the final step shows the confirming action.
Three canonical max-widths (400 / 560 / 720px) and the real DS-001 Button states inside a modal footer.
A realistic form using DS-007 LagoFormElements — label, text input, select, textarea, switch, checkbox, help text, and validation error.
Click Send invitation without filling the form to see the DS-007 error state (red border + icon + message — never colour alone).
Semantic status communication using DS-009 LagoStatusBadge. Colour never carries meaning alone — a text label and icon always reinforce it.
The status badge provides the semantic cue (icon + colour + label). The modal provides the container. Together they communicate meaning without custom badge styling.
DS-008 LagoTable and DS-003 LagoContentCard inside a large modal — validates that contained components keep their spacing without fighting the modal.
Deliberately long content forces internal scrolling. The header, close control, and footer remain fixed and usable.
max-h-[85vh] on desktop and full viewport height on mobile. Content scrolls internally — no page-level overflow, no clipping.Explicit controls for closeOnBackdrop and closeOnEscape. Critical workflows should disable backdrop dismissal so an accidental click does not perform or dismiss the action.
The modal is viewport-responsive: below 640px it becomes a real full-screen surface, not a scaled-down desktop modal. Keyboard interaction is provided by the production Radix dialog primitive.
Tablet · 800px
Resize your browser window to validate: below 640px the modal fills the viewport edge-to-edge with a preserved header, scrolling content, and fixed footer. Above 640px it is the centered, size-constrained modal.
DS-010 LagoModal integrates with these LAGO design-system components. This is a reference section — each dependency is used in the sections above, not duplicated here.
Lago Button
Primary and secondary actions in the modal footer. All variants (navy, tealOutline, lagoDestructive) and states (loading, disabled) are used directly.
Lucide Iconography
Close control (X), semantic variant icons (Info, AlertTriangle, CheckCircle2), and form field icons — all Lucide, all at canonical sizes.
LagoContentCard
Nested inside the large/detail modal for structured information blocks. No nested structural shadows — the card inherits the modal surface.
LagoTabs
Available for contained multi-step workflows. The multi-step example uses a step indicator; LagoTabs can be used for parallel tab-based workflows inside a modal.
LagoFormElements
Form content inside the modal — LagoInput, LagoSelect, LagoTextarea, LagoSwitch, LagoCheckbox, LagoFormField with help/error states.
LagoTable
Compact table inside the large/detail modal. Columns stay contained; the table scrolls horizontally on narrow widths without breaking the modal.
LagoStatusBadge
Semantic status communication inside the modal — pending, processing, published, limited, failed. Colour never carries meaning alone.
DS-020 LagoAppShell — the modal is a focused overlay, not an application shell replacement. DS-015 LagoNavigation — the modal does not duplicate global navigation.