Inline

The Inline component arranges related content horizontally with consistent spacing, alignment, and wrapping.

Usage & Examples

Toolbar Row

Project members
DesignEngineering
toolbar-row.tsx
<Inline gap="sm" align="center" justify="between">
  <strong>Project members</strong>
  <Inline gap="xs">
    <Badge>Design</Badge>
    <Badge>Engineering</Badge>
    <Button size="small">Invite</Button>
  </Inline>
</Inline>

Props API

9 props
Columns
Inline props API
Default
Description
alignLayoutAlignNoprops—Align prop for LayoutPrimitive.
asElementTypeNoprops—As prop for LayoutPrimitive.
childrenReactNodeNoprops—Content rendered inside the component.
classNamestringNostyling—Additional CSS class names for the component root.
data-testidstringNotesting—Test id used to identify the component in tests.
gapLayoutGapNoprops"md"Gap.
justifyLayoutJustifyNoprops—Justify prop for LayoutPrimitive.
testIdstringNoprops—Test id used to identify the component in tests.
wrapbooleanNopropstrueWrap.