# Wizard action bar

The sticky bar under a flow: Back on the left, the save state (saved, unsaved, saving, failed) in the middle, and the one primary on the right. Phone: full width, 48px buttons, tab bar hidden.

- **Group:** Wizard and stepper · **family:** `wizard-stepper` · **shadcn:** composed
- **Build:** Custom bar (shares anatomy with Save bar).
- **In apps/admin today:** —
- **Client component:** yes. 

## Content rules

- Primary: "Continue to prices", last step "Publish to brands".

## Do

- One primary.

## Don't

- Next and Finish both visible.

## Accessibility

- **Keyboard:** Enter in the last field does not skip validation.
- **ARIA:** Save state `aria-live="polite"`.
- **Focus:** On Continue, focus moves to the next step heading.

## Tokens

`--s-2` `--text-small` `--muted-foreground` `--foreground` `--w-semibold` `--s-3` `--s-6` `--background` `--actbar-blur` `--border` `--success` `--destructive` `--s-1` `--s-4` `--control-h-m-lg`

## Files

`wizard-action-bar.html` live specimen · `wizard-action-bar.css` kit rules · `wizard-action-bar.d.ts` props · full page: `docs/components/wizard-action-bar/` (phone: `m/`).