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
alignX?
"left" | "center" | "right";
alignY?
"center" | "top" | "bottom";
aria-describedby?
string;
aria-details?
string;
aria-label?
string;
aria-labelledby?
string;
aria-live?
"off" | "polite" | "assertive";
- 'off': Updates are not announced unless focused.
- 'polite': Updates are announced when the user is idle.
- 'assertive': Updates are announced immediately, interrupting other announcements.
asList?
boolean;
"false"
children?
ReactNode;
id?
string;
role?
"region" | (string & {});
region
is used as a role, an aria-label
or aria-labelledby
must be provided.
See MDN.space?
GapSpaceProp;
0
stretch?
boolean;
"false"
Alternative components
Inline: If you need to have the elements displayed in a row you should use our inline component.