A flexible action button that triggers widget actions.
Preview
code
1[Submit] [Cancel]Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeButton,3 Label: "Click Me",4 Variant: "default",5 OnClickAction: &models.WidgetAction{6 Type: "button_click",7 Payload: map[string]interface{}{"source": "inline"},8 },9}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "button" | Node type | required |
label | string | Button text | required |
variant | string | Visual style variant | "default" |
disabled | bool | Disable the button | false |
onClickAction | WidgetAction | Action to trigger on click | - |
WidgetAction Properties
| Name | Type | Description |
|---|---|---|
type | string | Action identifier (e.g., "submit", "cancel") |
payload | map[string]any | Optional data to include |
loadingBehavior | string | Loading state: "auto", "self", "container", "none" |
handler | string | Handler location: "server" (default), "client" |
Variants
| Variant | Description | Use Case |
|---|---|---|
default | Primary action style | Main actions, submit |
secondary | Secondary action style | Alternative actions |
outline | Border only | Cancel, back, dismiss |
ghost | Minimal style | Subtle actions |
destructive | Danger/error style | Delete, remove |
link | Link style | Navigation-like actions |
Examples
Primary Button
go
1{Type: models.WidgetNodeTypeButton, Label: "Submit", Variant: "default"}Secondary Button
go
1{Type: models.WidgetNodeTypeButton, Label: "Save Draft", Variant: "secondary"}Button with Action
go
1{2 Type: models.WidgetNodeTypeButton,3 Label: "Approve",4 Variant: "default",5 OnClickAction: &models.WidgetAction{6 Type: "approve",7 Payload: map[string]interface{}{8 "request_id": "123",9 },10 LoadingBehavior: "self",11 },12}Button Row
go
1{2 Type: models.WidgetNodeTypeRow,3 Gap: 2,4 Justify: "end",5 Children: []models.WidgetNode{6 {7 Type: models.WidgetNodeTypeButton,8 Label: "Cancel",9 Variant: "outline",10 OnClickAction: &models.WidgetAction{Type: "cancel"},11 },12 {13 Type: models.WidgetNodeTypeButton,14 Label: "Confirm",15 Variant: "default",16 OnClickAction: &models.WidgetAction{17 Type: "confirm",18 LoadingBehavior: "self",19 },20 },21 },22}Destructive Button
go
1{2 Type: models.WidgetNodeTypeButton,3 Label: "Delete",4 Variant: "destructive",5 OnClickAction: &models.WidgetAction{6 Type: "delete",7 Payload: map[string]interface{}{"item_id": "456"},8 LoadingBehavior: "self",9 },10}TypeScript
typescript
1const node: WidgetNode = {2 type: "button",3 label: "Click Me",4 variant: "default",5 onClickAction: {6 type: "click",7 payload: { id: 123 },8 loadingBehavior: "self",9 },10}Best Practices
- Use inline buttons with onClickAction - Attach actions directly to buttons
- Use loadingBehavior: "self" - Shows spinner on button during async operations
- Semantic variants - Match variant to action meaning (destructive for delete)
- Short labels - 1-3 words (e.g., "Submit", "Save Changes", "Delete Item")
- Include payload context - Add IDs or relevant data in the action payload