Button
The Button runs an action when a visitor clicks it. Use it to submit a form, send an email, save data, or navigate to the next view.
Properties
The properties live in the inspector under the Button group. The success and error fields appear only when Response is on, and the boundary field appears only when Custom boundary is on.
Property | What it does | Default |
|---|---|---|
Text | Label shown on the button | Click me! |
Icon | Icon shown next to the label | Empty |
Disabled | Prevents visitors from clicking the button | Off |
Button click action | Actions that run when the button is clicked | Empty list |
Response | Shows a success or error state after the action runs | Off |
Success state | Message shown when the action succeeds; appears only when Response is on | Submitted successfully |
Success icon | Icon shown with the success message; appears only when Response is on | Empty |
Error state | Message shown when the action fails; appears only when Response is on | Something went wrong! |
Error icon | Icon shown with the error message; appears only when Response is on | Empty |
Skip validation | Runs the action without validating the form; appears only for a submission action | Off |
Custom boundary | Uses a custom boundary for the action; appears only for a submission action | Off |
Boundary | Boundary the action runs in; appears only when Custom boundary is on | Select boundary |
Logic | Visibility logic that controls when the button shows | Always |
The Button has no general error state of its own; the error state exists only as a response after the action runs.
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.
Button: the button itself.
Loading: whether the button is running its action.
Submitted: whether the action has run.
Success: whether the action succeeded.
Error: whether the action failed.
Styling
The Button can be styled per state and per part of the element.
Style states: Active, Default, Disabled, Focus, Hover.
Public targets: wrapper, button, icon. Internal targets: navigation-link, button-text, success-text, success-icon, error-text, error-icon, loading-indicator, loading-dot, response-overlay.
Named styles: Button Primary, Button Secondary, Button Tertiary, Button Icon, Button Stretched.
Quick styles: Icon color, Icon Placement, 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.