Skip Navigation
React Magma

Spacer

The Spacer component is used to create horiztonal or vertical space between other elements or components.

Basic Usage

The size prop is required and will set the height and width of the Spacer component. This value can either be a number or a string. If a number is used, the size will be set in pixels.

import React from 'react';


import { Card, CardBody, Spacer, magma } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Card>
        <CardBody>Card 1</CardBody>
      </Card>
      <Spacer size={16} />
      <Card>
        <CardBody>Card 2</CardBody>
      </Card>
      <Spacer size="16px" />
      <Card>
        <CardBody>Card 3</CardBody>
      </Card>
      <Spacer size={magma.spaceScale.spacing05} />
      <Card>
        <CardBody>Card 4</CardBody>
      </Card>
    </>
  );
}

Axis

By default, the Spacer component use the size for both height and width. However, the axis prop can be used if you only wish to create horizontal or vertical space. It accepts the options SpacerAxis.horizontal, SpacerAxis.vertical and SpacerAxis.both (default).

import React from 'react';


import { Button, Spacer, SpacerAxis, magma } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Button>Card 1</Button>
      <Spacer axis={SpacerAxis.horizontal} size={magma.spaceScale.spacing05} />
      <Button>Card 2</Button>
    </>
  );
}

Spacer Props

Any other props supplied will be provided to the wrapping span element.

axis

Description

Determines whether the spacer takes up space horizontally, vertically or both.

Type

enum, one of:
SpacerAxis.both
SpacerAxis.horizontal
SpacerAxis.vertical

Default

SpacerAxis.both

size

Required

Description

Height and/or width of the component. If a number is provided, will be set in pixels.

Type

number | string

Default

-

On this page

Deploys by Netlify