Live Code
Storybook
Usage
Box
The Box component is a simple container around content or other components.
<Box>{/* Content goes here */}</Box>Border
You can define border color, radius, style and width using the borderColor, borderRadius, borderStyle and borderWidth props.
<Box borderColor="basic" borderRadius="200" borderWidth="100" borderStyle="dashed">
{/* Content goes here */}
</Box>If you need set responsive border radius, you can use an object:
<Box borderRadius={{ mobile: '200', tablet: '300', desktop: '400' }}>{/* Content goes here */}</Box>The borderColor, borderRadius, and borderStyle props are applied only if borderWidth is greater than 0.
Padding
You can define padding using the padding prop.
<Box padding="space-200">{/* Content goes here */}</Box>It is also possible to define padding for horizontal and vertical sides using the paddingX and paddingY props.
<Box paddingX="space-200" paddingY="space-300">
{/* Content goes here */}
</Box>You can also define padding for each side using the paddingTop, paddingRight, paddingBottom, and paddingLeft props.
<Box paddingTop="space-200" paddingRight="space-300" paddingBottom="space-400" paddingLeft="space-500">
{/* Content goes here */}
</Box>Responsive values can be set for each prop using an object:
<Box padding={{ mobile: 'space-200', tablet: 'space-300', desktop: 'space-400' }}>{/* Content goes here */}</Box>Background Color
You can define background color using the backgroundColor prop.
<Box backgroundColor="primary">{/* Content goes here */}</Box>Background Gradient
You can define background gradient using the backgroundGradient prop.
<Box backgroundGradient="primary">{/* Content goes here */}</Box>
<Box backgroundGradient="secondary">{/* Content goes here */}</Box>Responsive values can be set for each prop using an object:
<Box backgroundGradient={{ mobile: 'primary', tablet: 'secondary', desktop: 'primary' }}>{/* Content goes here */}</Box>Text Color
You can define text color using the textColor prop.
<Box textColor="primary">{/* Content goes here */}</Box>API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| backgroundColor | [Background Color dictionary | neutral ✕ Intensity dictionary | AccentColorNamesType ✕ Intensity dictionary | EmotionColorNamesType ✕ Intensity dictionary] | - | ✕ | Background color of the Box |
| backgroundGradient | Background Gradient dictionary | - | ✕ | Background gradient of the Box |
| borderColor | [Border Color dictionary | AccentColorNamesType ✕ Intensity dictionary | EmotionColorNamesType ✕ Intensity dictionary] | - | ✕ | Border color of the Box |
| borderRadius | [BorderRadiiTokenType | Responsive<BorderRadiiTokenType>] | - | ✕ | Border radius of the Box |
| borderStyle | Border Style dictionary | solid | ✕ | Border style of the Box |
| borderWidth | Border Width dictionary | - | ✕ | Border width of the Box |
| elementType | ElementType | div | ✕ | Type of element |
| padding | [SpaceToken | Responsive<SpaceToken>] | - | ✕ | Padding of the Box |
| paddingX | [SpaceToken | Responsive<SpaceToken>] | - | ✕ | Horizontal padding of the Box |
| paddingY | [SpaceToken | Responsive<SpaceToken>] | - | ✕ | Vertical padding of the Box |
| paddingTop | [SpaceToken | Responsive<SpaceToken>] | - | ✕ | Padding top of the Box |
| paddingRight | [SpaceToken | Responsive<SpaceToken>] | - | ✕ | Padding right of the Box |
| paddingBottom | [SpaceToken | Responsive<SpaceToken>] | - | ✕ | Padding bottom of the Box |
| paddingLeft | [SpaceToken | Responsive<SpaceToken>] | - | ✕ | Padding left of the Box |
| textColor | [TextColorNamesType | neutral ✕ Intensity dictionary | AccentColorNamesType ✕ Intensity dictionary | EmotionColorNamesType ✕ Intensity dictionary] | - | ✕ | Color of the text |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.