v0.27.0
Mostly used as a simple container or as a base to build other components.
Edit the code below to see your changes live!
Prop Name | Type | Default | Description |
---|---|---|---|
as | string | React.ComponentType<any> |
| Use a different HTML tag or a different custom component |
backgroundColor | Color |
| Sets the background color given a color name from our palette. |
shadow | floating | raised |
| Determines the type of shadow to be applied. |
border | box | boxError | none |
| Determines type of border to be applied. |
borderBottom | box | boxError | none |
| Determines type of bottom border to be applied. |
borderLeft | box | boxError | none |
| Determines type of left border to be applied. |
borderRight | box | boxError | none |
| Determines type of right border to be applied. |
borderTop | box | boxError | none |
| Determines type of top border to be applied. |
borderRadius | normal | circle | none |
| Determines type of border radius to be applied. |
clearfix | boolean |
| Adds a clearfix for floating internal elements. |
zIndex | sticky | fixed | modalBackdrop | modal | tooltip | popover |
| Determines type of z-index to be applied. Types are in order (sticky is low, popover is high). |
Props ending with * are required
Display Props
Margin Props
Padding Props
Box also supports multiple shadows, here is an example of how they look like:
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:
Edit the code below to see your changes live!