Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.0.0
@intility/bifrost-react@6.1.1
@intility/bifrost-react-datepicker@6.0.1
@intility/bifrost-react-select@6.0.0
/
/
/
Inline

Inline

import Inline from "@intility/bifrost-react/Inline";

Inline layout

By default, child elements of <Inline> will be displayed top-aligned to the left, with a 12px gap.

Elements will wrap to next line if there's not enough room on one line.

<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>

<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>
Element
Element

Custom gap

Use the gap property to set custom spacing, accepts a number in px or a CSS length string.

<Inline
  gap={40} // equivalent to gap='40px'
>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>

<Inline
  gap={40} // equivalent to gap='40px'
>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>
Element
Element

Vertical alignment

When you have elements with differing heights, the default behaviour is to align them to the top.

Element
with
multiple
lines
Top (default)

Use the align prop to align items to bottom, center, or top (default).

<Inline align="center" />

<Inline align="center" />
Element
with
multiple
lines
Center
<Inline align="bottom" />

<Inline align="bottom" />
Element
with
multiple
lines
Bottom

Inline.Separator

The <Inline.Separator /> component will push elements away from it.

Split

Placed between elements will push them to each side.

<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>

<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>
Element
Element
<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>

<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>
Element
Element
Element
<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>

<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>
Element
Element
Element

Three-way split

Having multiple separators will create equal spaces.

<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>

<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>
Element
Element
Element

Push to right

A separator placed as first child will push the other elements to the right.

<Inline>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>

<Inline>
  <Inline.Separator />
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>
Element
Element

Inline.Stretch

Wrapping an element in <Inline.Stretch> will stretch it to fill available space.

<Inline>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>

<Inline>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>
Element in Stretch
Element
<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
</Inline>

<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
</Inline>
Element
Element in Stretch
<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>

<Inline>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>
Element
Element in Stretch
Element
<Inline>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
</Inline>

<Inline>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
  <Inline.Stretch>
    <div className="bfc-base-3-bg bf-padding">Element in Stretch</div>
  </Inline.Stretch>
</Inline>
Element in Stretch
Element in Stretch
Element in Stretch

Avoid extra DOM node

Using <Inline.Stretch> introduces an extra element in the document tree. If you want to avoid this you can use the .bfl-inline-stretch CSS class instead:

<Inline>
  <div className="bfl-inline-stretch bfc-base-3-bg bf-padding">
    Element with .bfl-inline-stretch
  </div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>

<Inline>
  <div className="bfl-inline-stretch bfc-base-3-bg bf-padding">
    Element with .bfl-inline-stretch
  </div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Inline>
Element with .bfl-inline-stretch
Element

Responsive layout

The <Inline> component will attempt to wrap elements if there isn't enough width which is not ideal in most cases.

Instead, using our breakpoint CSS classes you can have different layouts displayed for certain screen widths.

Let's say you have three buttons, which should be stacked on top of eachother in a Grid for the smallest screens (up to small breakpoint, 600px screen width), but Inline for wider screens.

Resize your window (to below 600px width) to see it in action:

<Grid className='to-small'>
  <Button>Button in Grid</Button>
  <Button>Button in Grid</Button>
  <Button>Button in Grid</Button>
</Grid>
<Inline className='from-small'>
  <Button>Inline Button</Button>
  <Button>Inline Button</Button>
  <Button>Inline Button</Button>
</Inline>

<Grid className='to-small'>
  <Button>Button in Grid</Button>
  <Button>Button in Grid</Button>
  <Button>Button in Grid</Button>
</Grid>
<Inline className='from-small'>
  <Button>Inline Button</Button>
  <Button>Inline Button</Button>
  <Button>Inline Button</Button>
</Inline>

More examples

Buttons

<Inline>
  <Inline.Separator />
  <Button>Cancel</Button>
  <Button variant="filled">OK</Button>
</Inline>

<Inline>
  <Inline.Separator />
  <Button>Cancel</Button>
  <Button variant="filled">OK</Button>
</Inline>

<Inline>
  <Button>Previous</Button>
  <Inline.Separator />
  <Button>Next</Button>
</Inline>

<Inline>
  <Button>Previous</Button>
  <Inline.Separator />
  <Button>Next</Button>
</Inline>

<Inline>
  <Button>Button</Button>
  <Inline.Stretch>
    <Button>Button in Stretch</Button>
  </Inline.Stretch>
</Inline>

<Inline>
  <Button>Button</Button>
  <Inline.Stretch>
    <Button>Button in Stretch</Button>
  </Inline.Stretch>
</Inline>

<Inline>
  <Button>Button</Button>
  <Button className="bfl-inline-stretch">
    Button with .bfl-inline-stretch
  </Button>
</Inline>

<Inline>
  <Button>Button</Button>
  <Button className="bfl-inline-stretch">
    Button with .bfl-inline-stretch
  </Button>
