From bb658a71a3f28dd2d8db10a6342c8da7c9cb48a3 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 9 Sep 2026 14:09:56 +0200
Subject: [PATCH] web/components/ui: let the confirm modal choose its button
 variant

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/ConfirmModal.stories.svelte | 11 +++++++++++
 web/src/lib/components/ui/ConfirmModal.svelte         |  6 ++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

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}
-- 
2.51.2