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

# ButtonStack

> A layout helper that arranges action buttons either side by side (`horizontal`) or stacked (`vertical`).

```tsx theme={null}
import { ButtonStack } from "@fanvue/ui";
import type { ButtonStackDirection, ButtonStackProps } from "@fanvue/ui";
```

## Examples

## Horizontal

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-buttonstack--horizontal&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="ButtonStack — Horizontal" />
</Frame>

```tsx theme={null}
import { Button, ButtonStack } from "@fanvue/ui";

<ButtonStack direction="horizontal">
  <>
    <Button variant="outline">Cancel</Button>
    <Button variant="primary">Confirm</Button>
  </>
</ButtonStack>
```

## Vertical

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-buttonstack--vertical&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="ButtonStack — Vertical" />
</Frame>

```tsx theme={null}
import { Button, ButtonStack } from "@fanvue/ui";

<ButtonStack direction="vertical">
  <>
    <Button variant="primary">Confirm</Button>
    <Button variant="outline">Cancel</Button>
  </>
</ButtonStack>
```

## Props

## ButtonStack

A layout helper that arranges action buttons either side by side (`horizontal`) or stacked (`vertical`). Compose it with `Button` children rather than reimplementing button styles.

In `horizontal` mode each child stretches to an equal width; in `vertical` mode each child spans the full width of the container. Buttons keep their own sizing, so pass a matching `size` to each child for consistent heights.

<ParamField path="children" type="ReactNode" required>
  Buttons to arrange — typically two `Button` elements.
</ParamField>

<ParamField path="direction" type="&#x22;horizontal&#x22; | &#x22;vertical&#x22;" default="horizontal">
  Layout orientation. `horizontal` places buttons side by side with equal widths for primary + secondary action pairs; `vertical` stacks them full-width for mobile screens and narrow panels.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `ButtonStackDirection`, `ButtonStackProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)