Spacer

The Spacer component provides a semantic way to add vertical spacing between elements. It uses the design system’s spacing scale to ensure consistent rhythm throughout your application.

API Reference

Props

Size Values

Usage Examples

Basic Spacing

<Header />
<Spacer size="md" />
<MainContent />
<Spacer size="lg" />
<Footer />

In Card Components

<Card>
  <CardHeader>
    <h3>Card Title</h3>
  </CardHeader>
  <Spacer size="sm" />
  <CardContent>
    <p>Card content goes here</p>
  </CardContent>
  <Spacer size="md" />
  <CardActions>
    <Button>Action</Button>
  </CardActions>
</Card>

Form Layout

<form>
  <FormField label="Name" />
  <Spacer size="sm" />
  <FormField label="Email" />
  <Spacer size="sm" />
  <FormField label="Message" type="textarea" />
  <Spacer size="md" />
  <Button type="submit">Submit</Button>
</form>

Responsive Spacing

<!-- Different spacing for different contexts -->
<div class="mobile-layout">
  <Component />
  <Spacer size="sm" />
  <Component />
</div>

<div class="desktop-layout">
  <Component />
  <Spacer size="lg" />
  <Component />
</div>

Design Principles

1. Semantic Spacing

The Spacer component makes spacing intentions explicit in your code. Instead of arbitrary margin values, you use named sizes that correspond to your design system’s spacing scale.

2. Consistency

By limiting spacing choices to predefined values, the Spacer component ensures visual consistency across your application. This creates a harmonious rhythm and improves the overall user experience.

3. Accessibility

The component includes aria-hidden="true" by default, ensuring it doesn’t interfere with screen readers or keyboard navigation. It’s purely presentational.

4. Zero Configuration

The Spacer component works out of the box with sensible defaults. The md size is appropriate for most use cases, requiring explicit size props only when needed.

Best Practices

Do’s

• ✅ Use Spacer for vertical spacing between sibling elements
• ✅ Choose sizes based on semantic relationships (closer = smaller spacing)
• ✅ Use consistent spacing patterns within similar contexts
• ✅ Prefer Spacer over custom margins for maintainability

Don’ts

• ❌ Don’t use Spacer for horizontal spacing (use gap or margin instead)
• ❌ Don’t nest Spacers to create custom sizes
• ❌ Don’t use Spacer when CSS Grid or Flexbox gap would be more appropriate
• ❌ Don’t override the height with custom styles

Implementation Notes

Why Not CSS Gap?

While CSS gap is excellent for many layouts, the Spacer component offers advantages:

1. Works everywhere - Not limited to flex/grid containers
2. Semantic HTML - Makes spacing intentions clear in markup
3. Conditional spacing - Easy to add/remove based on state
4. Legacy support - Works in older browsers without gap support

Performance

The Spacer component is extremely lightweight:

• No JavaScript logic or state
• Single DOM element
• Uses CSS classes for sizing
• Zero runtime overhead

TypeScript Support

The component is fully typed with strict size constraints:

interface Props {
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
  class?: string;
}

Related Components

• MarkdownContent - For content with automatic typography and spacing
• Card - Contains built-in spacing patterns
• Button - Has internal padding following the spacing scale

Accessibility

The Spacer component is purely presentational and hidden from assistive technologies:

• Sets aria-hidden="true" to prevent screen reader announcement
• Has no keyboard interaction
• Doesn’t affect document outline or navigation
• Maintains visual spacing without semantic implications

Migration Guide

If you’re migrating from custom margins:

<!-- Before -->
<div style="margin-bottom: 32px">Content</div>

<!-- After -->
<div>Content</div>
<Spacer size="md" />

For dynamic spacing:

<!-- Before -->
<div style="margin-bottom: {isCompact ? 16 : 48}px">Content</div>

<!-- After -->
<div>Content</div>
<Spacer size={isCompact ? 'sm' : 'lg'} />