# Row

> Arranges children horizontally with configurable gap.

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

---

Arranges children horizontally with configurable gap.

## Preview

```
[child1] [child2] [child3]
```

## Usage

```go
node := models.WidgetNode{
    Type: models.WidgetNodeTypeRow,
    Gap:  2,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeBadge, Label: "✓", Variant: "secondary"},
        {Type: models.WidgetNodeTypeText, Value: "Step completed"},
    },
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"row"` | Node type | required |
| `gap` | `number` | Gap between children (Tailwind spacing scale) | `2` |
| `children` | `WidgetNode[]` | Child nodes to arrange horizontally | - |

### Gap Values

Gap uses Tailwind's spacing scale:

| Gap | Pixels | Use Case |
|-----|--------|----------|
| `0` | 0px | No gap |
| `1` | 4px | Tight spacing |
| `2` | 8px | Default spacing |
| `3` | 12px | Medium spacing |
| `4` | 16px | Large spacing |

## Examples

### Status Row

```go
{
    Type: models.WidgetNodeTypeRow,
    Gap:  2,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeBadge, Label: "●", Variant: "default"},
        {Type: models.WidgetNodeTypeCol, Gap: 1, Children: []models.WidgetNode{
            {Type: models.WidgetNodeTypeText, Value: "Processing", Variant: "title"},
            {Type: models.WidgetNodeTypeText, Value: "Analyzing your request", Variant: "muted"},
        }},
    },
}
```

### Button Row

```go
{
    Type: models.WidgetNodeTypeRow,
    Gap:  2,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeButton, Label: "Cancel", Variant: "outline"},
        {Type: models.WidgetNodeTypeButton, Label: "Confirm", Variant: "default"},
    },
}
```

### Inline Badges

```go
{
    Type: models.WidgetNodeTypeRow,
    Gap:  1,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeBadge, Label: "python", Variant: "outline"},
        {Type: models.WidgetNodeTypeBadge, Label: "async", Variant: "outline"},
        {Type: models.WidgetNodeTypeBadge, Label: "v2.0", Variant: "secondary"},
    },
}
```

## CSS Output

```css
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "row",
  gap: 2,
  children: [
    { type: "badge", label: "✓", variant: "secondary" },
    { type: "text", value: "Done" },
  ],
}
```

## Best Practices

1. **Use for inline content** - Badges with text, icon + label combinations
2. **Wrap in Col for lists** - Use Col to stack multiple Rows vertically
3. **Consistent gap** - Use `gap: 2` for most cases
4. **Align with items-center** - Row automatically centers items vertically