Button
An interactive button field with configurable actions including links, form submission, messages, provider triggers, and step navigation.
The Button field places a clickable button on the form canvas. It supports multiple action types, from navigating to a URL to submitting the form, displaying a message, or triggering a third-party provider action.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | -- | Label displayed above the button (optional) |
| width | LayoutWidth | "full" | Horizontal space the field occupies |
| text | string | -- | Text displayed on the button itself |
| variant | ButtonVariant | "default" | Visual style: "default", "destructive", "outline", "secondary", "ghost", or "link" |
| size | ButtonSize | -- | Button size: "sm", "md", "lg", or "icon" |
| action | ButtonAction | -- | The action triggered when the button is clicked (see below) |
Button Actions
The action property is a discriminated union. The kind field determines which action type is used.
Link Action
Navigates to a URL when clicked.
| Property | Type | Description |
|---|---|---|
| kind | "link" | Action type identifier |
| href | string | Destination URL |
| method | SubmitMethod | HTTP method ("GET", "POST", "PUT", "PATCH", "DELETE") |
| headersJson | string | JSON string of headers to include |
| target | string | Link target: "_self" or "_blank" |
| rel | string | Link rel attribute value |
Submit Action
Submits the form data to a specified URL.
| Property | Type | Description |
|---|---|---|
| kind | "submit" | Action type identifier |
| url | string | URL to submit the form data to |
| method | SubmitMethod | HTTP method (defaults to "POST") |
| headersJson | string | JSON string of headers to include |
Message Action
Displays a message to the user without navigation.
| Property | Type | Description |
|---|---|---|
| kind | "message" | Action type identifier |
| message | string | The message text to display |
Next Step Action
Advances to the next step in a multi-step form flow.
| Property | Type | Description |
|---|---|---|
| kind | "nextStep" | Action type identifier |
| targetStepKey | string | Optional key for a specific target step |
Provider Action
Triggers a third-party provider integration.
| Property | Type | Description |
|---|---|---|
| kind | "provider" | Action type identifier |
| providerKey | string | Provider identifier (e.g. "zoom", "calendly", "salesforce", "google", "stripe") |
| providerAction | string | Specific action to invoke on the provider |
| payloadJson | string | JSON string of payload data for the provider |
Payment Action (Future)
Reserved for future payment integrations.
| Property | Type | Description |
|---|---|---|
| kind | "payment_future" | Action type identifier |
| provider | string | Payment provider (e.g. "stripe") |
| configJson | string | JSON string of payment configuration |
Example Usage
A submit button with outline styling:
{
"type": "button",
"text": "Submit Application",
"variant": "default",
"size": "lg",
"action": {
"kind": "submit",
"url": "/api/applications",
"method": "POST"
}
}