---
title: Inline
description: >-
  A horizontal layout primitive for inline content, with configurable spacing
  between children.
---

# Inline

## Overview

Inline is a layout component that arranges content in a horizontal flow, tags, metadata, or compact groups of related items. It helps users scan connected content together while preserving consistent spacing and wrapping.

```tsx
<Inline gap={4}>
	<div style={{ height: 40, width: 40 }} />
	<div style={{ height: 40, width: 160 }} />
	<div style={{ height: 40, width: 20 }} />
</Inline>
```

## Usage Guidelines

- **Use for related items:** Use Inline to group related content, such as metadata, tags, actions, or compact control groups. Each item should still make sense in sequence.
- **Prefer short content:** Keep inline items concise so the row stays easy to scan and wraps cleanly on smaller screens. Move longer content into Stack or a larger layout.
- **Let Inline manage spacing:** Use the `gap` prop for separation between items. Avoid adding one-off margins to children.

## API Reference

### `Inline`

| Prop        | Type               | Default     |
| ----------- | ------------------ | ----------- |
| `gap`       | `number \| string` | `undefined` |
| `children`  | `ReactNode`        | `undefined` |
| `className` | `string`           | `undefined` |

## Examples

### Metadata

Use Inline to arrange compact, related metadata in a single row while preserving consistent spacing and natural wrapping.

```tsx
<Inline gap={3}>
	<Text size="small">Draft</Text>
	<Text size="small">Updated 2 hours ago</Text>
	<Text size="small">Marketing</Text>
	<Text size="small">3 comments</Text>
</Inline>
```