Box

Use the Box component to control width, margin, padding, and color.

50% width

Box
<Box width={1/2} bg='blue'>
  Box
</Box>

Padding of theme.space[3] (16px)

Box
<Box p={3} bg='blue'>
  Box
</Box>

Margin of theme.space[2] (8px)

Box
<Box m={4} bg='blue'>
  Box
</Box>

Color blue from the theme's color palette

Box
<Box color='blue'>
  Box
</Box>

Background color green from the theme's color palette

Box
<Box bg='green'>
  Box
</Box>

Responsive Widths

The width prop accepts an array value to set different widths at different breakpoints with a mobile-first approach.

Hello
<Box
  width={[
    1,    // Sets width 100% at the smallest breakpoint
    1/2,  // Sets width 50% at the next breakpoint
    1/4,  // Sets width 25% at the next breakpoint
  ]}
  bg='gray'>
  Hello
</Box>

See styled-system for more documentation.

Props

PropTypeDescription
widthnumber, string, or arraySets the width of the element
colorstringSets color based on the theme's color palette
bgstringSets background-color based on the theme's color palette
mnumber, string, or arraySets margin based on the theme.space scale
mtnumber, string, or arraySets margin-top
mrnumber, string, or arraySets margin-right
mbnumber, string, or arraySets margin-bottom
mlnumber, string, or arraySets margin-left
mxnumber, string, or arraySets margin-left and margin-right
mynumber, string, or arraySets margin-top and margin-bottom
pnumber, string, or arraySets padding based on the theme.space scale
ptnumber, string, or arraySets padding-top
prnumber, string, or arraySets padding-right
pbnumber, string, or arraySets padding-bottom
plnumber, string, or arraySets padding-left
pxnumber, string, or arraySets padding-left and padding-right
pynumber, string, or arraySets padding-top and padding-bottom