Inline

States

Inline is not interactive. By default it renders a <div>; its state does not change with mouse, keyboard or touch.

State	Support	Visual change
Default	Yes	Horizontal flow; gap from gap, alignment from align, distribution from justify, wrapping from wrap
Hover	None	None; the element does not react to the pointer
Pressed	None	None; the element cannot be clicked
Focus	None	None; the element takes no focus and draws no focus ring
Disabled	None	None; it has no action to disable
Selected	None	None; it cannot be selected

Measurements

Inline has no fixed size of its own; its height comes from its children, its width from its container.

Property	Value	Token
Space between children (gap)	none 0, xxs 2, xs 4, sm 6, md 8, lg 12, xl 16, 2xl 20, 3xl 24, 4xl 32, 5xl 40, 6xl 48, 7xl 56 px; default sm	space-{name}
Space between rows	Same as gap when wrapping is on	space-{name}
Cross-axis alignment	center (default), start, end, baseline	-
Main-axis distribution	start (default), center, end, between	-
Wrapping	true (default): flex-wrap; false: flex-nowrap	-

Tokens

Values are shown for the selected brand; change the brand from the top bar.

Token	Light mode	Dark mode
--bigbang-space-xxs	2px2px2px	2px2px2px
--bigbang-space-xs	4px4px4px	4px4px4px
--bigbang-space-sm	6px6px6px	6px6px6px
--bigbang-space-md	8px8px8px	8px8px8px
--bigbang-space-lg	12px12px12px	12px12px12px
--bigbang-space-xl	16px16px16px	16px16px16px
--bigbang-space-2xl	20px20px20px	20px20px20px
--bigbang-space-3xl	24px24px24px	24px24px24px
--bigbang-space-4xl	32px32px32px	32px32px32px
--bigbang-space-5xl	40px40px40px	40px40px40px
--bigbang-space-6xl	48px48px48px	48px48px48px
--bigbang-space-7xl	56px56px56px	56px56px56px

Motion and interaction

Interaction	Motion	Reduced motion
Hover, press, focus	None: Inline is not interactive	Nothing to reduce
Enter and exit	None: Inline uses no duration or easing token; content appears and leaves at once	Nothing to reduce
Layout change	None: the layout changes without a transition when the viewport width changes	Nothing to reduce

Inline uses no motion preset; the motion of its children belongs to their own components. For details, see the Motion page.