Stack
Installation
yarn add @spark-web/stack@spark-web/stackUsed to distribute children vertically, with even spacing between each child.
Examples
Gap
The spacing between children can be adjusted using the gap prop.
Horizontal alignment
Items can be aligned horizontally using the align prop.
Dividers
Use the dividers property to render a Divider between each
element in the Stack.
Nesting
Nest Stack components to create more complex white space rules.
Props
| Prop | Type | Description |
|---|---|---|
align? | ResponsiveProp<"right" | "left" | "center" | "stretch"> | Horizontally align items within the stack. |
alignSelf? | ResponsiveProp<"start" | "center" | "end" | "stretch"> | Overrides the parent's `align-items` value. Controls the alignment of item's on the cross axis. |
background? | "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | ... 23 more ... | "positiveMuted" | The `background` property sets the background color of an element. |
border? | ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive"> | The `border` property sets the color of an element's border. |
borderBottom? | ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive"> | The `border` property sets the color of an element's border on the bottom side. |
borderLeft? | ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive"> | The `border` property sets the color of an element's border on the left side. |
borderRadius? | ResponsiveProp<"small" | "medium" | "large" | "full"> | The `borderRadius` property rounds the corners of an element's outer border edge. |
borderRight? | ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive"> | The `border` property sets the color of an element's border on the right side. |
borderTop? | ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive"> | The `border` property sets the color of an element's border on the top side. |
borderWidth? | ResponsiveProp<"large" | "standard"> | The `borderWidth` property sets the width of an element's border. |
bottom? | ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>> | The `bottom` property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements. |
children? | ReactNode: string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Children element to be rendered inside the component. |
cursor? | "default" | "pointer" | The `cursor` property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. |
data? | DataAttributeMap | Sets data attributes on the component. |
dividers? | boolean | Place a divider between each element. |
flex? | ResponsiveProp<0 | 1> | The `flex` shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. |
flexGrow? | ResponsiveProp<0 | 1> | The `flexGrow` property sets the flex grow factor of a flex item main size. |
flexShrink? | ResponsiveProp<0 | 1> | The `flexShrink` property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`. |
gap? | ResponsiveProp<"small" | "medium" | "large" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge"> | The size of the gap between each child element. |
height? | ResponsiveSizing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "full" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "full">> | Sets the element's height. |
id? | string | An identifier which must be unique in the whole document. |
left? | ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>> | The `left` property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. |
margin? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `margin` shorthand property sets the margin area on all four sides of an element at once. |
marginBottom? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `marginBottom` property sets the margin area on the bottom side of an element. |
marginLeft? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `marginLeft` property sets the margin area on the left side of an element. |
marginRight? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `marginRight` property sets the margin area on the right side of an element. |
marginTop? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `marginTop` property sets the margin area on the top side of an element. |
marginX? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `marginY` shorthand property sets the margin area on the left and right of the element. |
marginY? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `marginY` shorthand property sets the margin area on the top and bottom of the element. |
minHeight? | 0 | The `minHeight` property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for `minHeight`. |
minWidth? | 0 | The `minWidth` property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for `minWidth`. |
opacity? | ResponsiveProp<number>: number | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", number>> | Sets the opacity of the element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. |
overflow? | "hidden" | "scroll" | "visible" | "auto" | The `overflow` shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions. |
padding? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `padding` shorthand property sets the padding area on all four sides of an element at once. |
paddingBottom? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `paddingBottom` property sets the height of the padding area on the bottom of an element. |
paddingLeft? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `paddingLeft` property sets the width of the padding area on the left of an element. |
paddingRight? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `paddingRight` property sets the width of the padding area on the right of an element. |
paddingTop? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `paddingTop` property sets the height of the padding area on the top of an element. |
paddingX? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `paddingX` shorthand property sets the padding area on the left and right of the element. |
paddingY? | ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">> | The `paddingY` shorthand property sets the padding area on the top and bottom of the element. |
position? | ResponsiveProp<"absolute" | "fixed" | "relative" | "sticky"> | The `position` property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements. |
right? | ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>> | The `right` property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. |
shadow? | "small" | "medium" | "large" | The `boxShadow` property adds shadow effects around an element's frame. |
top? | ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>> | The `top` property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements. |
userSelect? | "none" | The `userSelect` property controls whether the user can select text. |
width? | ResponsiveSizing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "full" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "full">> | Sets the element's width. |
zIndex? | ResponsiveProp<"sticky" | "dropdownBlanket" | "dropdown" | "modalBlanket" | "modal" | "notification"> | The `zIndex` property sets the "z-order" of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one. |
Stack props also include Box props and are not listed here
(excludes display, className, alignItems, flexDirection,
justifyContent and flexWrap).
Extra props are also passed into the underlying Box component.