# Text

> Displays plain text with optional styling variants.

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

---

Displays plain text with optional styling variants.

## Preview

```
Regular text
```

## Usage

```go
node := models.WidgetNode{
    Type:  models.WidgetNodeTypeText,
    Value: "Hello, world!",
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"text"` | Node type | required |
| `value` | `string` | Text content to display | `""` |
| `variant` | `string` | Visual style variant | `"default"` |

### Variants

| Variant | Description | CSS Classes |
|---------|-------------|-------------|
| `default` | Standard text | `text-sm` |
| `title` | Prominent heading text | `text-sm font-medium` |
| `bold` | Emphasized text | `text-sm font-medium` |
| `muted` | De-emphasized secondary text | `text-xs text-muted-foreground` |
| `small` | Compact text | `text-xs` |

## Examples

### Default Text

```go
{Type: models.WidgetNodeTypeText, Value: "Regular text content"}
```

### Title Text

```go
{Type: models.WidgetNodeTypeText, Value: "Step Title", Variant: "title"}
```

### Muted Text

```go
{Type: models.WidgetNodeTypeText, Value: "Secondary description", Variant: "muted"}
```

### Visual Hierarchy Example

Create clear visual hierarchy by combining variants:

```go
children := []models.WidgetNode{
    {
        Type: models.WidgetNodeTypeCol,
        Gap:  1,
        Children: []models.WidgetNode{
            {Type: models.WidgetNodeTypeText, Value: "Task Complete", Variant: "title"},
            {Type: models.WidgetNodeTypeText, Value: "Your report has been generated successfully.", Variant: "muted"},
        },
    },
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "text",
  value: "Hello, world!",
  variant: "muted",
}
```

## Best Practices

1. **Use variants for hierarchy** - Combine `title` and `muted` for clear information hierarchy
2. **Keep text concise** - Long text should use the `markdown` node type
3. **Use muted for secondary info** - Descriptions, timestamps, and metadata