Box

The Box component serves as a wrapper component for most layout related needs. Use Box to set values such as display, width, height, and more. In addition, an Animation motion effect can be enabled.

Default example

Box can be used to create block level elements & more
Default label
<Box>
 <Label m={1}>Box can be used to create block level elements & more</Label>
</Box>

<Label m={1}>Default label</Label>

System props

Box components get the BACKGROUND, COMMON, LAYOUT, MISC, and POSITION categories of system props. Read the System Props doc page for a full list of available props.

Component props

Prop nameTypeDefaultDescription
isStringdivsets the HTML tag for the component
animationObjectOptional. Animation effects can be enabled when the animation prop is defined. Available animation props are: name, duration, delay, effect, iteration, direction, fill, play. Their purpose and prop type values are the same as the corresponding CSS specification. View the Animation docs for some examples.
transitionObjectOptional. If you fancy some CSS transition effects, use prop; it's an object that if its respective props are defined, you can do some neat things, simply.

Available transition props are: delay, duration, property and effect. Their purpose and prop type values are the same as the corresponding CSS specification. Check out the Animation component's Component props section for additional, related info.