Stack

Stack

import Stack from "@kiwicom/orbit-components/lib/Stack";
<Stack>
<Button>My button</Button>
<Button iconRight={<ChevronDown />} />
</Stack>

Props

NameTypeDefaultDescription
asstring"div"The string used for the root node.
alignenum"start"The align-items and align-content of the Stack.
basisstringautoSpecifies the basis value of flex-basis.
childrenReact.NodeContent of the Stack.
dataTeststringOptional prop for testing purposes.
desktopObjectObject for setting up properties for the desktop viewport. See Media queries
directionenumThe flex-direction of the Stack. See Functional specs
flexbooleanfalseIf true or you specify some flex attribute, the Stack will use flex attributes.
growbooleantrueIf true, the Stack will have flex-grow set to 1, otherwise it will be 0.
inlinebooleanfalseIf true, the Stack will have display set to inline-flex.
justifyenum"start"The justify-content of the Stack.
largeDesktopObjectObject for setting up properties for the largeDesktop viewport. See Media queries
largeMobileObjectObject for setting up properties for the largeMobile viewport. See Media queries
mediumMobileObjectObject for setting up properties for the mediumMobile viewport. See Media queries
shrinkbooleanfalseIf true, the Stack will have flex-shrink set to 1.
spacingspacing"medium"The spacing between its children.
spaceAfterenumAdditional padding to bottom of the Stack.
tabletObjectObject for setting up properties for the tablet viewport. See Media queries
wrapbooleanfalseIf true, the Stack will have flex-wrap set to wrap, otherwise it will be nowrap.
legacybooleanfalseIf true, the Stack will be using margins instead of gap

Media Queries

NameTypeDefaultDescription
alignenum"start"The align-items and align-content of the Stack.
basisstringautoSpecifies the basis value of flex-basis.
directionenum"row"The flex-direction of the Stack.
growbooleantrueIf true, the Stack will have flex-grow set to 1, otherwise it will be 0.
inlinebooleanfalseIf true, the Stack will have display set to inline-flex, otherwise it will be flex.
justifyenum"start"The justify-content of the Stack.
shrinkbooleantrueIf false, the Stack will have flex-shrink set to 0.
spacingspacingThe spacing between its children.
spaceAfterenumAdditional padding to bottom of the Stack.
wrapbooleanfalseIf true, the Stack will have flex-wrap set to wrap, otherwise it will be nowrap.

Functional specs

enum

justifydirectionalignspaceAfter
"start""row""start""none"
"end""column""end""smallest"
"center""row-reverse""center""small"
"between""column-reverse""stretch""normal"
"around""medium"
"large"
"largest"

spacing

namesize on 992px - ∞
"none"null
"XXXSmall" - deprecated (use "50")2px
"XXSmall" - deprecated (use "100")4px
"XSmall" - deprecated (use "200")8px
"small" - deprecated (use "300")12px
"medium" - deprecated (use "400")16px
"large" - deprecated (use "600")24px
"XLarge" - deprecated (use "800")32px
"XXLarge" - deprecated (use "1000")40px
"50"2px
"100"4px
"150"6px
"200"8px
"300"12px
"400"16px
"500"20px
"600"24px
"800"32px
"1000"40px
"1200"48px
"1600"64px