Spacer

Spacer is a wrapper component that adds controlled margins around a single element. It’s meant for isolating one item, not for managing layout between multiple elements.

Healthy

Show details

This component exists only in development environment. When working in Figma use Auto Layout’s horizontal and vertical padding values to achieve similar results.

Anatomy

Spacer: A container that provides spacing to a wrapped content

Content: An element/component that requires spacing around itself

Usage Guidelines

When to use this component

To add spacing around a single item.

When not to use this component

To control spacing between several items. Use Grid or Stack for consistent spacing.

Best Practices

Use Spacer to add margins around one element—values map to the spacing scale.

Don't

Don’t use Spacer for group spacing—use Stack or Grid instead.

Caution

Be cautious of margin collapse on vertical siblings. If you need consistent spacing between multiple items, use Stack instead.

General Component Behaviors

Width

Spacer acts as a block element and will take 100% width, unless specified differently by a parent (e.g. Flexbox with specified alignment).

Responsive Behavior

Currently stack does not change it’s behavior between viewports

Known Gaps

Please let the team know if there is a need to prioritize any of the below gaps.