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.

<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

Examples

Metadata

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

<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>