Space

An invisible aria-hidden element that inserts a fixed amount of whitespace. Use h for vertical gaps and w for horizontal gaps. Prefer Group or Stack for uniform spacing; use Spacefor one-off gaps.

Vertical space

Block A
Block B — separated by h="xl"
Block C — separated by h="xs"
<div>Block A</div>
<Space h="xl" />
<div>Block B</div>
<Space h="xs" />
<div>Block C</div>

Horizontal space

<Button>Left</Button>
<Space w="xl" />
<Button variant="light">Right</Button>

Available sizes

h="xs"
h="sm"
h="md"
h="lg"
h="xl"
<Space h="xs" />  {/* 0.5rem */}
<Space h="sm" />  {/* 0.75rem */}
<Space h="md" />  {/* 1rem */}
<Space h="lg" />  {/* 1.5rem */}
<Space h="xl" />  {/* 2rem */}

Props

PropTypeDefaultDescription
h'xs' | 'sm' | 'md' | 'lg' | 'xl'—Vertical height (sets height and min-height)
w'xs' | 'sm' | 'md' | 'lg' | 'xl'—Horizontal width (sets width and min-width)