Skip to Content
Version 1Modals

LUI includes a composable modal and overlay API in LuiOverlay.

Overlay Host

Use LuiOverlay.Host to create a relative area that can contain absolute overlays:

LuiOverlay.Host("min-h-[660px] rounded-xl bg-slate-950",
    MainContent(),
    ActiveModal()
)

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