To implement the Stack component into your project you’ll need to add the import:

import Stack from "@kiwicom/orbit-components/lib/Stack";

After adding import to your project you can use it simply like:

<Stack>
  <Button>My button</Button>
  <Button iconRight={<ChevronDown />} />
</Stack>

The table below contains all types of props available in the Stack component.

When you need to specify some different behavior of the Stack component on different viewports, you can use properties for it. There are mediumMobile, largeMobile, tablet, desktop and largeDesktop available and it behaves the same as mediaQueries functions. All these properties - objects have the same own properties and none is required.

• The default behavior for the Stack component is to not be a flexbox container. It means that by default it’s nesting children natively (below each other) and it won’t use any flex CSS properties.

• If you specify some property (except children, spaceAfter, dataTest and spacing) it will become a flexbox container and the flex-direction: row will be used.