Bain Logo

Box*

Jump to Props

A supercharged "div", ready for all styled-system props.

*Box is the most abstract component, on top of which all other components are built. By default, it renders a div element and it exposes all of the styled-system props.

The Box component is useful because it helps with 3 common use cases:

  1. Create responsive layouts with ease by passing values as an array.
  2. Access the global theme object and pass styles via styled-system props, instead of writing custom css or styles.
  3. Compose new component and allow for override using the as prop.

Import

Use

I am a box!
I am a box!
I am a also a box!

The as prop.

By default, <Box /> renders a div HTML element. Just like when writing normal HTML, you should consider the semantic meaning of your markup and change the rendered element by passing the name of the element to the as prop.

This prop is passed via the Emotions as prop.

I am a card in a series of cards, so good to use the <article> element

Compose anything

You can even use the as prop to create new interactable elements like buttons.

Adding CSS pseudo-selectors

If you need to add pseudo-selectors or just write 'regular' CSS, you should always extend Box via Emotion's styled function. This will greatly lessen the amount of CSS you need to write.

To access the theme object within the CSS block, use the themeGet function.

Example

Spacing and layout

You save a lot of time avoiding writing CSS for margin and padding by using the space and layout based styled-system props.

Have a play with the example below by changing padding, margin and flex properties of the Boxes.

Try me out!
Or me!

Further reading

You can read more about the space styled-system prop and more on the styled-system website.

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
childrenReactNode

The content to render

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy