Box is one of the core components. It serves as a wrapper for most layout needs (e.g. grids and spacing).
The Box component wraps your component. It creates a new DOM element, a div-element by default that can be changed with the “as” property.
Simple box setting backgroundcolor, width 50% and padding
A Box generating a span instead of a div
Always prefer to use the Box element instead of a div. It will still be a div element but with the added properties of styling.