Stack

A stack manages the vertical layout of direct children using flexbox.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/primitives`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/primitives, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`alignBlock`
Description	Used to align children along the block axis (typically vertical).
Type	`"center" \| "start" \| "end" \| "stretch"`

`alignInline`
Description	Used to align children along the inline axis (typically horizontal).
Type	`"center" \| "start" \| "end" \| "stretch"`

`as`
Description	The DOM element to render as the Stack. Defaults to `div`.
Type	`"div" \| "dl" \| "ol" \| "span" \| "ul"`

`children`
Required
Description	Elements to be rendered inside the Stack.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`data-testid`
Description	`data-testid` is strictly controlled through the `testId` prop. This lets consumers know that this data attribute will not be applied.
Type	`never`

`grow`
Description	Used to set whether the container should grow to fill the available space.
Type	`"fill" \| "hug"`

`ref`
Description	No description.
Type	`((instance: any) => void) \| RefObject<any>`

`role`
Description	Accessible role.
Type	`string`

`space`
Description	Represents the space between each child.
Type	`"space.0" \| "space.025" \| "space.050" \| "space.075" \| "space.100" \| "space.150" \| "space.200" \| "space.250" \| "space.300" \| "space.400" \| "space.500" \| "space.600" \| "space.800" \| "space.1000"`

`spread`
Description	Used to distribute the children along the main axis.
Type	`string`"space-between"

`testId`
Description	A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`xcss`
Description	Apply a subset of permitted styles powered by Atlassian Design System design tokens.
Type	`false \| (XCSSValue<"appearance" \| "color" \| "maxWidth" \| "grid" \| "borderColor" \| "clipPath" \| "filter" \| "marker" \| "mask" \| "height" \| "width" \| "translate" \| "content" \| "border" \| ... 487 more ... \| "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; })`

Was this page helpful?

We use this feedback to improve our documentation.