Layout Primitives
Spacer
A whitespace element: a fixed gap, or a flex fill. For space between siblings where a gap on the parent will not reach.
Vertical Size Variants
size="xs" (4px)
Above
Below
size="sm" (8px)
Above
Below
size="md" (16px)
Above
Below
size="lg" (24px)
Above
Below
size="xl" (32px)
Above
Below
size="2xl" (48px)
Above
Below
Flex Spacer
No size — fills available space
Logo
Sign In
Horizontal Spacer
axis="horizontal" — fixed width gap
Left
Right
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | — | Fixed spacing size. When omitted, the spacer fills available flex space (flex: 1). |
axis | "horizontal" | "vertical" | "vertical" | Whether the fixed spacing is applied as height (vertical) or width (horizontal). |
className | string | — | Additional CSS classes to apply to the spacer element. |
Import
import { Spacer } from "@mikenotthepope/substrateui"