The Spacing component provides a convenient way to add consistent margin and padding to elements using the design system’s spacing scale. It supports both shorthand and verbose syntax with responsive values.
Installation
npm install @naturacosmeticos/natds-web
Import
import { Spacing } from '@naturacosmeticos/natds-web';
Usage
Basic Spacing
Add margin or padding using the spacing scale:
import { Spacing, Typography } from '@naturacosmeticos/natds-web';
function BasicSpacing() {
return (
<Spacing margin={2} padding={3}>
<Typography>Content with margin and padding</Typography>
</Spacing>
);
}
Directional Spacing
Control spacing on specific sides:
import { Spacing } from '@naturacosmeticos/natds-web';
function DirectionalSpacing() {
return (
<Spacing
marginTop={2}
marginBottom={4}
paddingLeft={3}
paddingRight={3}
>
<div>Content with directional spacing</div>
</Spacing>
);
}
Shorthand Props
Use shorthand props for concise syntax:
import { Spacing } from '@naturacosmeticos/natds-web';
function ShorthandSpacing() {
return (
<Spacing m={2} p={3} mt={4} mb={4}>
<div>Content with shorthand spacing</div>
</Spacing>
);
}
Axis Spacing
Apply spacing to horizontal (X) or vertical (Y) axes:
import { Spacing } from '@naturacosmeticos/natds-web';
function AxisSpacing() {
return (
<Spacing marginX={3} paddingY={2}>
<div>Horizontal margin, vertical padding</div>
</Spacing>
);
}
Custom Display
Control the display property:
import { Spacing } from '@naturacosmeticos/natds-web';
function FlexSpacing() {
return (
<Spacing display="flex" p={2}>
<div>Flex container with padding</div>
</Spacing>
);
}
Props
Margin Props
Defines margin on all sides. Alias: m
Defines top margin. Alias: mt
Defines right margin. Alias: mr
Defines bottom margin. Alias: mb
Defines left margin. Alias: ml
Defines left and right margins. Alias: mx
Defines top and bottom margins. Alias: my
Padding Props
Defines padding on all sides. Alias: p
Defines top padding. Alias: pt
Defines right padding. Alias: pr
Defines bottom padding. Alias: pb
Defines left padding. Alias: pl
Defines left and right paddings. Alias: px
Defines top and bottom paddings. Alias: py
Other Props
Used to render elements inside the Spacing. Can be an element or string.
Specifies one or more class names for the element.
component
React.ElementType
default:"'div'"
The component used for the root node. Either a string to use an HTML element or a component.
display
'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex' | Record<string, string>
Controls the CSS display property of the element.
Inline styles to apply. Avoid using this in production; prefer className.
Spacing Scale
The SizePropValue type accepts numeric values that correspond to the theme’s spacing scale:
| Value | Pixels | Rem | Usage |
|---|
| 0 | 0px | 0rem | No spacing |
| 0.5 | 4px | 0.25rem | Tiny spacing |
| 1 | 8px | 0.5rem | Extra small |
| 2 | 16px | 1rem | Small |
| 3 | 24px | 1.5rem | Medium |
| 4 | 32px | 2rem | Large |
| 5 | 40px | 2.5rem | Extra large |
| 6 | 48px | 3rem | XXL |
| 7 | 56px | 3.5rem | XXXL |
| 8 | 64px | 4rem | Huge |
Examples
Card with Spacing
Create a card layout with consistent spacing:
import { Spacing, Typography, Card, CardContent } from '@naturacosmeticos/natds-web';
function SpacedCard() {
return (
<Spacing m={2}>
<Card>
<CardContent>
<Spacing mb={2}>
<Typography variant="h5">Card Title</Typography>
</Spacing>
<Typography>
Card content with consistent spacing
</Typography>
</CardContent>
</Card>
</Spacing>
);
}
Form Layout
Space form elements consistently:
import { Spacing, TextField, Button } from '@naturacosmeticos/natds-web';
function LoginForm() {
return (
<Spacing p={3}>
<Spacing mb={2}>
<TextField label="Email" fullWidth />
</Spacing>
<Spacing mb={3}>
<TextField label="Password" type="password" fullWidth />
</Spacing>
<Button variant="contained" color="primary" fullWidth>
Login
</Button>
</Spacing>
);
}
Inline Spacing
Create inline elements with horizontal spacing:
import { Spacing, Button } from '@naturacosmeticos/natds-web';
function ButtonGroup() {
return (
<Spacing display="flex">
<Spacing mr={2}>
<Button>Cancel</Button>
</Spacing>
<Button variant="contained" color="primary">
Confirm
</Button>
</Spacing>
);
}
Section Spacing
Add consistent spacing between page sections:
import { Spacing, Typography, Container } from '@naturacosmeticos/natds-web';
function PageSections() {
return (
<Container>
<Spacing py={4}>
<Typography variant="h2">Section 1</Typography>
<Spacing mt={2}>
<Typography>Content for section 1</Typography>
</Spacing>
</Spacing>
<Spacing py={4}>
<Typography variant="h2">Section 2</Typography>
<Spacing mt={2}>
<Typography>Content for section 2</Typography>
</Spacing>
</Spacing>
</Container>
);
}
Responsive Spacing
While the Spacing component doesn’t directly support responsive values in the props, you can combine it with Material-UI’s useMediaQuery or CSS-in-JS:
import { Spacing, useMediaQuery } from '@naturacosmeticos/natds-web';
function ResponsiveSpacing() {
const isMobile = useMediaQuery('(max-width:600px)');
return (
<Spacing p={isMobile ? 2 : 4}>
<div>Responsive padding</div>
</Spacing>
);
}
Custom Component
Render Spacing as a different HTML element:
import { Spacing, Typography } from '@naturacosmeticos/natds-web';
function ArticleSpacing() {
return (
<Spacing component="article" p={3}>
<Typography variant="h1">Article Title</Typography>
<Spacing mt={2}>
<Typography>Article content...</Typography>
</Spacing>
</Spacing>
);
}
Best Practices
Use consistent spacing values from the theme scale
Prefer shorthand props (m, p, mt, etc.) for cleaner code
Use marginY/paddingY for vertical rhythm
Use marginX/paddingX for horizontal consistency
Avoid using the style prop in production - use className instead
Don’t mix custom pixel values with the spacing scale
Avoid excessive nesting of Spacing components
Common Patterns
Stack Layout
Create vertical spacing between elements:
const items = ['Item 1', 'Item 2', 'Item 3'];
function Stack() {
return (
<div>
{items.map((item, index) => (
<Spacing key={index} mb={2}>
<div>{item}</div>
</Spacing>
))}
</div>
);
}
Container Padding
Add consistent padding to containers:
function ContentArea() {
return (
<Spacing p={3} component="section">
<Typography variant="h2">Content Area</Typography>
<Spacing mt={2}>
<Typography>Content goes here</Typography>
</Spacing>
</Spacing>
);
}
Comparison with Other Approaches
| Approach | Spacing Component | CSS Classes | Inline Styles |
|---|
| Theme integration | ✅ Automatic | ⚠️ Manual | ❌ No |
| Type safety | ✅ TypeScript | ❌ No | ⚠️ Partial |
| Maintainability | ✅ High | ⚠️ Medium | ❌ Low |
| Performance | ✅ Good | ✅ Excellent | ⚠️ Fair |
| Developer experience | ✅ Excellent | ⚠️ Good | ❌ Poor |
Accessibility
The Spacing component:
- Preserves semantic HTML structure
- Supports custom semantic elements via
component prop
- Maintains content flow for screen readers
- Does not interfere with keyboard navigation
- Can be combined with ARIA attributes
Related Components
- Container - For page-level layout and centering
- Grid - For responsive grid layouts with built-in spacing
- Box - Similar utility component from Material-UI
- Divider - For visual separation between content
