Skip to Content
Version 1LUI Documentation - States

Disabled and Loading States

Any element can be marked disabled or loading. These are element states (like focus), driven by the node, and they expose matching disabled: and loading: style variants.

Lui.Button("Save", "px-4 py-2 rounded-lg bg-primary text-white disabled:opacity-50", Save).Disabled(!canSave) Lui.Button(busy ? "Saving..." : "Save", "... loading:opacity-70", Save).Loading(busy) Lui.Checkbox(value.Value, v => value.Value = v, "Option").Disabled(locked) Lui.Input(text.Value, v => text.Value = v, "w-64").Disabled()

Behavior:

  • Disabled turns off the element (and its subtree) via UI Toolkit’s enabled state: it stops receiving pointer, focus, and submit events, and its value/click/input callbacks are suppressed. It is also removed from keyboard/gamepad navigation. Style it with disabled: utilities.
  • Loading keeps the element in place but suppresses its click/activation (so a busy button can’t be re-triggered) and exposes the loading: variant for a “busy” treatment. A spinning indicator needs the looping-animation work (a later roadmap item); for now combine loading: with a label change.

disabled: and loading: win over hover:/active:/focus: when they target the same property.

Last updated on