Space

• A toolbar, a card footer or a form's action row: two to six controls in a line, each sized by its content.
• A run of tags, links or metadata with a dot, a slash or a Divider between the items.
• A container that has to keep its box when every child renders nothing. Flex hides itself in that case, and Space does not.

What to use instead

• Flex when a child has to grow or the children must be direct flex items. Space puts each child in its own item element, so flex: 1 on a child does nothing.
• A gap-* utility when you only need the gap. gap-sm on a flex div matches size="small", with no extra element per child.
• Grid (Row and Col, or CSS grid) for a page layout, with columns that line up across rows and reflow at breakpoints.

• The presets follow the theme and shrink in compact mode. They match Flex's gap presets, so <Space size="small"> and <Flex gap="small"> always agree.
• A number is a fixed gap that stays the same in compact mode. Use one only for a one-off.
• size also takes a [horizontal, vertical] pair, and each half takes a preset or a number.

• direction is the old name and logs a warning. It was renamed because direction also means left to right or right to left on the provider.
• vertical is a shorthand, and orientation wins when both are set. Pick one spelling for your codebase.
• A vertical Space is a column of controls, not a list. If the children are a list, read the Accessibility tab first.

• Once rows wrap, one size sets both the gap along a row and the gap between rows. Pass a pair, like size={[16, 8]}, to keep the rows closer.
• Space takes its parent's width. Constrain the parent, or the Space, when the run should wrap sooner.

• Space puts every child in an item element of its own, which is where the separator goes. A selector like > * on the Space root matches those items, not your components.
• A null or false child is skipped, so a conditional child never leaves two separators side by side.
• classNames takes root, item and separator. item styles every child's box at once.

• center suits controls of different heights, like a Button beside a Tag beside a Select.
• baseline lines up text of mixed sizes, like a heading beside a timestamp.
• start keeps short children at the top when one child is much taller, like a text block beside a single button.

• It works with the kit's buttons, inputs and selects. A plain <div> inside is not joined.
• block stretches the group to its container's width. A split button, a primary action with a dropdown caret, is the common two-child case.
• Vertical compact is supported for buttons only.
• size on Compact sets the size of the controls inside, not a gap.