Components

Inline

Lays children out horizontally, wraps them to a new row when space runs out and sets the space between them with a token.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Inline } from '@bigbang/ui';
Source: Inline.tsx
Storybook: Inline · Playground

Inline is in the @bigbang/ui package. Installation and style files are the same as for Button; for details, see the Button code tab.

import { Inline, Button } from '@bigbang/ui';

<Inline gap="md">
  <Button>Primary button</Button>
  <Button variant="secondary">Secondary button</Button>
</Inline>;

Props

gap

Description: Space between children, from the space.* scale; the same gap is used between wrapped rows.
Type: SpaceToken
Default: 'sm'

align

Description: Cross-axis alignment. baseline lines up text of different sizes.
Type: 'start' | 'center' | 'end' | 'baseline'
Default: 'center'

justify

Description: Main-axis distribution. between pushes the first and last child to the edges.
Type: 'start' | 'center' | 'end' | 'between'
Default: 'start'

wrap

Description: Lets children wrap onto new rows when the row is too narrow.
Type: boolean
Default: true

render

Description: Renders another element, such as <ul> or <nav>. Defaults to a <div>.
Type: ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Description: For layout only: width, grid placement, margins. Do not use it to change the gap or the direction.
Type: string

children

Description: The children, in reading order.
Type: ReactNode

Native <div> attributes (id, role, aria-*, data-*, style) are passed through. ref is attached to the rendered element.

Data attributes

data-component="inline": on the root element.