# Caption

> Supplemental text for descriptions, hints, or metadata.

**URL:** https://inference.sh/docs/agents/widgets/caption
**Last updated:** 2026-09-18

---

Supplemental text for descriptions, hints, or metadata.

## Preview

```
Default caption
Secondary color, smaller size
```

## Usage

```go
node := models.WidgetNode{
    Type:  models.WidgetNodeTypeCaption,
    Value: "Last updated 2 hours ago",
}
```

## 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 color
- `primary` - Primary brand color
- `emphasis` - Emphasized text
- `secondary` - Muted/secondary text (default for Caption)
- `tertiary` - Even more muted
- `success` - Success green
- `warning` - Warning yellow
- `danger` - Error red

## Examples

### Basic Caption

```go
{Type: models.WidgetNodeTypeCaption, Value: "Optional field"}
```

### Title with Caption

```go
{
    Type: models.WidgetNodeTypeCol,
    Gap:  1,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeTitle, Value: "Profile"},
        {Type: models.WidgetNodeTypeCaption, Value: "Manage your personal information"},
    },
}
```

### Success Caption

```go
{Type: models.WidgetNodeTypeCaption, Value: "Changes saved successfully", Color: "success"}
```

### Form Field Hint

```go
{
    Type: models.WidgetNodeTypeCol,
    Gap:  1,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeInput, Name: "password", Placeholder: "Password"},
        {Type: models.WidgetNodeTypeCaption, Value: "Must be at least 8 characters"},
    },
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "caption",
  value: "Helpful hint",
  size: "sm",
  color: "secondary",
}
```

## Best Practices

1. **Use for context** - Explain or clarify the main content
2. **Keep short** - Captions should be 1-2 sentences max
3. **Secondary by default** - Use muted color for non-essential info
4. **Pair with Title** - Great for section descriptions