# Divider

> Separate content with a thin line.

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

---

Separate content with a thin line.

## Preview

```
Above
─────────────
Below
```

## Usage

```go
node := models.WidgetNode{
    Type:    models.WidgetNodeTypeDivider,
    Spacing: 2,
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"divider"` | Node type | required |
| `spacing` | `number \| string` | Outer spacing applied above and below the divider | - |
| `color` | `string \| ThemeColor` | Color of the divider line | `"default"` |
| `size` | `number \| string` | Thickness of the divider line in pixels | `1` |
| `flush` | `boolean` | Flush the divider to the edge of its container | `false` |

### Color Tokens

- `default` - Standard border color
- `subtle` - Lighter, less prominent
- `strong` - Darker, more prominent

## Examples

### Basic Divider

```go
{
    Type: models.WidgetNodeTypeCol,
    Gap:  2,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeText, Value: "Section 1"},
        {Type: models.WidgetNodeTypeDivider},
        {Type: models.WidgetNodeTypeText, Value: "Section 2"},
    },
}
```

### With Custom Spacing

```go
{Type: models.WidgetNodeTypeDivider, Spacing: 4}
```

### Subtle Divider

```go
{Type: models.WidgetNodeTypeDivider, Color: "subtle"}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "divider",
  spacing: 2,
  color: "default",
}
```

## Best Practices

1. **Use sparingly** - Too many dividers create visual clutter
2. **Prefer spacing** - Often `gap` on Col is sufficient
3. **Use for logical sections** - Divide distinct content groups