To implement Box component into your project you’ll need to add the import:
import Box from "@kiwicom/orbit-components/lib/Box";
After adding import into your project you can use it simply like:
<Box>Hello World!</Box>
Props
Table below contains all types of the props available in the Box component.
Name |
Type |
Default |
Description |
as |
string |
"div" |
Render as element. |
className |
string |
|
The optional className of Box. |
children |
React.Node |
|
The children of the Box. |
dataTest |
string |
|
Optional prop for testing purposes. |
display |
enum |
|
The display of the Box |
padding |
spacingObject | spacingToken |
|
The padding of the Box |
margin |
spacingObject | spacingToken |
|
The margin of the Box |
wrap |
enum |
|
The flex-wrap of the Box |
shrink |
enum |
|
The flex-shrink of the Box |
grow |
enum |
|
The flex-grow of the Box |
align |
enum |
|
The align-items of the Box |
justify |
enum |
|
The justify-content of the Box |
direction |
enum |
|
The flex-direction of the Box |
width |
enum |
|
The width of the Box |
minWidth |
string |
|
The min-width of the Box |
maxWidth |
string |
|
The max-width of the Box |
height |
enum |
|
The height of the Box |
maxHeight |
string |
|
The max-height of the Box |
position |
position |
|
The position of the Box |
left |
string |
|
The left of the Box |
top |
string |
|
The top of the Box |
right |
string |
|
The right of the Box |
bottom |
string |
|
The bottom of the Box |
textAlign |
textAlign |
|
The text-align of the Box |
elevation |
elevation |
|
The box-shadow of the Box |
color |
string |
|
The color of the Box |
background |
string |
|
The background of the Box |
borderRadius |
borderRadius |
|
The border-radius of the Box |
overflow |
overflow |
|
The overflow of the Box |
largeDesktop |
MediaQueries |
|
Object for setting up properties for the largeDesktop viewport. |
desktop |
MediaQueries |
|
Object for setting up properties for the desktop viewport. |
tablet |
MediaQueries |
|
Object for setting up properties for the tablet viewport. |
largeMobile |
MediaQueries |
|
Object for setting up properties for the largeMobile viewport. |
mediumMobile |
MediaQueries |
|
Object for setting up properties for the mediumMobile viewport. |
Media Queries
When you need to specify some different behaviour of the Box component on different viewport, you can use properties for it.
There are mediumMobile
, largeMobile
, tablet
, desktop
and largeDesktop
available and it behaves the same as mediaQueries functions.
All this properties – objects have the some own properties and none is required.
Name |
Type |
Default |
Description |
padding |
spacingObject | spacingToken |
|
The padding of the Box |
margin |
spacingObject | spacingToken |
|
The margin of the Box |
wrap |
enum |
|
The flex-wrap of the Box |
shrink |
enum |
|
The flex-shrink of the Box |
grow |
enum |
|
The flex-grow of the Box |
align |
enum |
|
The align-items of the Box |
justify |
enum |
|
The justify-content of the Box |
direction |
enum |
|
The flex-direction of the Box |
width |
enum |
|
The width of the Box |
maxWidth |
string |
|
The max-width of the Box |
height |
enum |
|
The height of the Box |
maxHeight |
string |
|
The max-height of the Box |
position |
position |
|
The position of the Box |
left |
string |
|
The left of the Box |
top |
string |
|
The top of the Box |
right |
string |
|
The right of the Box |
bottom |
string |
|
The bottom of the Box |
textAlign |
textAlign |
|
The text-align of the Box |
elevation |
elevation |
|
The box-shadow of the Box |
color |
string |
|
The color of the Box |
background |
string |
|
The background of the Box |
borderRadius |
borderRadius |
|
The border-radius of the Box |
overflow |
overflow |
|
The overflow of the Box |
enum
display |
justify |
direction |
align |
wrap |
shrink |
width |
height |
"none" |
"start" |
"row" |
"start" |
"nowrap" |
0 |
"full" |
"full" |
"flex" |
"end" |
"column" |
"end" |
"wrap" |
1 |
"auto" |
"auto" |
"inline-flex" |
"center" |
"row-reverse" |
"center" |
|
|
|
|
"block" |
"between" |
"column-reverse" |
"stretch" |
|
|
|
|
"inline" |
"around" |
|
|
|
|
|
|
"inline-block" |
|
|
|
|
|
|
|
position
position |
"relative" |
"absolute" |
"fixed" |
textAlign
textAlign |
"left" |
"center" |
"right" |
borderRadius
borderRadius |
"small" |
"normal" |
"large" |
"radiusCircle" |
overflow
overflow |
"auto" |
"hidden" |
"scroll" |
"visible" |
elevation
elevation |
"action" |
"fixed" |
"overlay" |
"raised" |
spacingObject
If you want to define spacingObject
, you can define specific directions like this:
spacingToken
spacingToken |
"none" |
"XXXSmall" |
"XXSmall" |
"XSmall" |
"small" |
"medium" |
"large" |
"XLarge" |
"XXLarge" |
"XXXLarge" |