# SaveBar

> Client island: the sticky "Unsaved changes · Discard · Save" bar a long form shows once it differs from how it loaded.

```ts
import { SaveBar } from "@sdxc/ui/app";
```

Renders the bar, hidden until the watched form changes. Place it as the form's last
child so it sticks to the bottom of the viewport while the form scrolls; the form keeps
its own Save, which is what a browser without script uses.

## Examples

```tsx
<form method="post" id="monitor-form">
	…fields…
	<SaveBar labels={{ message: "Unsaved changes", discard: "Discard", save: "Save", shortcut: "⌘S" }} />
</form>
```

## Props

Takes no props of its own.