> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Stack />

> Lay children out along one axis.

```js theme={"system"}
import {Stack} from "attio/client"
```

`Stack` is a simple `flexbox` component that allows you to stack items vertically or horizontally with a provided gap.

Available on [pages](../pages/overview), [record tabs](../extensions/record-tab) and in [dialogs](../dialogs/show-dialog).

## Example

```tsx metric-card.tsx theme={"system"}
import React from "react"
import {Stack, Card, Typography, Badge, Button} from "attio/client"

export function MetricCard({onRefresh}: {onRefresh: () => void}) {
  return (
    <Card title="Open deals">
      <Stack gap="small">
        <Stack direction="row" gap="small" align="center">
          <Typography.Title>42</Typography.Title>
          <Badge color="green">+6 this week</Badge>
        </Stack>
        <Stack direction="row" justify="end">
          <Button label="Refresh" onClick={onRefresh} />
        </Stack>
      </Stack>
    </Card>
  )
}
```

## Props

<ParamField path="direction" type="'column' | 'row'">
  The axis the children are laid out along.

  Defaults to `"column"`.
</ParamField>

<ParamField path="gap" type="Spacing">
  The space between children. See [spacing tokens](#spacing-tokens).

  Defaults to `"none"`.
</ParamField>

<ParamField path="align" type="'start' | 'center' | 'end' | 'stretch'">
  How children are aligned on the cross axis.

  Defaults to `"stretch"`.
</ParamField>

<ParamField path="justify" type="'start' | 'center' | 'end' | 'space-between'">
  How children are distributed along the main axis.

  Defaults to `"start"`.
</ParamField>

<ParamField path="children" type="React.ReactNode">
  The content of the stack, either text or other components.
</ParamField>

## Spacing tokens

`Stack` and [`Grid`](./grid) take their `gap` from the same `Spacing` type. There are no arbitrary values.

| Token          | Size |
| -------------- | ---- |
| `"none"`       | 0px  |
| `"extraSmall"` | 4px  |
| `"small"`      | 8px  |
| `"medium"`     | 12px |
| `"large"`      | 16px |
| `"extraLarge"` | 24px |