Stack

The <Stack> component is a responsive layout component based on CSS Flexbox. The stack is basically a flexbox column that acts as a container that aligns its children vertically in new lines. The component should be used wherever you need to arrange elements stacked on top of each other.

Use the stack component in combination with other layout components to easily create customized layouts.

Usage

The use of <Stack> is recommended if you have two or more elements that must be the same distance apart. For the space you have to use our supported space values.

In this example you can see, the space prop ensures that each child is separated by the same space which maintains visual consistency.

Stack as list

The <Stack> component can also be used to render a list of items. This is useful for screen readers and accessibility. To use the stack as a list, you need to set the asList property to true. This will render each child as a list item.

Different alignment

Of course you can align the elements inside of the stack vertically and horizontally. This is useful if you need to place certain items at a certain position. For vertical alignment you need to set the alignY property and the stretch property to true. The stretch property stretches the stack to fill the space of the parent element.

With the vertical align you can align the children on top, center or bottom.

For horizontal alignment of the children, the children need to have a defined width given so it can align inside the stack container.

To align the children horizontal you have to use the alignX property. Options are right, center and left.

Nested stacks

Sometimes you may need complexer layouts to arrange your elements, with the stack component you can also nest stacks within stacks. So you can build complex structures and constructs but without breaking the layout.

The following example shows how stacks can be nested within each other. You see how a stack will behave with a inline and split component.

Props

"left" | "center" | "right";

"center" | "top" | "bottom";

string;

string;

string;

string;

"off" | "polite" | "assertive";

boolean;

"false"

ReactNode;

string;

"region" | (string & {});

GapSpaceProp;

0

boolean;

"false"

Alternative components

• Inline: If you need to have the elements displayed in a row you should use our inline component.

Related