Spacer

Overview

The Spacer component adds vertical space between two elements. Pick the amount with the size prop, which maps to the design system’s spacing scale.

Note

It is preferable to control spacing between elements using CSS layouts with flex or grid and to govern the spacing between elements with gap.

Installation

import { Spacer } from '@harnessio/ui/components'

//...

return (
  <>
    <SomeComponent />
    <Spacer size={4} />
    <SomeOtherComponent />
  </>
)

Usage

Anatomy

Spacer renders a single empty, decorative <div> that pushes the element after it down by a fixed amount of space (applied as a top margin from the spacing scale).

<SomeComponent />
<Spacer size={4} />
<SomeOtherComponent />

• size picks a step from the spacing scale (defaulting to 4); it isn’t an arbitrary pixel value, so use one of the supported steps.
• The element is purely for spacing — it has no content and is hidden from assistive tech.

Best practices

Do

• Prefer laying out with flex or grid and a gap — it keeps spacing declarative and survives reflow better than inserting spacer elements.
• Reach for Spacer for one-off vertical gaps where adding a flex/grid container would be heavier than the problem.

Don’t

• Don’t chain several Spacers to build up a large gap — pick the size step that matches, or use layout spacing.
• Don’t rely on Spacer for horizontal spacing; it only adds vertical space.

Accessibility

Focus & states

• Spacer is decorative: it’s rendered with aria-hidden, holds no content, and is skipped by screen readers and the tab order.

Properties

Properties

Prop	Required	Default	Type
size	false	4	number
className	false		string

Spacer also accepts standard <div> attributes.