MultinaireGap

Simple spacing component for adding gaps between elements.

Basic Usage

import { MultinaireGap } from '@multinaire/multinaire-design';

<MultinaireContainer>
  <MultinaireText>Item 1</MultinaireText>
  <MultinaireGap />
  <MultinaireText>Item 2</MultinaireText>
</MultinaireContainer>

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

<MultinaireContainer>
  <MultinaireCard>Card 1</MultinaireCard>
  <MultinaireGap gap={16} />
  <MultinaireCard>Card 2</MultinaireCard>
</MultinaireContainer>

Horizontal Gap

<MultinaireContainer horizontal>
  <MultinaireButton title="Cancel" />
  <MultinaireGap horizontal gap={12} />
  <MultinaireButton title="Save" />
</MultinaireContainer>

Default Theme Gap

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

tip

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