jig
Describe what you need, or type a control name.
Close Select Confirm
Inputs
Calendar Checkbox Color Picker Edit Inplace Filter Input Input Field List Box Mask Input Number Input OTP Radio Rating Select Slider Switch Tag Input Upload
Actions
Button Button Group Command Select Button Toggle Button
Data Display
Avatar Badge Chip Icon Inplace Item View Kbd Meter Paginator Progress Skeleton Spinner Table Tag Tree
Containers & Overlays
Accordion Defer Dialog Drawer Dropdown List Menu Popover Scroll Shadow Scroller Splitter Stepper Tabs Toolbar Tooltip
Feedback & Navigation
Breadcrumb Errors Hint Message Snackbar State Toast
Directives
Autofocus Drag Movable Resizable Roving Focus Scroll Amount
Components
State
Examples

State

The State component (<jig-state>) is a compact status indicator for one of five kinds — loading (renders a spinner), success, warning, error, and cancelled (each renders a status icon). Set the kind input and swap it as an operation progresses (e.g. loading → success) to give inline feedback next to a button or form field.

Button

Drop an <jig-state> inside a jigButton to show progress in place. By default the indicator sits alongside the button's label; set replaceContent to hide the label and show only the indicator while it is visible — useful for a submit button that should collapse to a spinner while the request is in flight.

Input Field

Placed inside a jig-input-field, the indicator acts as a trailing status adornment — pairing well with jigTooltip to explain a warning or error.

Interaction

Toggle visible to mount and unmount the indicator as state changes, and bind kind to a signal to drive the loading → success → idle cycle.

Sizing and icons

size sets the indicator size in pixels (default 16), and thickness sets the spinner's stroke for the loading kind. Replace any kind's glyph with the matching iconSuccess, iconWarning, iconError, or iconCancelled input.