Components / Structure

Inline

Lays children out in a row with a gap from the space scale. For a column, use Stack; Inline is a Stack in a row, with its items centred and an optional wrap.

Source Edit this page

Row with token gap

When to use

Toolbars, button rows, badge lists, label-and-value pairs.
Use wrap when items may not fit on one line.

Usage

tsx

import { Inline } from "@arshad-shah/cynosure";

<Inline gap="4" align="center">
  <Badge>Draft</Badge>
  <Button>Publish</Button>
</Inline>
<Inline as="ul" gap="2" wrap justify="between">…</Inline>
<Inline padding="4" paddingInline="6">…</Inline>

gap is a space token from "0" to "10" (default "3"). align is start, center, end, stretch or baseline. justify is start, center, end or between. as picks a neutral element (div, section, ul, ol, nav, aside, header, footer, span).

Defaults and layout props

Padding

padding pads all four sides with a space token. paddingInline (the sides) and paddingBlock (top and bottom) each win over padding for their axis, and "0" counts as a value. The padding is inside the row's width.

tsx

<Inline padding="4" paddingInline="6">…</Inline>

Padding uses space tokens

Taking the free space

A child Stack or Inline with grow takes the free space in the row, so the items after it sit at the end (a status bar). Inline also takes shrink, fill, minSize and overflow; see Stack for app shells.

tsx

<Inline gap="2">
  <Text>main</Text>
  <Inline grow>…</Inline>
  <Text>Ln 1, Col 1</Text>
</Inline>

Grow pushes the rest to the end in rtl

Props

Every prop of Inline
Prop	What it does	Type	Default
`gap`	Space token between children.	`Space`
`align`	Cross-axis alignment of children. They are centred when it is not set.	`"start" \| "end" \| "center" \| "stretch" \| "baseline"`
`justify`	How children are spread along the row.	`"start" \| "end" \| "center" \| "between"`
`wrap`	Wrap onto new lines when space runs out.	`boolean`
`as`	Neutral layout element to render (never an interactive one).	`"div" \| "section" \| "aside" \| "ul" \| "ol" \| "nav" \| "header" \| "footer" \| "span"`
`className`	Added to the root element, for layout.	`string`
`style`	Layout only.	`CSSProperties`
`children`	The elements to lay out in a row.	`ReactNode`
`data-testid`	Set on the root element, for tests.	`string`
`padding`	Space token of padding on all four sides of the box. Default: none.	`Space`	`none`
`paddingInline`	Space token of padding at the inline start and end (left and right in English). Wins over `padding`.	`Space`
`paddingBlock`	Space token of padding at the block start and end (top and bottom in English). Wins over `padding`.	`Space`
`hideBelow`	Hidden while the window is narrower than this breakpoint (`md`: below 45rem).	`"sm" \| "md" \| "lg" \| "xl"`
`hideAbove`	Hidden from this breakpoint upwards (`md`: 45rem and wider).	`"sm" \| "md" \| "lg" \| "xl"`
`grow`	Take the free space along the parent's row or column (`flex-grow: 1`), pushing the boxes after it to the end.	`boolean`
`shrink`	`false` keeps the box at its own size when the parent's row or column runs out of room. Default true.	`boolean`	`true`
`fill`	As wide and as tall as the parent's content box (`100%` both ways).	`boolean`
`minSize`	`"0"` lets the box be smaller than its content, so a child can scroll instead of overflowing the page. A flex or grid child is otherwise at least as tall (and wide) as what it holds. Default: the CSS automatic minimum.	`"0"`	`the CSS automatic minimum`
`overflow`	What happens to content that does not fit: `hidden` clips it, `auto` scrolls it, `visible` lets it overflow (the default). A box that scrolls content with nothing focusable in it should be a ScrollArea with a `label`, so keyboard users can scroll it.	`BoxOverflow`

Generated from the type definitions in @arshad-shah/cynosure 0.5.0.

Notes

as never renders an interactive element.
className and style are for layout only.
The gap and the padding are space tokens (--cy-space-*), so they follow the theme's spacing.
A nested Inline has no padding unless it asks for it; it never inherits its parent's.

Stack · Card · Badge

These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.

When to useLink to "When to use"

UsageLink to "Usage"

PaddingLink to "Padding"

Taking the free spaceLink to "Taking the free space"

PropsLink to "Props"

NotesLink to "Notes"