Primitive

Inline

Single-line alignment primitive for labels, metadata, controls, and actions.

Use Inline for non-wrapping horizontal relationships. Use Cluster when children may wrap.
layout
DOM renderImage render
InlineDefault
LiveAgentNeeds review

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Non-wrapping inline group.
LiveAgentNeeds review
Render state

Between

Title/action distribution.
Draft
Render state

Baseline

Baseline alignment for title and compact metadata.
Latency42ms
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
density'compact' | 'comfortable' | 'editorial'-Horizontal rhythm density.
align'start' | 'center' | 'end' | 'baseline' | 'stretch'-Cross-axis alignment.
justify'start' | 'center' | 'end' | 'between'-Main-axis distribution.
childrenReactNode-Inline content.