Box
Spacing
The space utility converts shorthand margin and padding props to margin and padding CSS declarations. The props are named using the format {property}{sides}
.
Where property is one of:
m
- for classes that set marginp
- for classes that set padding
Where sides is one of:
t
- for classes that set margin-top or padding-topb
- for classes that set margin-bottom or padding-bottoml
- for classes that set margin-left or padding-leftr
- for classes that set margin-right or padding-rightx
- for classes that set both *-left and *-righty
- for classes that set both *-top and *-bottom- blank - for classes that set a margin or padding on all 4 sides of the element
<Box m="2rem" /> // margin: 2rem;
<Box mx="auto" /> // margin-left: auto; margin-right: auto;
<Box m={[ "16px", "24px" ]} /> // sets margin `16px` on all viewports and `24px` from the first breakpoint and up
<Box p={{ _: "8px", sm: "12px", md: "16px", lg: "24px" }} />
Props
Name | Type | Description |
---|---|---|
m | string | array | object | Defines the margin style property. Default value: 0 |
mt | string | array | object | Defines the margin-top style property. Default value: 0 |
mr | string | array | object | Defines the margin-right style property. Default value: 0 |
mb | string | array | object | Defines the margin-bottom style property. Default value: 0 |
ml | string | array | object | Defines the margin-left style property. Default value: 0 |
mx | string | array | object | Defines the margin-left and margin-right style property. Default value: 0 |
my | string | array | object | Defines the margin-top and margin-bottom style property. Default value: 0 |
p | string | array | object | Defines the padding style property. Default value: 0 |
pt | string | array | object | Defines the padding-top style property. Default value: 0 |
pr | string | array | object | Defines the padding-right style property. Default value: 0 |
pb | string | array | object | Defines the padding-bottom style property. Default value: 0 |
pl | string | array | object | Defines the padding-left style property. Default value: 0 |
px | string | array | object | Defines the padding-left and padding-right style property. Default value: 0 |
py | string | array | object | Defines the padding-top and padding-bottom style property. Default value: 0 |
Layout
Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.
Width
<Box width="25%" />
<Box width="50%" />
<Box width="75%" />
<Box width="100%" />
<Box width="auto" />
Height
<Box height="25%" />
<Box height="50%" />
<Box height="75%" />
<Box height="100%" />
<Box height="auto" />
Props
Name | Type | Description |
---|---|---|
width | string | array | object | Defines the width style property. Default value: 'auto' |
maxWidth | string | array | object | Defines the max-width style property. Default value: 'none' |
height | string | array | object | Defines the height style property. Default value: 'auto' |
minHeight | string | array | object | Defines the min-height style property. Default value: 'auto' |
size | string | array | object | Defines the width and height style property. Default value: 'auto' |
overflow | string | array | object | Defines the overflow style property. Default value: 'auto' |
overflowX | string | array | object | Defines the overflow-x style property. Default value: 'auto' |
overflowY | string | array | object | Defines overflow-y style property. Default value: 'auto' |
Position
The position utility includes style props for position
, zIndex
, top
, right
, bottom
, and left
.
<Box position="absolute" />
<Box zIndex={2} />
Border
The border utility includes style props for border
, borderWidth
, borderStyle
, borderColor
, borderRadius
, borderTop
, borderTopWidth
, borderTopStyle
, borderTopColor
, borderTopLeftRadius
, borderTopRightRadius
, borderRight
, borderRightWidth
, borderRightStyle
, borderRightColor
, borderBottom
, borderBottomWidth
, borderBottomStyle
, borderBottomColor
, borderBottomLeftRadius
, borderBottomRightRadius
, borderLeft
, borderLeftWidth
, borderLeftStyle
, borderLeftColor
, borderX
, and borderY
.
<Box border="2px solid" />
<Box borderTop="2px solid" />
<Box borderRight="2px solid" />
<Box borderBottom="2px solid" />
<Box borderLeft="2px solid" />
<Box border="2px solid" borderRadius="30px" />
<Box border="2px solid" borderColor="green" />
Color
The color utility parses a component's color and bg props and converts them into CSS declarations.
<Box color="blue" />
<Box backgroundColor="#c0daf9" />