A Box is a div with styling props, allowing you to stay consistent with how you use other bridge components.

Use this in replacement of a div. It also includes flex properties - use Box as flexbox items with Flex

 
Hi
 
<Box bg="blue.1" width="100px" height="100px">
    Hi
</Box>
<Box bg="blue.1" width="100px" height="100px">
    Hi
</Box>

Common Props

Box includes COMMON, FLEX, and BORDER props. Read Common Props for details and API. These common props will override component props such as the color.

Component Props