Stack

a container that stacks contents on top of each other

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

anchor

Where to anchor children from. If not specified, children fill the guiding child's area.

"center""left""right""top""bottom""top-left""bottom-left""top-right""bottom-right"

fill

Whether to expand to fill all of the available width and height in the parent container.

"horizontal""vertical"truefalse

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

guidingChild

Which child to guide layout from. All other children will be positioned within that area. Defaults to 'first'.

number"first""last"

interactiveChild

Which child to restrict user interaction to. All other children will have user interaction disabled.

number"first""last"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

Theme

stack.extend

Any additional style for the control of the Stack component.

"any CSS"

(props) => {}