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 Action: &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" |
action | WidgetAction | Action to trigger on click | - |
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 Action: &models.WidgetAction{6 Type: "approve",7 Payload: map[string]interface{}{8 "request_id": "123",9 },10 },11}Button Row
go
1{2 Type: models.WidgetNodeTypeRow,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeButton, Label: "Cancel", Variant: "outline"},6 {Type: models.WidgetNodeTypeButton, Label: "Confirm", Variant: "default"},7 },8}Destructive Button
go
1{2 Type: models.WidgetNodeTypeButton,3 Label: "Delete",4 Variant: "destructive",5 Action: &models.WidgetAction{6 Type: "delete",7 Payload: map[string]interface{}{"item_id": "456"},8 },9}TypeScript
typescript
1const node: WidgetNode = {2 type: "button",3 label: "Click Me",4 variant: "default",5 action: {6 type: "click",7 payload: { id: 123 },8 },9}Best Practices
- Use action bar for primary actions - Use
Widget.Actionsfor main buttons - Inline buttons for contextual actions - Use button nodes within content
- Semantic variants - Match variant to action meaning
- Short labels - 1-3 words (e.g., "Submit", "Save Changes", "Delete Item")
- Disabled during submission - Buttons are automatically disabled when submitting