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 combineloading:with a label change.
disabled: and loading: win over hover:/active:/focus: when they target the same property.
Last updated on