Space

Even gaps between a row or column of children, plus the Compact mode that joins adjacent controls into one unit.

Basic

Wrap any mix of nodes in Space to set them in a row with an even gap, like two buttons, a Tag and a line of text.

Size

Set size to small, medium or large for a gap that follows the theme, or pass a number such as 40 for a fixed gap.

Vertical

Pass orientation="vertical", or the vertical shorthand, to stack the children in a column instead of a row.

Align

Set align to start, center, end or baseline to line up children of different heights, like an avatar beside a name, a Tag and a small button.

Wrap

Add wrap to let the items flow onto new rows, and pass size a [horizontal, vertical] pair for a smaller gap between rows.

Separator

Pass separator to put a node between each child, like a vertical Divider between links or a · between metadata.

Compact form controls

The same protocol Select, URL Input and search button, first as separate controls and then wrapped in Space.Compact, which joins them into one control with shared borders.

Compact buttons

Wrap buttons in Space.Compact to join them into one segmented set with shared borders, and add block with flex-1 on each button to stretch the set across its row.

Vertical compact

Set orientation="vertical" on Space.Compact to stack joined buttons into one column with shared borders.

Space vs Flex

In Space each child sits in its own item, so flex-1 on the first button does nothing, while the same button in Flex grows to fill the row.

In context

The component inside real screens, with the components it usually sits beside.

Image toolbar

An image viewer toolbar on a dark pill, with edit, zoom and share groups split by a Divider through separator.

API Reference

Space
Space's props. Rows marked antuikit in the Version column are added by the kit.
Space.Compact
Space.Compact's props. Rows marked antuikit in the Version column are added by the kit.
Space.Addon
Space.Addon's props. The kit does not re-export it.