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 margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Copy

Copied

<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

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

Copy

Copied

<Box width="25%" />
<Box width="50%" />
<Box width="75%" />
<Box width="100%" />
<Box width="auto" />

Height

Height 25%

Height 50%

Height 75%

Height 100%

Height auto

Copy

Copied

<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.

Copy

Copied

<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.

Copy

Copied

<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.

Blue

Copy

Copied

<Box color="blue" />
<Box backgroundColor="#c0daf9" />