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:
Table below contains all types of the props available in the Box component.
Namedata-transfer-vertical Type Default Description as string"div"Render as element. className stringThe optional className of Box. children React.NodeThe children of the Box. dataTest stringOptional prop for testing purposes. id stringSet id for Box display enumThe display of the Box padding spacingObjectspacingTokenThe padding of the Box margin spacingObjectspacingTokenThe margin of the Box wrap enumThe flex-wrap of the Box shrink numberThe flex-shrink of the Box grow numberThe flex-grow of the Box align enumThe align-items of the Box justify enumThe justify-content of the Box direction enumThe flex-direction of the Box width enumThe width of the Box minWidth stringThe min-width of the Box maxWidth stringThe max-width of the Box height enumThe height of the Box maxHeight stringThe max-height of the Box position positionThe position of the Box left stringThe left of the Box zIndex numberThe z-index of the Box top stringThe top of the Box right stringThe right of the Box bottom stringThe bottom of the Box textAlign textAlignThe text-align of the Box elevation elevationThe box-shadow of the Box color stringThe color of the Box background stringThe background of the Box borderRadius borderRadiusThe border-radius of the Box overflow overflowThe overflow of the Box largeDesktop MediaQueriesObject for setting up properties for the largeDesktop viewport. desktop MediaQueriesObject for setting up properties for the desktop viewport. tablet MediaQueriesObject for setting up properties for the tablet viewport. largeMobile MediaQueriesObject for setting up properties for the largeMobile viewport. mediumMobile MediaQueriesObject for setting up properties for the mediumMobile viewport.
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.
Namedata-transfer-vertical Type Default Description padding spacingObjectspacingTokenThe padding of the Box margin spacingObjectspacingTokenThe margin of the Box wrap enumThe flex-wrap of the Box shrink numberThe flex-shrink of the Box grow numberThe flex-grow of the Box align enumThe align-items of the Box justify enumThe justify-content of the Box direction enumThe flex-direction of the Box width enumThe width of the Box maxWidth stringThe max-width of the Box height enumThe height of the Box maxHeight stringThe max-height of the Box position positionThe position of the Box left stringThe left of the Box top stringThe top of the Box right stringThe right of the Box bottom stringThe bottom of the Box textAlign textAlignThe text-align of the Box elevation elevationThe box-shadow of the Box color stringThe color of the Box background stringThe background of the Box borderRadius borderRadiusThe border-radius of the Box overflow overflowThe overflow of the Box
display justify direction align wrap width height "none""start""row""start""nowrap""full""full""flex""end""column""end""wrap""auto""auto""inline-flex""center""row-reverse""center"stringstring"block""between""column-reverse""stretch""inline""around""inline-block""list-item"
position "relative""absolute""fixed"
textAlign "start""end""left""center""right"
borderRadius "full""50""100""150""200""300""400"
overflow "auto""hidden""scroll""visible"
elevation "fixed""fixedReverse""level1""level2""level3""level3Reverse""level4"
If you want to define spacingObject, you can define specific directions like this:
<Box margin={{ top: "XXSmall", bottom: "XXSmall" }} />
spacingToken "none""50""100""150""200""300""400""500""600""800""1000""1200""1600"