Contextual Save Bar

ProNew

The bar that appears when a form has unsaved changes, with Discard and Save, a busy state and a Ctrl or Cmd plus S shortcut.

Customize

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


pnpm dlx shadcn@latest add @tealmac/contextual-save-bar

It builds on the button component, which the CLI installs for you.

Prop	Type	Default	Description
`dirty`	`boolean`	`-`	Show the bar.
`onSave / onDiscard`	`() => void`	`-`	Actions.
`saving`	`boolean`	`false`	Busy Save.
`saveDisabled`	`boolean`	`false`	Disable Save, for example when invalid.
`message`	`string`	`"Unsaved changes"`	Text.
`fixed`	`boolean`	`false`	Pin to the viewport top.

Role: status.

Animation is removed when the person prefers reduced motion.

Guide and examples


pnpm dlx shadcn@latest add @tealmac/contextual-save-bar

It builds on the button component, which the CLI installs for you.

Prop	Type	Default	Description
`dirty`	`boolean`	`-`	Show the bar.
`onSave / onDiscard`	`() => void`	`-`	Actions.
`saving`	`boolean`	`false`	Busy Save.
`saveDisabled`	`boolean`	`false`	Disable Save, for example when invalid.
`message`	`string`	`"Unsaved changes"`	Text.
`fixed`	`boolean`	`false`	Pin to the viewport top.

Role: status.

Animation is removed when the person prefers reduced motion.