Inline
A row that wraps and gaps predictably, and collapses to a column on narrow screens.
@luc/ui/layoutExamples
Gaps and alignment
A row that wraps. The gap is the same scale `Grid` and `Stack` use, and alignment is one prop rather than a class on each item.
Return
Volatility
Sharpe
Return
Volatility
Sharpe
Return
Volatility
Sharpe
Return
Volatility
Sharpe
<Inline gap="xs">…</Inline>
<Inline gap="sm">…</Inline>
<Inline gap="md">…</Inline>
<Inline gap="lg">…</Inline>Alignment
`baseline` is the one that earns its keep: a caption, a value and a chip sit on one line of type instead of on one box edge.
Lookback
200 weeks
weeks
Lookback
200 weeks
weeks
Lookback
200 weeks
weeks
<Inline align="center">…</Inline>
<Inline align="baseline">…</Inline>
<Inline align="end">…</Inline>Distribution
Justification is what turns a cluster into a row: `between` puts the label on one edge and the action on the other, which is the header pattern a card repeats forever.
61 instruments
61 instruments
61 instruments
61 instruments
<Inline justify="start">…</Inline>
<Inline justify="center">…</Inline>
<Inline justify="end">…</Inline>
<Inline justify="between">…</Inline>Wrapping
`wrap` is the difference between a row that grows downwards and a row that keeps its height. Both boxes below are narrower than their contents on purpose.
<Inline wrap>…</Inline>
<Inline wrap={false}>…</Inline>A metadata row
The composition it was written for: label and value pairs, a vertical rule between groups, and a status badge at the end — all on one line that wraps when it must.
Lookback
200 weeks
Universe
US large cap
Live<Inline gap="md" align="center" wrap>
<Text variant="caption" tone="muted">Lookback</Text>
<Text variant="body">200 weeks</Text>
<Separator orientation="vertical" className="h-4" />
<Text variant="caption" tone="muted">Universe</Text>
<Text variant="body">US large cap</Text>
<Separator orientation="vertical" className="h-4" />
<Badge tone="positive" size="sm">Live</Badge>
</Inline>Usage
import { Inline } from "@luc/ui/layout";<Inline gap="sm" align="baseline">
<Text variant="caption" tone="muted">Lookback</Text>
<Text variant="body">200 weeks</Text>
</Inline>One row, one gap, one alignment — and `justify` when the row has two ends to hold apart.
Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Inline | 6 documented props | ({ className, gap, align, justify, wrap, as, ...props }: InlineProps) => import("@types/react").JSX.Element |
Inline props
Type: InlineProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
align? | Align | undefined | — | |
as? | "div" | "label" | "li" | "nav" | "span" | "ul" | "footer" | "header" | undefined | — | |
children? | ReactNode | — | |
gap? | Gap | undefined | — | |
justify? | Justify | undefined | — | |
wrap? | boolean | undefined | — | Allow items to wrap onto multiple lines. Default `true`. |
Guidelines
Do
- Use `Inline` for a row of things that belong together: a label and its value, a group of actions, a set of filters.
- Let a row whose contents can grow wrap (`wrap`, the default), and keep `wrap={false}` for a toolbar that must not reflow.
- Prefer `align="baseline"` when the row is text: it puts a caption, a value and a unit on one line of type.
Don't
- Do not use an `Inline` where the order is meaningful and should be announced — an ordered sequence is `Stack as="ol"`.
- Do not fix the height of a wrapping row: the wrap is the point, and the second line gets clipped.
- Do not spread three or more peers with `justify="between"`: it turns a cluster into a bar with holes in it.
Accessibility
A row is a `div` (or whatever `as` names) with flex on it: the items are announced in source order, and nothing becomes a landmark. A row of interactive controls that is one group needs a name — `role="group"` with an `aria-label`, or the Actions family's `Toolbar`, which brings the roving-focus contract with it.
Family
Layout
Space, rhythm and the surfaces a page is made of.
10 documented entries in this family. Open the family index
Related