# Spacer

> Flexible space to separate content within a layout.

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

---

Flexible space to separate content within a layout.

## Preview

```
[A] ─────────── [B]
```

## Usage

```go
node := models.WidgetNode{
    Type:    models.WidgetNodeTypeSpacer,
    MinSize: 16,
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"spacer"` | Node type | required |
| `minSize` | `number \| string` | Minimum size the spacer should occupy along the flex direction | - |

## Examples

### Push Items Apart

```go
{
    Type: models.WidgetNodeTypeRow,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeBadge, Label: "Left", Variant: "secondary"},
        {Type: models.WidgetNodeTypeSpacer, MinSize: 16},
        {Type: models.WidgetNodeTypeBadge, Label: "Right", Variant: "secondary"},
    },
}
```

### Flexible Space

When used without `minSize`, the spacer will expand to fill available space:

```go
{
    Type: models.WidgetNodeTypeRow,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeText, Value: "Title"},
        {Type: models.WidgetNodeTypeSpacer},
        {Type: models.WidgetNodeTypeButton, Label: "Action"},
    },
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "spacer",
  minSize: 16,
}
```

## Best Practices

1. **Use in Row layouts** - Most useful for horizontal spacing
2. **Prefer gap for uniform spacing** - Use `gap` on Row/Col for consistent spacing
3. **Use for push layouts** - Perfect for "left/right" or "header/actions" layouts