Stack

MaybeResponsive

Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string. - `T`: Base value that applies in all conditions. - `@container${string}`: Container query string for conditional responsive styling based on container size.

T | `@container${string}`

StackProps

• accessibilityLabel

  A label announced by assistive technologies that describes the purpose or contents of the element. Only set this when the element's visible content doesn't provide enough context on its own.

  string

• accessibilityRole

  The semantic meaning of the stack's content, used by assistive technologies. - `aside`: Supporting content related to the main content. - `footer`: Information such as copyright, navigation links, and privacy statements. - `header`: A page or section header. - `main`: The primary content of the page. - `section`: A generic section that should have a heading or `accessibilityLabel`. - `status`: A live region with advisory information that is not urgent. - `none`: Strips semantic meaning while keeping visual styling. - `navigation`: A major group of navigation links. - `ordered-list`: A list of ordered items. - `list-item`: An item inside a list. - `list-item-separator`: A divider between list items. - `unordered-list`: A list of unordered items. - `separator`: A divider that separates sections of content. - `alert`: Important, usually time-sensitive information. - `generic`: A nameless container with no semantic meaning (renders a `<div>`).

  'aside' | 'footer' | 'header' | 'main' | 'section' | 'status' | 'none' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'alert' | 'generic'

• alignContent

  Controls how lines of content are distributed along the cross axis when there is extra space. - `normal`: Default browser behavior. - `space-between`: Distributes lines evenly with no space at the edges. - `space-around`: Distributes lines evenly with equal space around each. - `space-evenly`: Distributes lines with equal space between and at the edges. - `stretch`: Stretches lines to fill the available space. - `center`: Packs lines toward the center. - `start`: Packs lines toward the start of the cross axis. - `end`: Packs lines toward the end of the cross axis.

  MaybeResponsive<Extract<StackProps$1['alignContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>>

• alignItems

  Controls how child elements are aligned along the cross axis. - `normal`: Default browser behavior. - `stretch`: Stretches children to fill the cross axis. - `center`: Centers children along the cross axis. - `start`: Aligns children to the start of the cross axis. - `end`: Aligns children to the end of the cross axis.

  MaybeResponsive<Extract<StackProps$1['alignItems'], 'normal' | 'stretch' | 'center' | 'start' | 'end'>>

• background

  The background color of the stack. - `base`: The standard background color for general content areas. - `subdued`: A muted background for secondary or supporting content. - `transparent`: No background color (the default).

  'base' | 'subdued' | 'transparent'

• blockSize

  The block size of the element (height in horizontal writing modes). Learn more about the [block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size). - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints.

  MaybeResponsive<SizeUnitsOrAuto>

• border

  A shorthand for setting the border width, color, and style in a single property. Individual border properties (`borderWidth`, `borderStyle`) can override values set here.

  BorderShorthand

• borderRadius

  The roundedness of the stack's corners. - `none`: Sharp corners with no rounding. - `small-100` / `small`: Subtle rounding for compact elements. - `base`: Standard rounding for most use cases. - `large` / `large-100`: More pronounced rounding for prominent containers. - `max`: Maximum rounding, creating a pill or circular shape. Supports 1-to-4-value shorthand syntax for specifying different radii per corner.

  MaybeAllValuesShorthandProperty<Extract<StackProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>

• borderStyle

  Controls the visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side: - One value: applies to all sides - Two values: applies to block sides (top/bottom) and inline sides (left/right) respectively - Three values: applies to block-start (top), inline sides (left/right), and block-end (bottom) respectively - Four values: applies to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) respectively

  MaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""

• borderWidth

  The thickness of the border on all sides. Supports 1-to-4-value shorthand syntax for specifying different widths per side. Overrides the width value set by `border`.

  MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''

• columnGap

  The spacing between child elements along the inline axis (horizontal in horizontal writing modes). Overrides the inline-axis value set by `gap`.

  MaybeResponsive<SpacingKeyword | "">

• direction

  The axis along which child elements are arranged, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values). - `block`: Children are stacked vertically (in horizontal writing modes). Content does not wrap. - `inline`: Children are arranged horizontally (in horizontal writing modes). Content wraps when it overflows.

  MaybeResponsive<"block" | "inline">

• display

  Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto`: The component’s initial value. The actual value depends on the component and context. - `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers. Learn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).

  MaybeResponsive<"auto" | "none">

• gap

  The spacing between child elements. A single value applies to both the inline and block axes. A pair of space-separated values (for example, `large-100 large-500`) sets the inline and block axes independently.

  MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>

• id

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

  string

• inlineSize

  The inline size of the element (width in horizontal writing modes). Learn more about the [inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size). - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints.

  MaybeResponsive<SizeUnitsOrAuto>

