Component reference
Inline
Lays out children in a row that wraps, with a gap from the spacing scale.
Preview
Wrapping and alignment
Status and actions share one line; when space runs out they wrap as whole units without compressing button text.
render: () => (
<Measure width="content">
<Stack gap="relaxed">
<Inline justify="between" align="baseline">
<strong>Work awaiting review</strong>
<small>3 items · last updated at 10:24</small>
</Inline>
<Inline gap="compact">
<Button>Review all changes</Button>
<Button variant="outline">View the full verification record</Button>
<Button variant="quiet">Keep the current results for now</Button>
</Inline>
<Inline align="start">
<Status state="warning" label="Needs review" />
<Stack gap="compact">
<strong>Check the change scope</strong>
<span>Confirm that no files outside the current task are included.</span>
</Stack>
</Inline>
</Stack>
</Measure>
)Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { Inline } from "meowtail";
<Inline justify="between" align="baseline">
<strong>Work awaiting review</strong>
<small>3 items · last updated at 10:24</small>
</Inline>API reference
Props
| Prop | Type | Default |
|---|---|---|
gap | "none" | "compact" | "normal" | "relaxed" | "normal" |
rowGap | "auto" | "none" | "compact" | "normal" | "relaxed" | "auto" |
columnGap | "auto" | "none" | "compact" | "normal" | "relaxed" | "auto" |
as | LayoutElement | "div" |
align | LayoutAlign | "center" |
justify | LayoutJustify | "start" |
wrap | boolean | true |
Also takes className, children and the attributes and events of its root element.
DOM parts
root
Registry
The component is registered as inline in the meowtail component registry.