Inline
Preview appears after the next Storybook update.
<Inline />When to use
Use it for
- Rows of related small items: badges, tags, buttons, meta text.
- justify="between" for page and card headers: title at the start, actions at the end.
- wrap={false} only when the row must stay on one line and can scroll or truncate.
Not for
- A vertical list: use Stack.
- Columns that must line up across rows: use Grid or Table.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Let rows wrap
Wrapping keeps every item reachable at narrow widths and at 200% zoom.
Fixed widths inside an Inline
Fixed widths fight the wrap and overflow on phones. Let content size the items.
Accessibility
- A plain div by default; use render for a list (<ul />) when the items are a list.
- Wrapping never reorders items, so the visual and tab order match.
Content guidelines
- Not applicable: Inline holds no copy of its own.
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/Inline/Inline.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Flex row
.inline
Motion and interaction
Inline does not animate: it only lays out other components.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/Inline/Inline.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
gap | SpaceToken | '2' | Space between children, a key of the space scale. Default `2` (8px). |
align | FlexAlign | 'center' | Cross-axis alignment. Default `center`. |
justify | FlexJustify | 'start' | Main-axis distribution. Default `start`. |
wrap | boolean | true | Wrap onto new lines when space runs out. Default true. |
render | ReactElement | none | Render another element, for example `<ul />`. |
Playground
Change the props and see the real Inline update. Controls are generated from the TypeScript props; nothing here changes the system.
<Inline />Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Inline in Storybook).
Embed Storybook stories here (2)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Default
AllStates
From the code Generated from the component, not editable here.
Changelog
- New
Missing pieces now include a library component restyled from outside with tokens only: CSS on a class the component carries, often on a state selector such as
[aria-pressed='true'], or a token-only inline style tied to itspressedprop, reads "IconButton: restyled when pressed" with what changed (fill (icon) currentColor) and arestylemark that sets it apart from hand-picked valuesv1.0.0, Nov 11, 2026
- New
Textarea gets
appearance="inline"for editing existing text in place: no border, no resize handle, the surrounding font, size and line height, a height that fits the content (field-sizing: content, measured without moving the page where it is not supported), a fill and hairline on hover and the DS focus ring on focusv1.0.0, Nov 11, 2026
- New
Layout utilities: Stack, Inline, Grid (fixed columns or auto-fit by minimum item width) and Container (token widths and gutters)
v1.0.0, Nov 11, 2026
- Fix
Component specs for Figma: inline custom properties set under a computed key or through a Base UI render element reach the CSS, a number held by a custom property and 1lh are read in calc() (a Textarea of 3 rows is 81px in Figma, as in code)
v1.0.0, Nov 11, 2026