BRAID
Braid Logo
 

Stack

Open in Playroom
Defines the vertical rhythm of its child elements, interleaving a uniform amount of space between each element.

Alternatives

  • Box — For custom layouts.

Spacing

The spacing between children can be adjusted using the space prop.Responsive values are supported, e.g. space={{ mobile: 'small', tablet: 'medium', desktop: 'large', wide: 'xlarge' }}
Open in Playroom

Horizontal alignment

Items can be aligned horizontally using the align prop. Responsive values are supported, e.g. align={{ mobile: 'center', tablet: 'left' }}
left
center
right
Open in Playroom

Semantic elements

By default, Stack renders a div element. You can customise this via the component prop.
<Stack component="span" space="small">
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Stack
  data={{ testid: 'stack-1' }}
  // => data-testid="stack-1"
>
  ...
</Stack>
Open in Playroom