diff --git a/frontend/src/lib/components/SaveButton.svelte b/frontend/src/lib/components/SaveButton.svelte
new file mode 100644
index 0000000..52236ed
--- /dev/null
+++ b/frontend/src/lib/components/SaveButton.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+
+	let {
+		label,
+		successLabel = 'Saved ✓',
+		variant = 'primary',
+		size = 'sm',
+		...rest
+	}: {
+		label: string;
+		successLabel?: string;
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'purple';
+		size?: 'sm' | 'md' | 'lg';
+		[key: string]: unknown;
+	} = $props();
+
+	let saved = $state(false);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	// Parent forms call this (via bind:this) from their use:enhance callback
+	// on result.type === 'success'. Green for 4s, then back to normal.
+	export function flash() {
+		saved = true;
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => (saved = false), 4000);
+	}
+</script>
+
+<Button type="submit" {size} variant={saved ? 'success' : variant} {...rest}>
+	{saved ? successLabel : label}
+</Button>