diff --git a/web/src/lib/components/ui/ConfirmModal.stories.svelte b/web/src/lib/components/ui/ConfirmModal.stories.svelte
index 968afd816..ac9a0dab9 100644
--- a/web/src/lib/components/ui/ConfirmModal.stories.svelte
+++ b/web/src/lib/components/ui/ConfirmModal.stories.svelte
@@ -29,3 +29,14 @@
 		onconfirm={() => {}}
 	/>
 </Story>
+
+<Story name="Primary confirm" asChild>
+	<ConfirmModal
+		open
+		variant="primary"
+		title="Publish this site?"
+		description="It becomes reachable at its domain right away."
+		confirmLabel="Publish"
+		onconfirm={() => {}}
+	/>
+</Story>
diff --git a/web/src/lib/components/ui/ConfirmModal.svelte b/web/src/lib/components/ui/ConfirmModal.svelte
index b34e0cf6d..69752bbd3 100644
--- a/web/src/lib/components/ui/ConfirmModal.svelte
+++ b/web/src/lib/components/ui/ConfirmModal.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import Modal from "$lib/components/ui/Modal.svelte";
-	import Button from "$lib/components/ui/Button.svelte";
+	import Button, { type ButtonVariants } from "$lib/components/ui/Button.svelte";
 
 	interface Props {
 		open?: boolean;
 		title: string;
 		description?: string;
 		confirmLabel: string;
+		variant?: ButtonVariants["variant"];
 		cancelLabel?: string;
 		loading?: boolean;
 		onconfirm: () => void;
@@ -17,6 +18,7 @@
 		title,
 		description,
 		confirmLabel,
+		variant = "danger",
 		cancelLabel = "Cancel",
 		loading = false,
 		onconfirm
@@ -27,7 +29,7 @@
 	<Button class="flex-1" disabled={loading} onclick={() => (open = false)}>
 		{cancelLabel}
 	</Button>
-	<Button variant="danger" class="flex-1" {loading} onclick={onconfirm}>
+	<Button {variant} class="flex-1" {loading} onclick={onconfirm}>
 		{confirmLabel}
 	</Button>
 {/snippet}