Space

Insert a fixed gap between two blocks.

Markdown already spaces paragraphs, headings, lists, and tables for you, and that default rhythm is the right choice almost everywhere. Reach for Space when you need a specific gap the defaults do not give you: separating a dense table from the heading that follows it, opening up a landing page, or tightening a stack of cards on small screens.

Space Usage

Set size to the gap you want, in pixels.

Text above the gap.

<Space size={60} />

Text below the gap.

Text above the gap.

Text below the gap.

Responsive sizing

A gap that looks right on a wide screen is often too large on a phone. Each breakpoint has its own prop, so you can grow the gap as the viewport widens.

<Space size={20} md={40} xl={80} />

That renders a 20px gap by default, 40px from the md breakpoint up, and 80px from xl up.

Every breakpoint prop is a min-width media query, so a value applies at that width and every width above it until a larger breakpoint overrides it:

size sets the gap at every width. Use it alone for a constant gap, or as the base that the breakpoint props build on.

Removing the space at a breakpoint

Pass "none" instead of a number to drop the gap entirely at that width. This is the usual way to add breathing room on desktop without wasting vertical space on a phone.

<Space size="none" lg={64} />

Here there is no gap at all below the lg breakpoint, and a 64px gap from lg up.

Horizontal spacing

Add horizontal to space things apart along the inline axis instead of the block axis. The size props then control width rather than height.

It belongs inside a line of inline content, where a gap along that axis has something to sit between. Dropping one into a button widens the distance between the label and the icon by the size you give it, on top of the spacing the button already applies:

<Button icon="arrow-right" iconPosition="right">
  Get started
  <Space size={24} horizontal />
</Button>

Properties