# Sticky save bar

Keeps Save in view on a whole-page form: saved / unsaved changes / error on the left, Discard and Save on the right. A card on desktop, a glass bar above the tab bar on the phone. Kit v2 marks it dirty for you.

- **Group:** Form controls · **family:** `page-primitives` · **shadcn:** composed
- **Build:** Composed: `Button` ×2 + form dirty state (react-hook-form `formState.isDirty`).
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- "All changes saved" · "Unsaved changes" · "Could not save: price list is locked".

## Do

- Wire `[data-k-form]` / form dirty state.

## Don't

- Show Save when nothing changed (disable it).

## Accessibility

- **Keyboard:** ⌘/Ctrl + S saves (optional).
- **ARIA:** State text in `aria-live="polite"`.
- **Focus:** Leaving with unsaved changes opens the Unsaved-changes guard.

## Tokens

`--z-sticky` `--s-3` `--s-6` `--s-4` `--card` `--border` `--r-card` `--e-pop` `--s-2` `--text-small` `--muted-foreground` `--foreground` `--w-medium` `--destructive` `--tabbar-h` `--background` `--actbar-blur` `--control-h-m-lg` `--text-btn-lg` `--warning`

## Files

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