Overview
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.
Properties
| Properties | Description |
|---|---|
| tag | The underlying tag to render for Box, defaults to a div |
| className | The 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. |
| style | The 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. |
| ref | Box forwards its ref, any ref attached will apply to the current tag. |
| children | The Children prop allows users to pass other components as a property, enabling users to compose together components. |
Updated 6 months ago