Docs / Layout / Stack

Stack

A shorthand for one-dimensional flex layouts. Stack lays its children out in a column or a row with a consistent gap between them — the quick way to space a group of elements without reaching for the full grid.

Import

import { Stack } from '@metatoy/bootstrap-styled';

Vertical stack

direction defaults to 'vertical': children stack top-to-bottom and stretch to the full width. Set the gap to space them apart.

Horizontal stack

Set direction="horizontal" to lay children in a row. Horizontal stacks also vertically center their items, which makes them ideal for toolbars and button rows. A margin-based auto on a child pushes everything after it to the far end.

Gap scale

gap takes the 0–5 spacing scale — the same steps the grid gutters and utilities use — so spacing stays consistent across your layout. Stacks also nest cleanly: a horizontal stack inside a vertical one builds a small grid of rows and columns.

Props

Stack also accepts all native <div> attributes and an as prop to render as a different element (for example a <nav> or <ul>).

Theming

Stack is a flex container: it maps direction to flex-direction (column / row) and resolves gap against the theme spacing scale for its CSS gap. It reads no color tokens of its own — the surface and text come from whatever you place inside it, so it inherits --bs-body-color and --bs-body-bg from the surrounding scope. To change the gap steps, override the theme spacing scale rather than styling the stack directly.

Accessibility

Stack renders a plain <div> with no implied semantics — it is layout only. Keep the DOM order meaningful, since a horizontal stack does not change the order keyboard and screen reader users encounter. When a stack represents a real grouping (a list, a navigation bar, a toolbar), give it the right element via as and the appropriate role, and label it so its purpose is clear.

Explore in Ladle

The library doesn’t ship a dedicated Stack story yet — browse the component gallery: Open in Ladle.