Last updated 57 minutes ago

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

NameTypeDefaultDescription
mstring | array | object0Defines the margin style property.
mtstring | array | object0Defines the margin-top style property.
mrstring | array | object0Defines the margin-right style property.
mbstring | array | object0Defines the margin-bottom style property.
mlstring | array | object0Defines the margin-left style property.
mxstring | array | object0Defines the margin-left and margin-right style property.
mystring | array | object0Defines the margin-top and margin-bottom style property.
pstring | array | object0Defines the padding style property.
ptstring | array | object0Defines the padding-top style property.
prstring | array | object0Defines the padding-right style property.
pbstring | array | object0Defines the padding-bottom style property.
plstring | array | object0Defines the padding-left style property.
pxstring | array | object0Defines the padding-left and padding-right style property.
pystring | array | object0Defines the padding-top and padding-bottom style property.

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
<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
<Box height="25%" />
<Box height="50%" />
<Box height="75%" />
<Box height="100%" />
<Box height="auto" />

Props

NameTypeDefaultDescription
widthstring | array | object'auto'Defines the width style property.
maxWidthstring | array | object'none'Defines the max-width style property.
heightstring | array | object'auto'Defines the height style property.
minHeightstring | array | object'auto'Defines the min-height style property.
sizestring | array | object'auto'Defines the width and height style property.
overflowstring | array | object'auto'Defines the overflow style property.
overflowXstring | array | object'auto'Defines the overflow-x style property.
overflowYstring | array | object'auto'Defines overflow-y style property.

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.

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