Gap

Simple spacing component for adding gaps between elements.

Basic Usage

import { Gap } from '@multinaire/ui';

<Container>
  <Typography>Item 1</Typography>
  <Gap />
  <Typography>Item 2</Typography>
</Container>

Props

Prop	Type	Default	Description
horizontal	boolean	false	Set to true to render a horizontal gap instead of vertical
gap	number	theme medium	Size of the gap in pixels

Examples

Vertical Gap

<Container>
  <Card>Card 1</Card>
  <Gap gap={16} />
  <Card>Card 2</Card>
</Container>

Horizontal Gap

<Container horizontal>
  <Button title="Cancel" />
  <Gap horizontal gap={12} />
  <Button title="Save" />
</Container>

Default Theme Gap

// Uses variables.gap.medium from theme
<Gap />

tip

For most use cases, prefer using the gap prop on Container instead of manually adding Gap components.