Box
Overview
The Box component is a wrapper component that can be used to wrap any content. It can be used to apply padding the content. It returns a div by default, but can be changed to any other HTML tag.
When to use
t.b.d.
When to consider an alternative
t.b.d.
Component
Default
The default has no padding.
Spacing
Use one of the predefined spacing tokens Box.Spacer.space2xl to apply padding either equally or to each side of the Box.
With Tag
Set the tag property to apply a semantic tag to the Box component.
<Box tag="article" /> returns <article></article>
Properties
Default
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| utilClassNames | String | false | - | |
| children | Node | false | - | |
| boxRef | Shape {
"current": "Any"
} | false | - | |
| tag | String | false | div | |
| padding | Enum | false | - | Exported as `Box.Spacer.space` etc. |
| paddingLeft | Enum | false | - | Exported as `Box.Spacer.space` etc. |
| paddingRight | Enum | false | - | Exported as `Box.Spacer.space` etc. |
| paddingTop | Enum | false | - | Exported as `Box.Spacer.space` etc. |
| paddingBottom | Enum | false | - | Exported as `Box.Spacer.space` etc. |