A small label for status or metadata.
Preview
code
1[✓] [pending] [error]Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeBadge,3 Label: "success",4 Variant: "secondary",5}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "badge" | Node type | required |
label | string | Badge text content | required |
variant | string | Visual style variant | "default" |
Variants
| Variant | Description | Use Case |
|---|---|---|
default | Primary/prominent style | Active items, current status |
secondary | Subdued style | Completed items, secondary info |
outline | Border only, minimal | Pending items, neutral status |
destructive | Error/danger style | Errors, failed states |
Examples
Status Indicators
go
1// Completed2{Type: models.WidgetNodeTypeBadge, Label: "✓", Variant: "secondary"}3 4// In Progress5{Type: models.WidgetNodeTypeBadge, Label: "●", Variant: "default"}6 7// Pending8{Type: models.WidgetNodeTypeBadge, Label: "○", Variant: "outline"}9 10// Failed11{Type: models.WidgetNodeTypeBadge, Label: "✗", Variant: "destructive"}Text Labels
go
1{Type: models.WidgetNodeTypeBadge, Label: "new", Variant: "default"}2{Type: models.WidgetNodeTypeBadge, Label: "beta", Variant: "secondary"}3{Type: models.WidgetNodeTypeBadge, Label: "deprecated", Variant: "outline"}With Text Content
Combine with text in a row:
go
1{2 Type: models.WidgetNodeTypeRow,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeBadge, Label: "✓", Variant: "secondary"},6 {Type: models.WidgetNodeTypeText, Value: "Task completed"},7 },8}TypeScript
typescript
1const node: WidgetNode = {2 type: "badge",3 label: "new",4 variant: "default",5}Best Practices
- Keep labels short - 1-2 characters for icons, 1-2 words for text
- Use semantic variants - Match variant to meaning (destructive for errors)
- Combine with Row - Place badges inline with text content
- Lowercase text - Badge labels are automatically lowercased in the UI