A Box component is one of the most basic layout components. Developers might want to think of it as a div, others can simply consider it a style-able container into which other components may be placed.

Beyond the standard attributes of className and style, Box accepts a tag property which lets users customize the underlying tag, allowing users to work semantically when needed.


tagThe underlying tag to render for Box, defaults to a div
classNameThe className property can be used to add a CSS class to a component that accepts styling. In Clutch, the className property powers the visual styling panel and the class name itself is auto-generated. Additional class names can be passed to the component by twirling open the className control and passing in strings.
styleThe style property accepts a CSS JavaScript object with camelCased properties rather than a CSS string. Using the style attribute as the primary means of styling elements is generally not recommended. The style is most often used in React applications to add dynamically-computed styles at render time. Learn more about the style property here.
refBox forwards its ref, any ref attached will apply to the current tag.
childrenThe Children prop allows users to pass other components as a property, enabling users to compose together components.