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.
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 behavior 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	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"`
`"circle"`

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: <Box margin={{ top: "XXSmall", bottom: "XXSmall" }} />

spacingToken

spacingToken
`"none"`
`"XXXSmall"`
`"XXSmall"`
`"XSmall"`
`"small"`
`"medium"`
`"large"`
`"XLarge"`
`"XXLarge"`
`"XXXLarge"`