Balance Logo
Reckon Design System
Open playroom


The inline primitive is used to layout items that wrap within a parent container.
pnpm add @balance-web/inline
Import usage
import {
} from '@balance-web/inline';
  • Code
  • API


  • Columns — For horizontal layouts, with prescriptive and exact child widths
  • Stack — For vertical layouts
  • Flex — For custom layouts


Use the Inline primitive when you want to layout a group of elements together and allow them to wrap onto a new line.

This is particularly useful when you want the elements to naturally fill the horizontal space available, rather than implementing a specific grid. A good example of this might be a "tag cloud".


The spacing between children can be adjusted using the gap prop.

Edit in Playroom

Vertical alignment

Items of varying height can be vertically aligned using the alignY prop.

Horizontal alignment

Items can be aligned horizontally using the align prop.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo