# ActionGroup

> Cluster of related actions (e.g. dialog footer).

- **Level**: molecule · **Status**: stable · **Role**: action
- **Import**: `import { ActionGroup } from "@rrios-forge/ui/molecules/action-group";`
- **Source**: `packages/ui/src/molecules/action-group`

Consistent grouping of primary, secondary and destructive actions. Three orthogonal axes: align (start | end | between), orientation (horizontal | vertical | responsive), density (compact | comfortable). The molecule never reorders children — reading order matches visual order. Patterns consulted: Patterns/Visual Priority · ActionHierarchy + QuietSecondaryActions, Patterns/Density & Growth · ActionOverflow.

## Use it for

- Toolbar / split action → `Toolbar` or `ActionGroup` / `SplitAction`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `orientation` | — | `horizontal` `vertical` `responsive` | `horizontal` | The direction the parts run: a row (horizontal) or a column (vertical); responsive stacks on phones and runs in a row from sm. |
| `align` | — | `start` `end` `between` | `end` | Distribution along the main axis. |

## Stories

- [Playground](/?path=/story/components-molecules-actiongroup--playground) · frame: `/iframe.html?id=components-molecules-actiongroup--playground&viewMode=story`
- [Alignment](/?path=/story/components-molecules-actiongroup--alignment) · frame: `/iframe.html?id=components-molecules-actiongroup--alignment&viewMode=story`
- [Orientation](/?path=/story/components-molecules-actiongroup--orientation) · frame: `/iframe.html?id=components-molecules-actiongroup--orientation&viewMode=story`
- [Density](/?path=/story/components-molecules-actiongroup--density) · frame: `/iframe.html?id=components-molecules-actiongroup--density&viewMode=story`
- [Primary · secondary · danger](/?path=/story/components-molecules-actiongroup--primary-secondary-danger) · frame: `/iframe.html?id=components-molecules-actiongroup--primary-secondary-danger&viewMode=story`
- [In dialog footer](/?path=/story/components-molecules-actiongroup--in-dialog-footer) · frame: `/iframe.html?id=components-molecules-actiongroup--in-dialog-footer&viewMode=story`
- [In card footer](/?path=/story/components-molecules-actiongroup--in-card-footer) · frame: `/iframe.html?id=components-molecules-actiongroup--in-card-footer&viewMode=story`

## Decisions that name it

- ADR-008 — Layout layer: refined `Grid` + new `Container`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).