Spacer

A spacer with no parameters is flexible: it takes every pixel the other children of the flex container did not need and pushes them apart. One spacer sends the items on either side of it to the two ends of the container, and several spacers split the leftover room evenly, which is how the title below ends up centered between the two buttons without a single alignment rule. Keep in mind that the spacer is a real child of the container, so in a container that also sets a CSS gap (a BitStack, for instance) that gap is added on both sides of it.

Width turns the spacer into a fixed gap of that many pixels, and Gap does the same with any CSS length, so design tokens, relative units and percentages all work (1rem, 5%, var(--my-gap)). A fixed spacer no longer grows. The space is created with a logical margin rather than a width, so it never shrinks when the container gets cramped and it follows the text direction of the page.

In a column layout the horizontal Width creates no visible space, so Height is the pixel parameter to reach for, and Vertical moves the axis-agnostic parameters - Gap, Size and MinGap - over to the vertical axis too. A flexible spacer needs neither: with no fixed size it always grows along the main axis of its container, which is why the last item below is pinned to the bottom.

Grow is the flex-grow factor of a flexible spacer and defaults to 1. When several spacers share a container, the leftover room is split between them in proportion to their factors, so a 1 and a 2 below give a one third / two thirds split. Any CSS flex-grow value is accepted, fractions included.

A flexible spacer collapses to nothing as soon as its siblings fill the container, which leaves them touching. MinGap puts a floor under it in any CSS length, so the gap survives even when there is no room left to share. Drag the resize handle at the bottom-right corner of the first box to squeeze it: the spacer with MinGap keeps its 2rem, the one without it disappears. It follows the axis of Vertical like Gap does, and since only a flexible spacer can collapse in the first place, a spacer that was given a fixed size ignores it.

The spacer renders a div, which is not a valid child everywhere: a toolbar or a menu built as a list only accepts li elements. Element swaps the tag of the rendered root for any other one, so the spacer can join such a container without breaking its markup, while everything else about it (the space it generates, the classes and the styles) stays exactly the same.

Size is the fixed space picked from the spacing scale of the theme instead of being written out by hand, in the usual three steps: Small, Medium and Large. It is the parameter to reach for when the spacers of an application should stay on the rhythm of its theme, since the length it resolves to follows the spacing unit and the density of the current theme and changes along with them. It sits on the same axis rules as Gap - inline by default, block once Vertical is set - and the more specific Gap, Width and Height win over it.

The spacer renders a single empty element, so Style and Class land straight on it. Since the generated space is a margin, the element itself has no size along the main axis: give it a background and a min-width or a border, as the examples below do, to make it visible while laying a page out. It stretches along the cross axis of its container on its own, so such a decoration shows up even in a container that centers its items. Inline styles are appended after the ones the component generates, so they win over them. That element is also marked aria-hidden, so screen readers skip the empty box entirely unless an AriaLabel is given, which takes the marking back.

The fixed space is a logical inline-start margin, so it flips with the text direction on its own: mark the container as right-to-left and the same markup lays out mirrored, with the space created on the right-hand side of the spacer. Because the margin resolves against the direction of the spacer itself, Dir on a single spacer moves its space to its other side without touching the rest of the row: the two bottom rows are the same markup, and the tinted spacer sits after the gap in the first one and before it in the second. A flexible spacer is direction-agnostic and behaves identically either way.