<Box /> is a low level component whose primary purpose is to provide a utility for easily controlling the spacing around elements in a consistent way using the spacing values.
Spacing with Box
<Box /> component allows you to control it's margin and padding properties for a chosen side.
Using spacing on a
<Box /> is like following a recipe, you select:
- The type of spacing, margin or padding
- The side to apply it to
- The amount of space to apply
xLeft & Right
yTop & Bottom
To get the correct spacing you choose one value from each of the above columns. For example, to get 8px of margin on the right side you would do.
<Box mr="small"> or if you wanted 40px of padding on all sides you would do
You can combine different spacing recipes to apply spacing to multiple sides at one time. For example if you wanted 16px of margin on the left and 20px of padding on the top you would do
<Box ml="medium" pt="large">
Below are a few more examples of building a spacing recipe to help clarify how to use spacing with the
Any one of the spacing properties can be passed an array of spacing sizes that will then apply at different breakpoints. There are 5 breakpoints slots that you can target. Here is an example of what that looks like.
Customizing a Box
Boxes provide a low-level customization interface which allows them to have different display properties, heights, widths, background colors, positioning, etc. Here are some examples:
Heights and Widths
Boxes can reference colors from the theme object, pulling any color on the theme's
Boxes can set positioning when needed.
Boxes can have borders.