# @askrjs/themes/button-group

> Published API exports for @askrjs/themes/button-group.

Source: [https://askrjs.com/docs/reference/api/themes/button-group](https://askrjs.com/docs/reference/api/themes/button-group)

Status: stable. Packages: @askrjs/themes/button-group.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 3 exports from the declarations shipped by @askrjs/themes.

### `ButtonGroup`

```ts
ButtonGroup: (props: ButtonGroupProps) => JSX.Element
```

Groups related buttons together, optionally visually attached, with a horizontal or vertical
orientation and `role="group"` by default. Attached groups without an explicit `orientation`
stack at phone width unless they contain icon buttons; pass `orientation="horizontal"` to
keep the row.

### `ButtonGroupOrientation`

```ts
ButtonGroupOrientation: "horizontal" | "vertical"
```

Layout direction of a {@link ButtonGroup }. When omitted, an attached group is a row that
stacks at phone width unless it contains icon buttons. An explicit value keeps that direction
unless the caller also passes `data-responsive="true"`, which opts back into phone stacking.

### `ButtonGroupProps`

```ts
ButtonGroupProps: DivProps & {
  children?: unknown;
  attached?: boolean;
  orientation?: ButtonGroupOrientation;
  /** Stack at phone width. Defaults to `"true"` for attached groups without an `orientation`. */
  "data-responsive"?: "true" | "false";
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link ButtonGroup } component.

- `attached`: attached?: boolean | undefined;

- `children`: children?: unknown;

- `data-responsive`: Stack at phone width. Defaults to `"true"` for attached groups without an `orientation`.

- `orientation`: orientation?: ButtonGroupOrientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/breadcrumb/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/button/index.md)