# ButtonGroupHorizontal

> Slug: `button-group-horizontal` · Category: Actions

## When to use
- Render a row of related `Button`s where horizontal layout is the explicit intent (e.g., toolbar action sets).
- Get the same API as `ButtonGroup` without remembering to pass `arrangement="row"`.

## When NOT to use
- You need vertical stacking on small screens — use `ButtonGroup` with `smallButtonArrangement="column"` instead, or `ButtonTray` for full responsive defaults.
- Single button — render `Button` directly.
- Need a supplementary action / help link beside the buttons — use `ButtonTray`.

## Variants & decision tree
- This is a thin preset over `ButtonGroup` with `arrangement="row"` locked in. All other `ButtonGroup` props apply: `buttonSpan`, breakpoint overrides, `alignment`, `inverse`.
- For viewport-specific arrangement variation, fall back to `ButtonGroup`.

## States
Same as `ButtonGroup` — inverse-aware, no internal state.

## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **`children`** | `ReactNode` | — | `Button`s to render in a row. |
| `buttonSpan` | `'fill' \| 'hug'` | `'hug'` | Hug content or fill row. |
| `smallButtonSpan` / `mediumButtonSpan` / `largeButtonSpan` | `'fill' \| 'hug'` | — | Per-breakpoint span overrides. |
| `alignment` | `'leading' \| 'center'` | — | Item alignment. |
| `inverse` | `boolean` | inherits | Dark-background styling. |

The `arrangement` prop is intentionally omitted — this preset locks it to `row`.

## Usage examples
```tsx
import { Button, ButtonGroupHorizontal } from 'arrow-react-bootstrap';

<ButtonGroupHorizontal>
  <Button variant="primary">Apply</Button>
  <Button variant="secondary">Reset</Button>
</ButtonGroupHorizontal>

<ButtonGroupHorizontal buttonSpan="fill" alignment="center">
  <Button>Yes</Button>
  <Button variant="secondary">No</Button>
</ButtonGroupHorizontal>
```

## Composition
- Drop into a `Modal` footer, page action bar, or trailing slot of a `SectionHeader`.
- Use inside a `Card` body to anchor confirmation actions.

## Accessibility
- Same as `ButtonGroup`: renders `<ul role="list">` with `<li role="listitem">` children.
- Children remain individually focusable.

## Do / Don't
- Do: use when horizontal-on-all-breakpoints is the intent.
- Don't: use when stacking is needed at any breakpoint — use `ButtonGroup` or `ButtonTray`.
- Don't: try to pass `arrangement` — it's typed-out of this preset.
