Box

Mostly used as a simple container or as a base to build other components.

Boxed content

Edit the code below to see your changes live!

API

Box

Prop Name
Type
Default
Description
asstring | React.ComponentType<any>

Use a different HTML tag or a different custom component

backgroundColorColor

Sets the background color given a color name from our palette.

shadowfloating | raised

Determines the type of shadow to be applied.

borderbox | boxError | none

Determines type of border to be applied.

borderBottombox | boxError | none

Determines type of bottom border to be applied.

borderLeftbox | boxError | none

Determines type of left border to be applied.

borderRightbox | boxError | none

Determines type of right border to be applied.

borderTopbox | boxError | none

Determines type of top border to be applied.

borderRadiusnormal | circle | none

Determines type of border radius to be applied.

clearfixboolean

Adds a clearfix for floating internal elements.

Props ending with * are required

Inherited Props

Expand

Display Props

Expand

Margin Props

Expand

Padding Props

Examples

Box also supports multiple shadows, here is an example of how they look like:

Floating
Raised

Edit the code below to see your changes live!

Box is extendable, here is an example on how to create an Avatar component extending from Box with a couple of extra styles:

BC

Edit the code below to see your changes live!

Beta