Skip to Content
Version 1States

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