# StackProps Source: /tuil/docs/reference/packages/ink/api/stack-props Locale: en interface exported by @mwillbanks/tuil-ink. {/* Generated by tooling/docs/generate-reference.ts. */} ## interface [#interface] Public interface exported by `@mwillbanks/tuil-ink`. ```ts export interface StackProps extends Omit { readonly direction?: "row" | "column"; readonly gap?: number | SpacingToken; } ``` ## Members [#members] | Member | Type | Required | Description | Related types | | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | `direction` | `"row" \| "column" \| undefined` | No | The `direction` member uses the `"row" \| "column" \| undefined` contract. | — | | `gap` | `number \| SpacingToken \| undefined` | No | The `gap` member uses the `number \| SpacingToken \| undefined` contract. | [`SpacingToken`](/tuil/docs/reference/packages/theme/api/spacing-token) | | `children` | `ReactNode` | No | The `children` member uses the `ReactNode` contract. | — | | `id` | `string \| undefined` | No | The `id` member uses the `string \| undefined` contract. | — | | `padding` | `number \| SpacingToken \| undefined` | No | The `padding` member uses the `number \| SpacingToken \| undefined` contract. | [`SpacingToken`](/tuil/docs/reference/packages/theme/api/spacing-token) | | `margin` | `number \| SpacingToken \| undefined` | No | The `margin` member uses the `number \| SpacingToken \| undefined` contract. | [`SpacingToken`](/tuil/docs/reference/packages/theme/api/spacing-token) | | `position` | `"absolute" \| "relative" \| "static" \| undefined` | No | Controls how the element is positioned. When `position` is `static`, `top`, `right`, `bottom`, and `left` are ignored. | — | | `top` | `string \| number \| undefined` | No | Top offset for positioned elements. | — | | `right` | `string \| number \| undefined` | No | Right offset for positioned elements. | — | | `bottom` | `string \| number \| undefined` | No | Bottom offset for positioned elements. | — | | `left` | `string \| number \| undefined` | No | Left offset for positioned elements. | — | | `columnGap` | `number \| undefined` | No | Size of the gap between an element's columns. | — | | `rowGap` | `number \| undefined` | No | Size of the gap between an element's rows. | — | | `marginX` | `number \| undefined` | No | Horizontal margin. Equivalent to setting `marginLeft` and `marginRight`. | — | | `marginY` | `number \| undefined` | No | Vertical margin. Equivalent to setting `marginTop` and `marginBottom`. | — | | `marginTop` | `number \| undefined` | No | Top margin. | — | | `marginBottom` | `number \| undefined` | No | Bottom margin. | — | | `marginLeft` | `number \| undefined` | No | Left margin. | — | | `marginRight` | `number \| undefined` | No | Right margin. | — | | `paddingX` | `number \| undefined` | No | Horizontal padding. Equivalent to setting `paddingLeft` and `paddingRight`. | — | | `paddingY` | `number \| undefined` | No | Vertical padding. Equivalent to setting `paddingTop` and `paddingBottom`. | — | | `paddingTop` | `number \| undefined` | No | Top padding. | — | | `paddingBottom` | `number \| undefined` | No | Bottom padding. | — | | `paddingLeft` | `number \| undefined` | No | Left padding. | — | | `paddingRight` | `number \| undefined` | No | Right padding. | — | | `flexGrow` | `number \| undefined` | No | This property defines the ability for a flex item to grow if necessary. See [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/). | — | | `flexShrink` | `number \| undefined` | No | It specifies the “flex shrink factor”, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row. See [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/). | — | | `flexDirection` | `"row" \| "column" \| "row-reverse" \| "column-reverse" \| undefined` | No | It establishes the main-axis, thus defining the direction flex items are placed in the flex container. See [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/). | — | | `flexBasis` | `string \| number \| undefined` | No | It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. See [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/). | — | | `flexWrap` | `"wrap" \| "nowrap" \| "wrap-reverse" \| undefined` | No | It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. See [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/). | — | | `alignItems` | `"flex-start" \| "center" \| "flex-end" \| "stretch" \| "baseline" \| undefined` | No | The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis). See [align-items](https://css-tricks.com/almanac/properties/a/align-items/). | — | | `alignSelf` | `"flex-start" \| "center" \| "flex-end" \| "stretch" \| "baseline" \| "auto" \| undefined` | No | It makes possible to override the align-items value for specific flex items. See [align-self](https://css-tricks.com/almanac/properties/a/align-self/). | — | | `alignContent` | `"flex-start" \| "center" \| "flex-end" \| "stretch" \| "space-between" \| "space-around" \| "space-evenly" \| undefined` | No | It defines the alignment along the cross axis when there are multiple lines of flex items (when using flex-wrap). See [align-content](https://css-tricks.com/almanac/properties/a/align-content/). | — | | `justifyContent` | `"flex-start" \| "center" \| "flex-end" \| "space-between" \| "space-around" \| "space-evenly" \| undefined` | No | It defines the alignment along the main axis. See [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/). | — | | `width` | `string \| number \| undefined` | No | Width of the element in spaces. You can also set it as a percentage, which will calculate the width based on the width of the parent element. | — | | `height` | `string \| number \| undefined` | No | Height of the element in lines (rows). You can also set it as a percentage, which will calculate the height based on the height of the parent element. | — | | `minWidth` | `string \| number \| undefined` | No | Sets a minimum width of the element. Percentages aren't supported yet; see [https://github.com/facebook/yoga/issues/872](https://github.com/facebook/yoga/issues/872). | — | | `minHeight` | `string \| number \| undefined` | No | Sets a minimum height of the element in lines (rows). You can also set it as a percentage, which will calculate the minimum height based on the height of the parent element. | — | | `maxWidth` | `string \| number \| undefined` | No | Sets a maximum width of the element. Percentages aren't supported yet; see [https://github.com/facebook/yoga/issues/872](https://github.com/facebook/yoga/issues/872). | — | | `maxHeight` | `string \| number \| undefined` | No | Sets a maximum height of the element in lines (rows). You can also set it as a percentage, which will calculate the maximum height based on the height of the parent element. | — | | `aspectRatio` | `number \| undefined` | No | Defines the aspect ratio (width/height) for the element. Use it with at least one size constraint (`width`, `height`, `minHeight`, or `maxHeight`) so Ink can derive the missing dimension. | — | | `display` | `"none" \| "flex" \| undefined` | No | Set this property to `none` to hide the element. | — | | `borderStyle` | `keyof Boxes \| BoxStyle \| undefined` | No | Add a border with a specified style. If `borderStyle` is `undefined` (the default), no border will be added. | — | | `borderTop` | `boolean \| undefined` | No | Determines whether the top border is visible. | — | | `borderBottom` | `boolean \| undefined` | No | Determines whether the bottom border is visible. | — | | `borderLeft` | `boolean \| undefined` | No | Determines whether the left border is visible. | — | | `borderRight` | `boolean \| undefined` | No | Determines whether the right border is visible. | — | | `borderColor` | `LiteralUnion \| undefined` | No | Change border color. A shorthand for setting `borderTopColor`, `borderRightColor`, `borderBottomColor`, and `borderLeftColor`. | — | | `borderTopColor` | `LiteralUnion \| undefined` | No | Change the top border color. Accepts the same values as `color` in `Text` component. | — | | `borderBottomColor` | `LiteralUnion \| undefined` | No | Change the bottom border color. Accepts the same values as `color` in `Text` component. | — | | `borderLeftColor` | `LiteralUnion \| undefined` | No | Change the left border color. Accepts the same values as `color` in `Text` component. | — | | `borderRightColor` | `LiteralUnion \| undefined` | No | Change the right border color. Accepts the same values as `color` in `Text` component. | — | | `borderDimColor` | `boolean \| undefined` | No | Dim the border color. A shorthand for setting `borderTopDimColor`, `borderBottomDimColor`, `borderLeftDimColor`, and `borderRightDimColor`. | — | | `borderTopDimColor` | `boolean \| undefined` | No | Dim the top border color. | — | | `borderBottomDimColor` | `boolean \| undefined` | No | Dim the bottom border color. | — | | `borderLeftDimColor` | `boolean \| undefined` | No | Dim the left border color. | — | | `borderRightDimColor` | `boolean \| undefined` | No | Dim the right border color. | — | | `borderBackgroundColor` | `LiteralUnion \| undefined` | No | Change border background color. A shorthand for setting `borderTopBackgroundColor`, `borderRightBackgroundColor`, `borderBottomBackgroundColor`, and `borderLeftBackgroundColor`. | — | | `borderTopBackgroundColor` | `LiteralUnion \| undefined` | No | Change top border background color. Accepts the same values as `backgroundColor` in `Text` component. | — | | `borderBottomBackgroundColor` | `LiteralUnion \| undefined` | No | Change bottom border background color. Accepts the same values as `backgroundColor` in `Text` component. | — | | `borderLeftBackgroundColor` | `LiteralUnion \| undefined` | No | Change left border background color. Accepts the same values as `backgroundColor` in `Text` component. | — | | `borderRightBackgroundColor` | `LiteralUnion \| undefined` | No | Change right border background color. Accepts the same values as `backgroundColor` in `Text` component. | — | | `overflow` | `"visible" \| "hidden" \| undefined` | No | Behavior for an element's overflow in both directions. | — | | `overflowX` | `"visible" \| "hidden" \| undefined` | No | Behavior for an element's overflow in the horizontal direction. | — | | `overflowY` | `"visible" \| "hidden" \| undefined` | No | Behavior for an element's overflow in the vertical direction. | — | | `backgroundColor` | `LiteralUnion \| undefined` | No | Background color for the element. Accepts the same values as `color` in the `` component. | — | | `aria-label` | `string \| undefined` | No | A label for the element for screen readers. | — | | `aria-hidden` | `boolean \| undefined` | No | Hide the element from screen readers. | — | | `aria-role` | `"menu" \| "menuitem" \| "tab" \| "textbox" \| "checkbox" \| "radio" \| "listbox" \| "option" \| "table" \| "progressbar" \| "button" \| "combobox" \| "list" \| "listitem" \| "radiogroup" \| "tablist" \| "timer" \| "toolbar" \| undefined` | No | The role of the element. | — | | `aria-state` | `{ readonly busy?: boolean; readonly checked?: boolean; readonly disabled?: boolean; readonly expanded?: boolean; readonly multiline?: boolean; readonly multiselectable?: boolean; readonly readonly?: boolean; readonly required?: boolean; readonly selected?: boolean; } \| undefined` | No | The state of the element. | — | | `variant` | `string \| undefined` | No | The `variant` member uses the `string \| undefined` contract. | — | | `size` | `"sm" \| "md" \| "lg" \| undefined` | No | The `size` member uses the `"sm" \| "md" \| "lg" \| undefined` contract. | — | | `unstyled` | `boolean \| undefined` | No | The `unstyled` member uses the `boolean \| undefined` contract. | — | | `className` | `string \| undefined` | No | The `className` member uses the `string \| undefined` contract. | — | | `layout` | `Partial> \| undefined` | No | The `layout` member uses the `Partial> \| undefined` contract. | — | | `testId` | `string \| undefined` | No | The `testId` member uses the `string \| undefined` contract. | — | | `role` | `SemanticRole \| undefined` | No | The `role` member uses the `SemanticRole \| undefined` contract. | [`SemanticRole`](/tuil/docs/reference/packages/core/api/semantic-role) | | `label` | `string \| undefined` | No | The `label` member uses the `string \| undefined` contract. | — | | `description` | `string \| undefined` | No | The `description` member uses the `string \| undefined` contract. | — | | `disabled` | `boolean \| undefined` | No | The `disabled` member uses the `boolean \| undefined` contract. | — | | `readOnly` | `boolean \| undefined` | No | The `readOnly` member uses the `boolean \| undefined` contract. | — | | `selected` | `boolean \| undefined` | No | The `selected` member uses the `boolean \| undefined` contract. | — | | `checked` | `boolean \| undefined` | No | The `checked` member uses the `boolean \| undefined` contract. | — | | `expanded` | `boolean \| undefined` | No | The `expanded` member uses the `boolean \| undefined` contract. | — | | `valueText` | `string \| undefined` | No | The `valueText` member uses the `string \| undefined` contract. | — | | `slots` | `Partial> \| undefined` | No | The `slots` member uses the `Partial> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components) | | `slotProps` | `Partial> \| undefined` | No | The `slotProps` member uses the `Partial> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props) | ## Parameters [#parameters] This declaration has no public members. ## Returns [#returns] This declaration does not return a value. ## Throws [#throws] No thrown errors are documented for this declaration. ## Related types [#related-types] * [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props) ## Source [#source] [View the secondary source reference](https://github.com/mwillbanks/tuil/blob/main/packages/ink/src/components.tsx) ## Package [#package] [@mwillbanks/tuil-ink](/tuil/docs/reference/packages/ink)