Box
Overview
Box is a base component that is used to create other components. Using different values for properties like border, border radius, and drop shadow, it can be turned into form field, button, panel, etc.
Implementation
Used as a simple container or as a base to build other components.
Edit the code below to see your changes live!
<Box backgroundColor="secondary20" border="box" borderRadius="normal" padding="medium" > Boxed content </Box>
Props
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. |
Props ending with * are required
Inherited
Display Props
Margin Props
Padding Props
Do's and Don'ts
Do |
|---|
Apply 4px corner radius for all rectangular standalone components. |
Apply raised drop shadow style to make the content on the grey background of the page stand out (panels). |
Apply floating drop shadow style for elements that appear on top of the content of the page (pop-overs, alerts, drop menus, etc.). |
Don't |
|---|
Use any other corner radius values. |