Inline
Horizontal layout primitive — a wrapping flex row with token-driven gap, align, and justify. Reach for it whenever you need things to flow left-to-right (RTL-safe — flows right-to-left under dir="rtl") with consistent spacing.
Plain <div>; the visual ordering matches DOM order so screen readers and keyboard tab-stops follow what you see. Wraps cleanly under dir="rtl".
import { Box, Inline } from '@arshad-shah/cynosure-react';
export default function Example() {
return (
<Inline gap="3" padding="4" background="bg.subtle" borderRadius="md" wrap>
<Box padding="3" background="bg.surface" borderRadius="sm">
One
</Box>
<Box padding="3" background="bg.surface" borderRadius="sm">
Two
</Box>
<Box padding="3" background="bg.surface" borderRadius="sm">
Three
</Box>
</Inline>
);
}
gap accepts any space token (or a responsive map). Use rowGap / columnGap independently when the row distance should differ from the column distance after wrapping.
Align and justify
Section titled “Align and justify”align is the cross-axis (vertical) alignment, justify is the main-axis (horizontal) distribution. Use justify="between" for toolbar-style “left items / right items” rows.
import { Box, Inline } from '@arshad-shah/cynosure-react';
export default function Example() {
return (
<Inline
gap="3"
justify="between"
align="center"
padding="4"
background="bg.subtle"
borderRadius="md"
>
<Box padding="2" background="bg.surface" borderRadius="sm">
Left edge
</Box>
<Box padding="2" background="bg.surface" borderRadius="sm">
Right edge
</Box>
</Inline>
);
}
Wrapping
Section titled “Wrapping”By default wrap="wrap" lets children flow onto a new line when the row overflows. Switch to wrap="nowrap" to force a single row that scrolls or clips.
import { Box, Inline } from '@arshad-shah/cynosure-react';
const ITEMS = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'];
export default function Example() {
return (
<Inline gap="2" wrap padding="4" background="bg.subtle" borderRadius="md" maxWidth="320px">
{ITEMS.map((label) => (
<Box key={label} padding="2" background="bg.surface" borderRadius="sm" minWidth="80px">
{label}
</Box>
))}
</Inline>
);
}
Recipes
Section titled “Recipes”- Toolbar / header bar:
<Inline justify="between" align="center" />with<Spacer />between groups. - Tag clouds: see
Wrap— it’s the wrap-first variant ofInlinetuned for variable-width chips. - For vertical flow inside an Inline (e.g. label above value pairs), nest a
<Stack>for each pair.