Skip to Content
Version 1Modals

LUI includes a composable modal and overlay API in LuiOverlay. Modals, anchored overlays, and toasts all render through the overlay layer (see The Overlay Layer and Lui.Portal), so they draw above all app content and are never clipped. Within the layer they stack by type: anchored popups (dropdowns/tooltips/menus) sit below modals, which sit below toasts, so a modal always covers an open dropdown and a toast always shows above a modal.

Modals

LuiOverlay.Modal renders a centered, backdrop-dimmed modal into the overlay layer. Call it from anywhere in your tree, it returns an empty placeholder and renders the modal globally. Set Visible = false (or simply don’t call it) to remove it. Give distinct modals a Key if more than one can be open; otherwise the title is used.

LuiOverlay.Modal(new LuiModalOptions
{
    Key = "settings",
    Title = "Player Settings",
    Tone = LuiModalTone.Success,
    OnClose = Close,
    Actions = new[] { new LuiModalAction("Cancel"), LuiModalAction.Primary("Save") }
})

Generic Layer

LuiOverlay.Layer(isVisible, Lui.Div("absolute-center bg-slate-900 p-4"))
LuiOverlay.Modal(new LuiModalOptions
{
    Title = "Player Settings",
    Message = "Update your preferences.",
    Size = LuiModalSize.Medium,
    Tone = LuiModalTone.Success,
    ShowCloseButton = true,
    CloseOnBackdropClick = true,
    AutoFocusFirst = true,
    OnClose = CloseModal,
    Actions = new[]
    {
        new LuiModalAction("Cancel"),
        LuiModalAction.Primary("Save")
    }
},
    Lui.Input(name.Value, value => name.Value = value, "w-full", "Player name").TabIndex(10),
    Lui.Slider(volume.Value, 0f, 100f, value => volume.Value = value, "w-full").TabIndex(11)
)
LuiModalSize.Small   // 500px wide
LuiModalSize.Medium  // 620px wide
LuiModalSize.Large   // 820px wide
LuiModalSize.Full    // 94% wide, 88% high
Neutral
Primary
Success
Warning
Danger

Tone affects the title dot and border color.

Alert Helper

LuiOverlay.Alert(
    "Reward Claimed",
    "Your reward was added to inventory.",
    CloseModal,
    tone: LuiModalTone.Primary,
    size: LuiModalSize.Small)

Confirm Helper

LuiOverlay.Confirm(
    "Start Mission?",
    "This will leave the hub.",
    onConfirm: StartMission,
    onCancel: CloseModal,
    tone: LuiModalTone.Warning,
    confirmLabel: "Start",
    cancelLabel: "Not Yet")

Modal structure is not focusable. The backdrop can be clickable but is not focusable.

When a modal opens, it automatically focuses the lowest-tab-index focusable descendant. Default order:

  1. close button, tab index 1
  2. body controls, if you assign tab indices such as 10, 11
  3. footer actions, automatic tab indices starting at 100

Use LuiModalOptions.AutoFocusFirst = false to disable automatic focus.

Use LuiModalOptions.AutoFocusKey to control when autofocus should run again.

Last updated on
RouterAnimations