State button
The State button toggles between an inactive and an active state. Use it to mark a favorite, toggle a configuration option, or confirm a choice.
Properties
The properties live in the inspector under the State button group.
Property | What it does | Default |
|---|---|---|
Label inactive | Text shown while the button is inactive | Inactive |
Icon inactive | Icon shown before the inactive label | Empty |
Label active | Text shown while the button is active | Active |
Icon active | Icon shown before the active label | Empty |
Default state | State the button starts in | Inactive |
Disabled | Prevents visitors from toggling the button | Off |
Logic | Drives the button's visibility with logic | None |
The label fields accept text or a formula. If a label is missing or empty, the button shows the placeholder "Add text". The State button has no success or error response flow: clicking only toggles the state and writes the value.
References
References expose the button's state as data you can use in formulas and other elements. Assign a reference to store the state in a variable.
Value: the current state, 0 when inactive and 1 when active.
Styling
The State button can be styled per state and per part of the element.
Style states: Active, Checked, Default, Disabled, Focus, Hover.
Named targets: wrapper, button, icon.
Four named styles are available: Button primary, Button secondary, Link primary, and Link secondary. The quick styles are Icon color, Icon Placement, and Alignment. Apply general styling from the Style tab: quick styles, style sets, and CSS overrides per state and per breakpoint. See the styling reference for the full system.
Related articles
UI Elements: overview of the elements.
FormulaScript Overview: using formulas in properties.