</Inline>

<Inline>
  <Inline.Stretch>
    <Button>Button in Stretch</Button>
  </Inline.Stretch>
  <Inline.Stretch>
    <Button>Button in Stretch</Button>
  </Inline.Stretch>
</Inline>

<Inline>
  <Inline.Stretch>
    <Button>Button in Stretch</Button>
  </Inline.Stretch>
  <Inline.Stretch>
    <Button>Button in Stretch</Button>
  </Inline.Stretch>
</Inline>

Input and button

Labelled inputs are taller than a button, so lets align='bottom' them.

<Inline align="bottom">
  <Input label="Input with label" />
  <Button>Button</Button>
</Inline>

<Inline align="bottom">
  <Input label="Input with label" />
  <Button>Button</Button>
</Inline>

<Inline align="bottom">
  <Inline.Separator />
  <Input label="Input with label" />
  <Button>Button</Button>
</Inline>

<Inline align="bottom">
  <Inline.Separator />
  <Input label="Input with label" />
  <Button>Button</Button>
</Inline>

<Inline align="bottom">
  <Inline.Stretch>
    <Input label="Input in Stretch" />
  </Inline.Stretch>
  <Button>Button</Button>
</Inline>

<Inline align="bottom">
  <Inline.Stretch>
    <Input label="Input in Stretch" />
  </Inline.Stretch>
  <Button>Button</Button>
</Inline>

<Inline align="bottom">
  <Input
    className="bfl-inline-stretch"
    label="Input with .bfl-inline-stretch"
  />
  <Button>Button</Button>
</Inline>

<Inline align="bottom">
  <Input
    className="bfl-inline-stretch"
    label="Input with .bfl-inline-stretch"
  />
  <Button>Button</Button>
</Inline>

Checkboxes

<Inline>
  <Checkbox label="Checkbox" />
  <Checkbox label="Checkbox" />
  <Checkbox label="Checkbox" />
</Inline>

<Inline>
  <Checkbox label="Checkbox" />
  <Checkbox label="Checkbox" />
  <Checkbox label="Checkbox" />
</Inline>

<Inline>
  <Inline.Stretch>
    <Checkbox label="Checkbox" />
  </Inline.Stretch>
  <Inline.Stretch>
    <Checkbox label="Checkbox" />
  </Inline.Stretch>
  <Inline.Stretch>
    <Checkbox label="Checkbox" />
  </Inline.Stretch>
</Inline>

<Inline>
  <Inline.Stretch>
    <Checkbox label="Checkbox" />
  </Inline.Stretch>
  <Inline.Stretch>
    <Checkbox label="Checkbox" />
  </Inline.Stretch>
  <Inline.Stretch>
    <Checkbox label="Checkbox" />
  </Inline.Stretch>
</Inline>

Sandbox

import Inline from "@intility/bifrost-react/Inline";
import Grid from "@intility/bifrost-react/Grid";
import Button from "@intility/bifrost-react/Button";

export default function InlineSandbox() {
  return (
    <Grid className="bf-page-padding">
      <p>Split</p>
      <Inline>
        <div className="bfc-base-3-bg bf-padding">Left</div>
        <Inline.Separator />
        <div className="bfc-base-3-bg bf-padding">Right</div>
        <div className="bfc-base-3-bg bf-padding">Right</div>
      </Inline>
      <Inline>
        <div className="bfc-base-3-bg bf-padding">Left</div>
        <Inline.Separator />
        <div className="bfc-base-3-bg bf-padding">Middle</div>
        <Inline.Separator />
        <div className="bfc-base-3-bg bf-padding">Right</div>
      </Inline>
      <p>Stretch</p>
      <Inline>
        <Inline.Stretch>
          <div className="bfc-base-3-bg bf-padding">Stretched</div>
        </Inline.Stretch>
        <div className="bfc-base-3-bg bf-padding">Right</div>
      </Inline>
      <Inline>
        <Inline.Stretch>
          <div className="bfc-base-3-bg bf-padding">Stretched</div>
        </Inline.Stretch>
        <Inline.Stretch>
          <div className="bfc-base-3-bg bf-padding">Stretched</div>
        </Inline.Stretch>
        <Inline.Stretch>
          <div className="bfc-base-3-bg bf-padding">Stretched</div>
        </Inline.Stretch>
      </Inline>
      <p>Responsive</p>
      <Grid className="to-small">
        <Button>Button in Grid</Button>
        <Button>Button in Grid</Button>
        <Button>Button in Grid</Button>
      </Grid>
      <Inline className="from-small">
        <Button>Inline Button</Button>
        <Button>Inline Button</Button>
        <Button>Inline Button</Button>
      </Inline>
    </Grid>
  );
}
Open on CodeSandboxOpen Sandbox