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

NameTypeDescription
mstring | array | objectDefines the margin style property. Default value: 0
mtstring | array | objectDefines the margin-top style property. Default value: 0
mrstring | array | objectDefines the margin-right style property. Default value: 0
mbstring | array | objectDefines the margin-bottom style property. Default value: 0
mlstring | array | objectDefines the margin-left style property. Default value: 0
mxstring | array | objectDefines the margin-left and margin-right style property. Default value: 0
mystring | array | objectDefines the margin-top and margin-bottom style property. Default value: 0
pstring | array | objectDefines the padding style property. Default value: 0
ptstring | array | objectDefines the padding-top style property. Default value: 0
prstring | array | objectDefines the padding-right style property. Default value: 0
pbstring | array | objectDefines the padding-bottom style property. Default value: 0
plstring | array | objectDefines the padding-left style property. Default value: 0
pxstring | array | objectDefines the padding-left and padding-right style property. Default value: 0
pystring | array | objectDefines 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

NameTypeDescription
widthstring | array | objectDefines the width style property. Default value: 'auto'
maxWidthstring | array | objectDefines the max-width style property. Default value: 'none'
heightstring | array | objectDefines the height style property. Default value: 'auto'
minHeightstring | array | objectDefines the min-height style property. Default value: 'auto'
sizestring | array | objectDefines the width and height style property. Default value: 'auto'
overflowstring | array | objectDefines the overflow style property. Default value: 'auto'
overflowXstring | array | objectDefines the overflow-x style property. Default value: 'auto'
overflowYstring | array | objectDefines 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" />