Space
import { space } from "@desygna/desygna";
A system that enables spacing
props.
The space utility converts shorthand margin and padding props to margin and padding CSS declarations.
- Numbers from 0 to the length of theme.space are converted to values on the space scale.
- Negative values can be used for negative margins.
- Numbers greater than the length of the theme.space array are converted to raw pixel values.
- String values are passed as raw CSS values.
- And array values are converted into responsive values.
Margin and padding props follow a shorthand syntax for specifying direction.
Prop | CSS Property |
---|---|
margin , m | margin |
marginTop , mt | margin-top |
marginRight , mr | margin-right |
marginBottom , mb | margin-bottom |
marginLeft , ml | margin-left |
marginX , mx | margin-left and margin-right |
marginY , my | margin-top and margin-bottom |
padding , p | padding |
paddingTop , pt | padding-top |
paddingRight , pr | padding-right |
paddingBottom , pb | padding-bottom |
paddingLeft , pl | padding-left |
paddingX , px | padding-left and padding-right |
paddingY , py | padding-top and padding-bottom |
gap | gap |
// examples (margin prop)
// sets margin value of `theme.space[2]`
<Box m={2} />
// sets margin value of `-1 * theme.space[2]`
<Box m={-2} />
// sets a margin value of `16px` since it's greater than `theme.space.length`
<Box m={16} />
// sets margin `'auto'`
<Box m='auto' />
// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
<Box m={[ 2, 3 ]} />