• justifyContent

  Controls how child elements are distributed along the main axis. - `normal`: Default browser behavior. - `space-between`: Distributes children evenly with no space at the edges. - `space-around`: Distributes children evenly with equal space around each. - `space-evenly`: Distributes children with equal space between and at the edges. - `stretch`: Stretches children to fill the available space. - `center`: Packs children toward the center. - `start`: Packs children toward the start of the main axis. - `end`: Packs children toward the end of the main axis.

  MaybeResponsive<Extract<StackProps$1['justifyContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>>

• maxBlockSize

  The maximum block size of the element (maximum height in horizontal writing modes). Learn more about the [max-block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).

  MaybeResponsive<SizeUnitsOrNone>

• maxInlineSize

  The maximum inline size of the element (maximum width in horizontal writing modes). Learn more about the [max-inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).

  MaybeResponsive<SizeUnitsOrNone>

• minBlockSize

  The minimum block size of the element (minimum height in horizontal writing modes). Learn more about the [min-block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).

  MaybeResponsive<SizeUnits>

• minInlineSize

  The minimum inline size of the element (minimum width in horizontal writing modes). Learn more about the [min-inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).

  MaybeResponsive<SizeUnits>

• overflow

  The overflow behavior of the element. - `visible`: Content that extends beyond the container is visible. - `hidden`: Content that extends beyond the container is clipped and not scrollable.

  'hidden' | 'visible'

• padding

  The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) **Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding.

  MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>

• paddingBlock

  The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. **Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`.

  MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">

• paddingBlockEnd

  The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`.

  MaybeResponsive<PaddingKeyword | "">

• paddingBlockStart

  The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`.

  MaybeResponsive<PaddingKeyword | "">

• paddingInline

  The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. **Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`.

  MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">

• paddingInlineEnd

  The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`.

  MaybeResponsive<PaddingKeyword | "">

• paddingInlineStart

  The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`.

  MaybeResponsive<PaddingKeyword | "">

• rowGap

  The spacing between child elements along the block axis (vertical in horizontal writing modes). Overrides the block-axis value set by `gap`.

  MaybeResponsive<SpacingKeyword | "">

SizeUnitsOrAuto

Represents size values that can also be set to `auto` for automatic sizing. - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints. Learn more about the [auto value](https://developer.mozilla.org/en-US/docs/Web/CSS/width#auto).

SizeUnits | "auto"

SizeUnits

Represents size values in pixels, percentages, or zero. - `` `${number}px` ``: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`). - `` `${number}%` ``: Relative size as a percentage of the parent container (such as `50%`, `100%`). - `0`: Zero size, equivalent to no dimension.

`${number}px` | `${number}%` | `0`

BorderShorthand

A shorthand string for specifying border properties. Accepts a size alone (`'base'`), size with color (`'base base'`), or size with color and style (`'base base dashed'`). Omitted values use their defaults.

ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`

ReducedBorderSizeKeyword

The subset of border size values available for this component. - `base`: Standard border width. - `large`: Thick border for strong emphasis. - `large-100`: Extra thick border for maximum prominence. - `large-200`: The thickest available border. - `none`: No border.

'base' | 'large' | 'large-100' | 'large-200' | 'none'

ReducedColorKeyword

The subset of border color values available for this component. - `base`: The standard border color for most contexts.

'base'

BorderStyleKeyword

The visual style of a border. Learn more about [border-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style). - `none`: No border is rendered. - `solid`: A single continuous line. - `dashed`: A series of short dashes. - `dotted`: A series of round dots. - `auto`: The border style is determined automatically based on the surface's design system.

"none" | "solid" | "dashed" | "dotted" | "auto"

MaybeAllValuesShorthandProperty

Represents CSS shorthand properties that accept one to four values, following the [CSS shorthand syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box). Supports specifying values for all four sides: top, right, bottom, and left. - `T`: Single value that applies to all four sides. - `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right). - `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom). - `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).

T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`

SpacingKeyword

SizeKeyword | "none"

SizeKeyword

The design system's size scale, used to control the dimensions of components like avatars, icons, and thumbnails. Values range from `"small-500"` (smallest) through `"base"` (standard) to `"large-500"` (largest). Not all components support every size — check the component's `size` property type for its available options.

"small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500"

MaybeTwoValuesShorthandProperty

Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values. - `T`: Single value that applies to both dimensions. - `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).

T | `${T} ${T}`

SizeUnitsOrNone

Represents size values that can also be set to `none` to remove the size constraint. - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `none`: No size constraint, allowing unlimited growth. Learn more about the [none value](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#none).

SizeUnits | "none"

PaddingKeyword

Defines the padding size for elements, using the standard size scale or `none` for no padding. - `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing. - `none`: No padding.

SizeKeyword | "none"