Balance Logo
Balance
Reckon Design System
Open playroom

Inline

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

Alternatives

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

Usage

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".

Gap

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