BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Inline

Stable
Edit in Studio

Lays out children in a row with a token gap and wraps them when space runs out: badges, button rows, metadata.

Updated Oct 16, 2026

Rendered with the real component
Light
colorspaceradius
Dark
colorspaceradius

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.

colorspaceradiusmotion
Do

Let rows wrap

Wrapping keeps every item reachable at narrow widths and at 200% zoom.

item
Don't

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.

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.

1 tokens 0 semantic or component, change with theme and brand 1 from the shared scales

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

Changelog

  • New

    Actions: Button gains `danger` variant, `lg` size, `iconStart`, `iconEnd`, `fullWidth` and `render` (a link stays a link); loading keeps focus. New IconButton, ButtonGroup (spaced or attached) and Link (inline, standalone, subtle, external).

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • New

    Layout utilities: Stack, Inline, Grid (fixed columns or auto-fit by minimum item width) and Container (token widths and gutters). Gaps only accept space-scale keys.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes