Stable

Inline

Inline is a layout component to control the horizontal white space between elements. Inline allows you to apply standard spacing between direct children and define the alignment of these children.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab

Installation

bash

npm install @nib/layout

Usage

jsx

import {Inline} from '@nib/layout';

Do not style layout components

You must not apply styled-components to this component as it will interfere with the structure required for the current styling. This is true for all layout components.

Interactive demo

jsx

<Inline space={{xs: 2, md: 4}}>
  <PrimaryButton>Button on the left</PrimaryButton>
  <SecondaryButton>Button on the right</SecondaryButton>
</Inline>

<Inline space={{xs: 2, md: 4}}>
  <PrimaryButton>Button on the left</PrimaryButton>
  <SecondaryButton>Button on the right</SecondaryButton>
</Inline>

Props

Prop	Type	Default	Description
`space`	number or object	`0`	A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of `0...10`.
`collapseBelow`	string		A breakpoint value which defines when the inline structure should collapse to a vertical stack.
`align`	string	`left`	Horizontally align the inline containers. Must be one of `left`, `center`, or `right`.
`verticalAlign`	string	`top`	Vertically align the inline containers. Must be one of `top`, `center`, or `bottom`.
`spaceVertically`	boolean	`true`	Whether to apply vertical spacing with the `space` prop value.
`nowrap`	boolean	`false`	Whether to apply flex-wrap:nowrap or not

Considerations

The Inline component should be used to handle horizontal spacing between components. Mesh components should have no external margins to enable greater composibility with layout components. It is simpler, more efficient and predictable to leave the concern of spacing to a layout component than the individual children.

This component will wrap child components when required, and provide equivalent spacing between components on different rows.

Responsive

Often you will want less space between elements on mobile-sized screens than desktop. The space prop accepts an object of breakpoints to allow responsive spacing.

jsx

<Inline space={{xs: 4, md: 6}}>
  <PrimaryButton>Button on the left</PrimaryButton>
  <SecondaryButton>Button on the right</SecondaryButton>
</Inline>

Wrapping

By default, Inline will wrap its children when their width exceeds the parent and there is not enough space to render the inline children on one line. This behaviour can be changed by providing the nowrap prop, which will maintain this horizontal structure regardless of available space.

jsx

<GreyBox>
  <Inline space={3} verticalAlign="center" nowrap={true}>
    <Tag type="info">10</Tag>
    <Copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Copy>
  </Inline>
</GreyBox>

Stack

Edit this page