Developer mode
Opens components on the React tab by default.
Your bookmarks

Box / React

Offers a universal building block for layouts.

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.
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
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

justify direction align wrap shrink width height
"start" "row" "start" "nowrap" 0 "full" "full"
"end" "column" "end" "wrap" 1 "auto" "auto"
"center" "row-reverse" "center"
"between" "column-reverse" "stretch"
"around"

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

key value
"top" spacingToken
"right" spacingToken
"left" spacingToken
"bottom" spacingToken

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"