Box

The Box component is a low-level primitive used for layout purposes. It can be used to create grid layouts, apply padding or margin, and more.

Style Props

The Box component utilizes styled-system style props, which makes connecting to our theme tokens quick and easy. See the reference table for a full list of available props.

Usage

Here's an example of putting text into a padded, bordered container.

<Box border={0} borderColor="border.highlight" p={6}>
  Look at me, I'm in a Box.
</Box>

Boxes can be nested and styled to create just about any layout.

<Box
  display="flex"
  border={0}
  borderColor="border.highlight"
  borderRadius="default"
  p={6}
>
  <Box p={2} bg="background.infoSubtle">
    This is a great song.
  </Box>
  <Box width="24px" />
  <Box p={2} bg="background.highlightSubtle">
    This is another great song.
  </Box>
</Box>

Using the as prop will render the Box component as any HTML element, which is helpful for maintaining semantic, accessible markup.

<Box as="section" border={0} borderColor="border.highlight" p={6}>
  This is now a section element.
</Box>