# Stack

> One-axis flex layout with token gaps.

Source: https://ui.jcsoftdev.com/docs/components/stack

One-axis flex layout with token gaps. A row wraps instead of overflowing.

## Import

```ts
import { Stack } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/stack`.

## Usage

```tsx
<Stack>
  <>
          <Button>Save</Button>
          <Button variant="secondary">Cancel</Button>
          <Button variant="ghost">Discard</Button>
        </>
</Stack>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `direction` | `"row" \| "column"` | `"column"` | `column` stacks children vertically, `row` lays them out inline and wraps. Defaults to `column`. |
| `gap` | `"sm" \| "md" \| "lg" \| "xs" \| "none" \| "xl"` | `"md"` | Space between children. Defaults to `md`. |
| `align` | `"center" \| "end" \| "start" \| "baseline" \| "stretch"` |  | Cross-axis alignment. Defaults to `stretch` for a column and `center` for a row. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Column](/storybook/?path=/story/containers-stack--column)
- [Row](/storybook/?path=/story/containers-stack--row)

## Source

`packages/ui/src/containers/stack/stack.tsx`