Components

Stack

Lays children out in a row or column with consistent spacing.

Usage

Basic

One Two Three

HTML

<bs:bsui-stack direction="row" gap="3" align="center" justify="center">
  <bs:bsui-badge label="One" />
  <bs:bsui-badge label="Two" />
  <bs:bsui-badge label="Three" />
</bs:bsui-stack>

Full width column

Stretched children fill the row, so stacked buttons match each other.

HTML

<bs:bsui-stack direction="column" gap="3" align="stretch">
  <bs:bsui-button label="Start the free trial" />
  <bs:bsui-button label="Talk to sales" variant="outline" />
</bs:bsui-stack>

Split row

Justify pushes the action to the far edge of the row.

3 of 25 sites in use

HTML

<bs:bsui-stack direction="row" gap="3" align="center" justify="space-between">
  <bs:bsui-text content="3 of 25 sites in use" variant="muted" />
  <bs:bsui-button label="Add site" variant="outline" size="sm" />
</bs:bsui-stack>

Centred empty state

A column centres on the cross axis, which a column does not do by default.

No deployments yet

Push to the main branch and the first build starts on its own.

HTML

<bs:bsui-stack direction="column" gap="4" align="center">
  <bs:bsui-text content="No deployments yet" variant="title" tag="h3" />
  <bs:bsui-text content="Push to the main branch and the first build starts on its own." variant="muted" />
  <bs:bsui-button label="Read the guide" variant="outline" />
</bs:bsui-stack>

Attributes

Attribute	Type	Default
`direction`	`row` `column`	`row`
`gap`	`0` `0.5` `1` `1.5` `2` `3` `4` `5` `6` `8` `10` `12`	`2`
`align`	`start` `center` `end` `stretch`	—
`justify`	`start` `center` `end` `space-between` `space-around` `space-evenly`	—
`wrap`	`toggle`	`false`
`grow`	`toggle`	`false`