Spacer

Utility component to render horizontal or vertical space
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

The Spacer component is a utility component to use whenever you need structural space between elements.

Import

import {Spacer} from '@fuegokit/react'

Usage

Use Spacer whenever margin isn't the best tool for the job.

This can be helpful in situations where the rules of margin-collapse might lead to some surprising behavior. Spacer can help you avoid those situations.

Size

By default, the size prop accepts a raw pixel value.

Grid Spacer

To limit spacing values to the product environment spacing scale, use a Grid Spacer.

import {GridSpacer} from '@fuegokit/react'

Grid Spacers respect Fuegokit's system spacing scale:

Direction

Spacing can be applied in the vertical or horizontal direction when provided via the axis prop.