Supplemental text for descriptions, hints, or metadata.
Preview
code
1Default caption2Secondary color, smaller sizeUsage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeCaption,3 Value: "Last updated 2 hours ago",4}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "caption" | Node type | required |
value | string | Text content to display | required |
size | string | Size token: sm, md, lg | "md" |
weight | string | Font weight: normal, medium, semibold, bold | "normal" |
color | string | ThemeColor | Text color | "secondary" |
textAlign | string | Horizontal alignment: start, center, end | "start" |
truncate | boolean | Truncate overflow with ellipsis | false |
maxLines | number | Limit to maximum lines | - |
Color Tokens
prose- Default text colorprimary- Primary brand coloremphasis- Emphasized textsecondary- Muted/secondary text (default for Caption)tertiary- Even more mutedsuccess- Success greenwarning- Warning yellowdanger- Error red
Examples
Basic Caption
go
1{Type: models.WidgetNodeTypeCaption, Value: "Optional field"}Title with Caption
go
1{2 Type: models.WidgetNodeTypeCol,3 Gap: 1,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeTitle, Value: "Profile"},6 {Type: models.WidgetNodeTypeCaption, Value: "Manage your personal information"},7 },8}Success Caption
go
1{Type: models.WidgetNodeTypeCaption, Value: "Changes saved successfully", Color: "success"}Form Field Hint
go
1{2 Type: models.WidgetNodeTypeCol,3 Gap: 1,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeInput, Name: "password", Placeholder: "Password"},6 {Type: models.WidgetNodeTypeCaption, Value: "Must be at least 8 characters"},7 },8}TypeScript
typescript
1const node: WidgetNode = {2 type: "caption",3 value: "Helpful hint",4 size: "sm",5 color: "secondary",6}Best Practices
- Use for context - Explain or clarify the main content
- Keep short - Captions should be 1-2 sentences max
- Secondary by default - Use muted color for non-essential info
- Pair with Title - Great for section descriptions