@atlaskit/primitives/constellation/stack/examples.mdx

Primitives are token-backed low-level building blocks.

---
title: Stack
description: A stack manages the vertical layout of direct children using flexbox.
order: 0
---

import StackBasic from '../../examples/constellation/stack/basic';
import StackPracticalUseCase from '../../examples/constellation/stack/practical-use-case';
import StackSpaceBasic from '../../examples/constellation/stack/space-basic';
import StackAlignBlock from '../../examples/constellation/stack/align-block';
import StackAlignInline from '../../examples/constellation/stack/align-inline';
import StackSpread from '../../examples/constellation/stack/spread';
import StackGrow from '../../examples/constellation/stack/grow';
import StackAs from '../../examples/constellation/stack/as';

import { CodeDocsHeader } from '@af/design-system-docs-ui';

<CodeDocsHeader
	name="@atlaskit/primitives"
	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
	directoryName="primitives"
/>

## Basic

Use a stack component to efficiently lay-out a group of elements vertically.

Use the given props to configure display behavior using designs tokens, as shown in the more complex
examples below.

<Example Component={StackBasic} packageName="@atlaskit/primitives/stack" />

## Space

Control spacing between items with the `space` prop.

<Example Component={StackSpaceBasic} packageName="@atlaskit/primitives/stack" />

## Reverse content

`flex-direction: `column-reverse` is a pattern that has
[accessibility concerns](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#accessibility_concerns)
so stack doesn't support it.

If reversing content is required, we generally recommend to use JavaScript to reverse the JSX
content thereby preserving the tabbing order.

In situations where tabbing order changes based on different breakpoints, then we have
[show](/components/primitives/responsive/show/examples) and
[hide](/components/primitives/responsive/hide/examples) components that enable switching between
different orderings of content.

For non-tabbable content that needs to be reversed, `flex-direction: column-reverse` is supported in
XCSS. However, please be aware that we may lint against this in the future.

## Alignment

Control the alignment of items using the `alignBlock` and `alignInline` props which control
alignment in the vertical and horizontal axis respectively.

### Block alignment

<Example Component={StackAlignBlock} packageName="@atlaskit/primitives/stack" />

### Inline alignment

<Example Component={StackAlignInline} packageName="@atlaskit/primitives/stack" />

## Spread

Use the `spread` prop to set elements to stay together, spaced at the given value (default behavior)
or spread equally in the space available.

<Example Component={StackSpread} packageName="@atlaskit/primitives/stack" />

## Width control

By default a `Stack` will have its width influenced by the context where it appears. To control the
width use the `grow` prop with the values:

- `hug` (default) to use space only as required by its children, or
- `fill` to take all space provided by the parent element.

<Example Component={StackGrow} packageName="@atlaskit/primitives/stack" />

## Output element

It's possible to control the rendered HTML element with the `as` prop.

<Example Component={StackAs} packageName="@atlaskit/primitives/stack" />

## Practical use case

An example of how a stack component might be used in product, using Atlassian Design System
components.

<Example Component={StackPracticalUseCase} packageName="@atlaskit/primitives/stack" />