Unsaved Changes Bar

ProNew

A contextual save bar that appears when a form is dirty: Save and Discard actions, Cmd/Ctrl+S, a polite announcement, a save error, and a hook that warns before the tab closes.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/unsaved-changes-bar

Usage

position="sticky" keeps the bar at the bottom of its scrolling container; use fixed for the viewport and inline to place it yourself. useUnsavedChangesWarning(dirty) is exported for forms that have their own bar.

Props

Prop	Type	Default	Description
`dirty`	`boolean`	-	Show the bar.
`onSave`	`() => void \| Promise<void>`	-	Throw to show the error.
`onDiscard`	`() => void`	-	Reset the form.
`message`	`ReactNode`	`You have unsaved changes`
`position`	`sticky`, `fixed`, `inline`	`sticky`
`warnOnUnload`	`boolean`	`true`	Browser prompt when the tab closes.
`saveShortcut`	`boolean`	`true`	Cmd/Ctrl+S while dirty.

Accessibility

The bar is a region named "Unsaved changes", reachable with landmark navigation. A separate live region (role="status", always mounted) announces the first change and any save error without moving focus.
Save and Discard are real buttons in the tab order after the form; Save is disabled and shows a spinner while it runs, which prevents a double save.
The entrance animation is a short fade and slide that is switched off with prefers-reduced-motion.
Cmd/Ctrl+S is an extra; every action also has a visible button.

Testing

The component ships with a Testing Library test (unsaved-changes-bar.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/unsaved-changes-bar

Usage

Props

Prop	Type	Default	Description
`dirty`	`boolean`	-	Show the bar.
`onSave`	`() => void \| Promise<void>`	-	Throw to show the error.
`onDiscard`	`() => void`	-	Reset the form.
`message`	`ReactNode`	`You have unsaved changes`
`position`	`sticky`, `fixed`, `inline`	`sticky`
`warnOnUnload`	`boolean`	`true`	Browser prompt when the tab closes.
`saveShortcut`	`boolean`	`true`	Cmd/Ctrl+S while dirty.

Accessibility

The bar is a region named "Unsaved changes", reachable with landmark navigation. A separate live region (role="status", always mounted) announces the first change and any save error without moving focus.
Save and Discard are real buttons in the tab order after the form; Save is disabled and shows a spinner while it runs, which prevents a double save.
The entrance animation is a short fade and slide that is switched off with prefers-reduced-motion.
Cmd/Ctrl+S is an extra; every action also has a visible button.

Testing

The component ships with a Testing Library test (unsaved-changes-bar.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.