From 6422324eddf7d833d63627e81fa525faede98909 Mon Sep 17 00:00:00 2001
From: xarmian <xarmian@gmail.com>
Date: Fri, 24 Jul 2026 15:04:48 -0400
Subject: [PATCH] =?UTF-8?q?feat(web):=20Button=20primitive=20+=20dark=20te?=
 =?UTF-8?q?xt-on-fill=20AA=20=E2=80=94=2095=20sites=20migrated=20(TASK-229?=
 =?UTF-8?q?2)=20(#1020)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(web): Button primitive + dark text-on-fill AA fix; migrate 95 button sites (TASK-2292)

PLAN-2290 Phase 2, PR 2. lib/components/common/Button.svelte — variants
primary (filled --accent-primary-strong #7c4ff0, the violet band where white
text passes AA 4.96:1 while staying >=3:1 vs surface — pays off the PR #1018
deferral) / secondary / ghost / danger (red tint, AA both themes); size sm/md;
full attr passthrough (type=submit preserved at form sites).

95 usages across 14 files migrated (settings, conventions, playbooks x2,
workspace home, console suite, modals, comment composer, EmptyState); dead
scoped .btn* CSS deleted (net -291 lines). Deliberate leave-alones per file:
ItemDetail action-bar strip (Phase 4 owns the pane), anchors styled as
buttons, segmented controls, icon-only buttons, dashed low-emphasis
affordances.

Gates: svelte-check 0 errors (dead-selector warnings down 8->7), 488 web
tests, make check green; screenshots reviewed both themes.

* fix(web): Button class-prop merge + danger-solid variant for final confirms

Codex findings on #1020: (1) caller-supplied class no longer clobbers the
primitive's classes — class is destructured and merged, rest spread moved
first; (2) new danger-solid variant (filled --accent-red-strong #dc2626,
white text 4.83:1 AA both themes) restores destructive emphasis on the two
final-confirm flows that had gone pale (OpenChildrenDialog override,
conventions delete Confirm); entry-level destructive buttons keep the tint.
---
 web/src/app.css                               |   9 ++
 .../lib/components/OpenChildrenDialog.svelte  |  39 +-----
 .../components/admin/UserSettingsForm.svelte  | 106 +++++-----------
 .../components/comments/CommentThread.svelte  |  26 +---
 web/src/lib/components/common/Button.svelte   | 116 ++++++++++++++++++
 .../lib/components/common/EmptyState.svelte   |  25 ++--
 .../layout/CreateWorkspaceModal.svelte        |  28 +----
 .../[username]/[workspace]/+page.svelte       |  52 +-------
 .../[workspace]/conventions/+page.svelte      |  50 ++++----
 .../[workspace]/playbooks/+page.svelte        |  61 ++++-----
 .../[workspace]/playbooks/[slug]/+page.svelte |  50 ++------
 .../[workspace]/settings/+page.svelte         |  58 ++++-----
 web/src/routes/console/+page.svelte           |  22 +---
 web/src/routes/console/billing/+page.svelte   |  48 +++-----
 .../console/connected-apps/+page.svelte       |  65 +++-------
 web/src/routes/console/settings/+page.svelte  | 115 +++++++----------
 16 files changed, 349 insertions(+), 521 deletions(-)
 create mode 100644 web/src/lib/components/common/Button.svelte

diff --git a/web/src/app.css b/web/src/app.css
index da14190d..c09049f8 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -32,6 +32,10 @@
 	   with the Phase 2 Button primitive via --text-on-accent. */
 	--accent-primary: #9268f8;
 	--accent-primary-soft: #a78bfa;
+	/* Filled-control variant: the violet band where white text passes AA
+	   (4.96:1) while the fill stays ≥3:1 against --bg-secondary. Used by
+	   Button primary fills; links/text keep --accent-primary. */
+	--accent-primary-strong: #7c4ff0;
 	--accent-blue: var(--accent-primary);
 	--accent-green: #4ade80;
 	--accent-purple: #a78bfa;
@@ -41,6 +45,9 @@
 	--accent-gray: #9ca3af;
 	--accent-brown: #a8896c;
 	--accent-red: #ef4444;
+	/* Solid destructive fill — the red where white text passes AA (4.83:1)
+	   in both themes. Button variant="danger-solid" (final confirms). */
+	--accent-red-strong: #dc2626;
 
 	/* Literal blue for categorical uses (status maps, charts, info badges).
 	   Stays blue even if the brand accent changes — see PLAN-2290. */
@@ -651,6 +658,7 @@ dialog.attachment-image-lightbox .attachment-image-lightbox-close:hover {
 	--chip-alpha: 12%;
 	--accent-primary: #7c3aed;
 	--accent-primary-soft: #8b5cf6;
+	--accent-primary-strong: #7c3aed;
 	--accent-blue: var(--accent-primary);
 	--accent-red: #dc2626;
 	--accent-green: #16a34a;
@@ -687,6 +695,7 @@ dialog.attachment-image-lightbox .attachment-image-lightbox-close:hover {
 	--chip-alpha: 12%;
 		--accent-primary: #7c3aed;
 		--accent-primary-soft: #8b5cf6;
+	--accent-primary-strong: #7c3aed;
 		--accent-blue: var(--accent-primary);
 		--accent-red: #dc2626;
 		--accent-green: #16a34a;
diff --git a/web/src/lib/components/OpenChildrenDialog.svelte b/web/src/lib/components/OpenChildrenDialog.svelte
index 996988bc..1b2829cc 100644
--- a/web/src/lib/components/OpenChildrenDialog.svelte
+++ b/web/src/lib/components/OpenChildrenDialog.svelte
@@ -15,6 +15,7 @@
 	import { page } from '$app/state';
 	import { openChildrenDialog } from '$lib/stores/openChildrenDialog.svelte';
 	import Modal from '$lib/components/common/Modal.svelte';
+	import Button from '$lib/components/common/Button.svelte';
 
 	let active = $derived(openChildrenDialog.active);
 
@@ -118,16 +119,10 @@
 			</div>
 
 			<div class="modal-footer">
-				<!-- svelte-ignore a11y_autofocus -->
-				<button
-					type="button"
-					class="btn btn-secondary"
-					autofocus
-					onclick={onCancel}>Cancel</button
-				>
-				<button type="button" class="btn btn-danger" onclick={onConfirm}>
+				<Button variant="secondary" autofocus onclick={onCancel}>Cancel</Button>
+				<Button variant="danger-solid" onclick={onConfirm}>
 					Override and mark {active.details.attempted_value}
-				</button>
+				</Button>
 			</div>
 	{/if}
 </Modal>
@@ -266,32 +261,6 @@
 		flex-shrink: 0;
 	}
 
-	.btn {
-		padding: var(--space-2) var(--space-4);
-		border-radius: var(--radius-md);
-		font-size: 0.9em;
-		font-weight: 500;
-		cursor: pointer;
-		border: 1px solid transparent;
-	}
-
-	.btn-secondary {
-		background: var(--bg-tertiary);
-		color: var(--text-primary);
-		border-color: var(--border);
-	}
-	.btn-secondary:hover {
-		background: var(--bg-secondary);
-	}
-
-	.btn-danger {
-		background: var(--accent-red);
-		color: white;
-	}
-	.btn-danger:hover {
-		filter: brightness(1.08);
-	}
-
 	@media (max-width: 600px) {
 		.modal-header,
 		.modal-body,
diff --git a/web/src/lib/components/admin/UserSettingsForm.svelte b/web/src/lib/components/admin/UserSettingsForm.svelte
index 1c334d60..0aa0265d 100644
--- a/web/src/lib/components/admin/UserSettingsForm.svelte
+++ b/web/src/lib/components/admin/UserSettingsForm.svelte
@@ -21,6 +21,7 @@
 	import { untrack } from 'svelte';
 	import { adminFetch, adminPatch, adminPost, type AdminUser } from '$lib/stores/admin.svelte';
 	import { api } from '$lib/api/client';
+	import Button from '$lib/components/common/Button.svelte';
 
 	interface Props {
 		user: AdminUser;
@@ -338,32 +339,29 @@
 			</select>
 			{#if editRole !== (user.role || 'member')}
 				{#if !roleConfirm}
-					<button
-						class="btn"
-						type="button"
+					<Button
+						variant="secondary"
 						onclick={() => {
 							roleConfirm = true;
 							roleMsg = '';
-						}}>Change Role</button
+						}}>Change Role</Button
 					>
 				{:else}
 					<div class="role-confirm">
 						<span class="role-confirm-msg">
 							{roleAction()} <strong>{user.name || user.username}</strong> to {editRole}?
 						</span>
-						<button
-							class="btn btn-primary"
-							type="button"
+						<Button
+							variant="primary"
 							disabled={roleSaving}
-							onclick={changeRole}>{roleSaving ? 'Saving…' : 'Confirm'}</button
+							onclick={changeRole}>{roleSaving ? 'Saving…' : 'Confirm'}</Button
 						>
-						<button
-							class="btn btn-sub"
-							type="button"
+						<Button
+							variant="ghost"
 							onclick={() => {
 								roleConfirm = false;
 								editRole = user.role || 'member';
-							}}>Cancel</button
+							}}>Cancel</Button
 						>
 					</div>
 				{/if}
@@ -388,17 +386,16 @@
 			<div class="msg error">{resetError}</div>
 		{/if}
 		{#if !resetConfirm}
-			<button class="btn" type="button" onclick={() => (resetConfirm = true)}>Reset password</button>
+			<Button variant="secondary" onclick={() => (resetConfirm = true)}>Reset password</Button>
 		{:else}
 			<div class="row">
 				<span>Send a password-reset email or generate a temporary password?</span>
-				<button
-					class="btn btn-primary"
-					type="button"
+				<Button
+					variant="primary"
 					disabled={resetSaving}
-					onclick={resetPassword}>{resetSaving ? 'Working…' : 'Confirm'}</button
+					onclick={resetPassword}>{resetSaving ? 'Working…' : 'Confirm'}</Button
 				>
-				<button class="btn btn-sub" type="button" onclick={() => (resetConfirm = false)}>Cancel</button>
+				<Button variant="ghost" onclick={() => (resetConfirm = false)}>Cancel</Button>
 			</div>
 		{/if}
 	</div>
@@ -409,14 +406,13 @@
 		{#if disableMsg}<div class="msg" class:error={disableMsg.includes('failed') || disableMsg.includes('Type the')}>{disableMsg}</div>{/if}
 		{#if !user.disabled_at}
 			{#if !disableConfirm}
-				<button
-					class="btn btn-danger"
-					type="button"
+				<Button
+					variant="danger"
 					onclick={() => {
 						disableConfirm = true;
 						disableTyped = '';
 						disableMsg = '';
-					}}>Disable account</button
+					}}>Disable account</Button
 				>
 			{:else}
 				<!-- Typed-email confirmation (new in T1551). Mirrors the
@@ -435,30 +431,28 @@
 						aria-label="Type the user's email to confirm disable"
 					/>
 					<div class="row">
-						<button
-							class="btn btn-danger"
-							type="button"
+						<Button
+							variant="danger"
 							disabled={disableSaving || disableTyped.trim() !== user.email}
 							onclick={toggleDisable}
 							title={disableTyped.trim() === user.email
 								? 'Disable this account'
 								: `Type ${user.email} to enable this button (paste tolerant)`}
-							>{disableSaving ? 'Disabling…' : 'Disable'}</button
+							>{disableSaving ? 'Disabling…' : 'Disable'}</Button
 						>
-						<button
-							class="btn btn-sub"
-							type="button"
+						<Button
+							variant="ghost"
 							onclick={() => {
 								disableConfirm = false;
 								disableTyped = '';
-							}}>Cancel</button
+							}}>Cancel</Button
 						>
 					</div>
 				</div>
 			{/if}
 		{:else}
-			<button class="btn" type="button" disabled={disableSaving} onclick={toggleDisable}
-				>{disableSaving ? 'Enabling…' : 'Re-enable account'}</button
+			<Button variant="secondary" disabled={disableSaving} onclick={toggleDisable}
+				>{disableSaving ? 'Enabling…' : 'Re-enable account'}</Button
 			>
 		{/if}
 	</div>
@@ -473,8 +467,8 @@
 				This user hasn't confirmed their email. Marking it verified unblocks content
 				mutations and invites for their account.
 			</p>
-			<button class="btn" type="button" disabled={verifySaving} onclick={verifyEmail}
-				>{verifySaving ? 'Verifying…' : 'Mark email verified'}</button
+			<Button variant="secondary" disabled={verifySaving} onclick={verifyEmail}
+				>{verifySaving ? 'Verifying…' : 'Mark email verified'}</Button
 			>
 		</div>
 	{/if}
@@ -525,8 +519,8 @@
 	</div>
 
 	<div class="save-row">
-		<button class="btn btn-primary" type="button" disabled={saving} onclick={saveUser}
-			>{saving ? 'Saving…' : 'Save plan + overrides'}</button
+		<Button variant="primary" disabled={saving} onclick={saveUser}
+			>{saving ? 'Saving…' : 'Save plan + overrides'}</Button
 		>
 		{#if saveMsg}<span class="msg" class:ok={saveMsg === 'Saved'}>{saveMsg}</span>{/if}
 	</div>
@@ -585,46 +579,6 @@
 		font-size: 0.85rem;
 		color: var(--text-muted);
 	}
-	.btn {
-		padding: 6px 12px;
-		border-radius: var(--radius-sm);
-		border: 1px solid var(--border);
-		background: var(--bg-secondary);
-		color: var(--text-primary);
-		cursor: pointer;
-		font-size: 0.85rem;
-	}
-	.btn:hover {
-		background: var(--bg-tertiary);
-	}
-	.btn:focus-visible {
-		outline: 2px solid var(--accent-blue);
-		outline-offset: 2px;
-	}
-	.btn[disabled] {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-	.btn-primary {
-		background: var(--accent-blue);
-		color: white;
-		border-color: var(--accent-blue);
-	}
-	.btn-primary:hover {
-		filter: brightness(1.1);
-	}
-	.btn-danger {
-		color: var(--accent-red);
-		border-color: color-mix(in srgb, var(--accent-red) 50%, transparent);
-	}
-	.btn-danger:hover {
-		background: color-mix(in srgb, var(--accent-red) 10%, transparent);
-	}
-	.btn-sub {
-		background: transparent;
-		color: var(--text-muted);
-		border: 1px dashed var(--border);
-	}
 	select,
 	input[type='text'] {
 		padding: 6px 10px;
diff --git a/web/src/lib/components/comments/CommentThread.svelte b/web/src/lib/components/comments/CommentThread.svelte
index 9799adf2..e3a954fa 100644
--- a/web/src/lib/components/comments/CommentThread.svelte
+++ b/web/src/lib/components/comments/CommentThread.svelte
@@ -4,6 +4,7 @@
 	import { sseService } from '$lib/services/sse.svelte';
 	import { relativeTime, renderMarkdown } from '$lib/utils/markdown';
 	import type { Comment, Item } from '$lib/types';
+	import Button from '$lib/components/common/Button.svelte';
 
 	interface Props {
 		wsSlug: string;
@@ -168,13 +169,13 @@
 		></textarea>
 		<div class="compose-actions">
 			<span class="hint">Ctrl+Enter to submit</span>
-			<button
-				class="submit-btn"
+			<Button
+				variant="primary"
 				type="submit"
 				disabled={submitting || !newBody.trim()}
 			>
 				{submitting ? 'Posting...' : 'Comment'}
-			</button>
+			</Button>
 		</div>
 	</form>
 </div>
@@ -434,23 +435,4 @@
 		color: var(--text-muted);
 	}
 
-	.submit-btn {
-		padding: var(--space-1) var(--space-4);
-		background: var(--accent-blue);
-		border: none;
-		border-radius: var(--radius);
-		color: #fff;
-		font-size: 0.85em;
-		font-weight: 500;
-		cursor: pointer;
-	}
-
-	.submit-btn:hover:not(:disabled) {
-		filter: brightness(1.1);
-	}
-
-	.submit-btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
 </style>
diff --git a/web/src/lib/components/common/Button.svelte b/web/src/lib/components/common/Button.svelte
new file mode 100644
index 00000000..eb095346
--- /dev/null
+++ b/web/src/lib/components/common/Button.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLButtonAttributes {
+		/** primary = filled violet (AA text via --accent-primary-strong);
+		 *  secondary = raised neutral; ghost = borderless; danger = red tint
+		 *  (entry-level destructive); danger-solid = filled red for the FINAL
+		 *  confirm of an irreversible action (AA white text via
+		 *  --accent-red-strong). */
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-solid';
+		size?: 'sm' | 'md';
+		children: Snippet;
+	}
+
+	let {
+		variant = 'secondary',
+		size = 'md',
+		type = 'button',
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<button {...rest} class="btn {variant} {size} {className}" {type}>
+	{@render children()}
+</button>
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		border-radius: var(--radius);
+		font-weight: 600;
+		font-family: inherit;
+		line-height: 1.5;
+		white-space: nowrap;
+		cursor: pointer;
+		border: 1px solid transparent;
+		transition: background 0.12s, border-color 0.12s, filter 0.12s;
+	}
+
+	.btn.md {
+		padding: 6px 14px;
+		font-size: 13px;
+	}
+
+	.btn.sm {
+		padding: 3px 10px;
+		font-size: 12px;
+	}
+
+	.btn:disabled {
+		opacity: 0.5;
+		cursor: default;
+		pointer-events: none;
+	}
+
+	.btn:focus-visible {
+		outline: 2px solid color-mix(in srgb, var(--accent-primary) 65%, transparent);
+		outline-offset: 2px;
+	}
+
+	.primary {
+		background: var(--accent-primary-strong, var(--accent-primary));
+		color: var(--text-on-accent);
+	}
+
+	.primary:hover:not(:disabled) {
+		filter: brightness(1.08);
+	}
+
+	.secondary {
+		background: var(--bg-tertiary);
+		border-color: var(--border);
+		color: var(--text-primary);
+	}
+
+	.secondary:hover:not(:disabled) {
+		border-color: var(--border-strong);
+		background: var(--bg-hover);
+	}
+
+	.ghost {
+		background: none;
+		color: var(--text-secondary);
+	}
+
+	.ghost:hover:not(:disabled) {
+		background: var(--bg-hover);
+		color: var(--text-primary);
+	}
+
+	.danger {
+		background: color-mix(in srgb, var(--accent-red) 12%, transparent);
+		border-color: color-mix(in srgb, var(--accent-red) 40%, transparent);
+		color: var(--accent-red);
+	}
+
+	.danger:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--accent-red) 20%, transparent);
+		border-color: var(--accent-red);
+	}
+
+	.danger-solid {
+		background: var(--accent-red-strong, #dc2626);
+		color: var(--text-on-accent);
+	}
+
+	.danger-solid:hover:not(:disabled) {
+		filter: brightness(1.1);
+	}
+</style>
diff --git a/web/src/lib/components/common/EmptyState.svelte b/web/src/lib/components/common/EmptyState.svelte
index 8b293eed..d60f6091 100644
--- a/web/src/lib/components/common/EmptyState.svelte
+++ b/web/src/lib/components/common/EmptyState.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Collection } from '$lib/types';
+	import Button from '$lib/components/common/Button.svelte';
 
 	interface Props {
 		collection: Collection;
@@ -49,9 +50,11 @@
 	<div class="empty-icon">{collection.icon || ''}</div>
 	<p class="empty-message">{message}</p>
 	{#if oncreate}
-		<button class="create-btn" onclick={oncreate}>
-			+ Create {singularName[0].toUpperCase() + singularName.slice(1)}
-		</button>
+		<div class="create-btn-wrap">
+			<Button variant="primary" onclick={oncreate}>
+				+ Create {singularName[0].toUpperCase() + singularName.slice(1)}
+			</Button>
+		</div>
 	{/if}
 	<div class="agent-hint">
 		<span class="hint-text">Or try: <code>{agentPrompt}</code></span>
@@ -87,23 +90,11 @@
 		line-height: 1.5;
 	}
 
-	.create-btn {
-		background: var(--accent-blue);
-		color: #fff;
-		border: none;
-		padding: var(--space-2) var(--space-5);
-		border-radius: var(--radius);
-		font-size: 0.9em;
-		font-weight: 600;
-		cursor: pointer;
-		transition: opacity 0.1s;
+	/* Layout-only wrapper — the button itself is the shared <Button> primitive. */
+	.create-btn-wrap {
 		margin-bottom: var(--space-5);
 	}
 
-	.create-btn:hover {
-		opacity: 0.85;
-	}
-
 	.agent-hint {
 		display: flex;
 		align-items: center;
diff --git a/web/src/lib/components/layout/CreateWorkspaceModal.svelte b/web/src/lib/components/layout/CreateWorkspaceModal.svelte
index 98b9d9cf..d3fdadab 100644
--- a/web/src/lib/components/layout/CreateWorkspaceModal.svelte
+++ b/web/src/lib/components/layout/CreateWorkspaceModal.svelte
@@ -7,6 +7,7 @@
 	import type { Workspace, WorkspaceTemplate } from '$lib/types';
 	import { groupTemplatesByCategory } from '$lib/utils/templates';
 	import Modal from '$lib/components/common/Modal.svelte';
+	import Button from '$lib/components/common/Button.svelte';
 
 	interface Props {
 		/**
@@ -354,15 +355,15 @@
 		</div>
 
 		<div class="modal-footer">
-			<button class="cancel-btn" onclick={close}>Cancel</button>
+			<Button variant="secondary" onclick={close}>Cancel</Button>
 			{#if mode === 'create'}
-				<button class="action-btn" onclick={createWorkspace} disabled={!newName.trim()}>
+				<Button variant="primary" onclick={createWorkspace} disabled={!newName.trim()}>
 					Create Workspace
-				</button>
+				</Button>
 			{:else}
-				<button class="action-btn" onclick={importWorkspace} disabled={!importFile || importing}>
+				<Button variant="primary" onclick={importWorkspace} disabled={!importFile || importing}>
 					{importing ? 'Importing...' : 'Import Workspace'}
-				</button>
+				</Button>
 			{/if}
 		</div>
 </Modal>
@@ -622,23 +623,6 @@
 		padding: var(--space-4) var(--space-5);
 		border-top: 1px solid var(--border);
 	}
-	.action-btn {
-		background: var(--accent-blue); color: #fff;
-		padding: var(--space-2) var(--space-5);
-		border-radius: var(--radius);
-		font-size: 0.88em; font-weight: 500; cursor: pointer;
-	}
-	.action-btn:hover:not(:disabled) { filter: brightness(1.1); }
-	.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-	.cancel-btn {
-		padding: var(--space-2) var(--space-4);
-		border-radius: var(--radius);
-		font-size: 0.88em; color: var(--text-muted);
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border); cursor: pointer;
-	}
-	.cancel-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
-
 	/* Mobile: tighter padding inside the modal so the blank card body and the
 	   expanded template categories don't overflow horizontally at 480px. */
 	@media (max-width: 480px) {
diff --git a/web/src/routes/[username]/[workspace]/+page.svelte b/web/src/routes/[username]/[workspace]/+page.svelte
index eb001584..699a1ed1 100644
--- a/web/src/routes/[username]/[workspace]/+page.svelte
+++ b/web/src/routes/[username]/[workspace]/+page.svelte
@@ -11,6 +11,7 @@
 	import { relativeTime } from '$lib/utils/markdown';
 	import OnboardingLaunchpad from '$lib/components/OnboardingLaunchpad.svelte';
 	import ConnectWorkspaceModal from '$lib/components/ConnectWorkspaceModal.svelte';
+	import Button from '$lib/components/common/Button.svelte';
 	import CreateCollectionModal from '$lib/components/collections/CreateCollectionModal.svelte';
 	import { collectionStore } from '$lib/stores/collections.svelte';
 	import { titleStore } from '$lib/stores/title.svelte';
@@ -357,10 +358,10 @@
 			</div>
 			<div class="dash-header-actions">
 				{#if firstCollection}
-					<button class="btn btn-secondary" onclick={() => uiStore.requestQuickAdd(firstCollection.slug)}>{firstCollection.icon} New {firstCollection.name.replace(/s$/, '')}</button>
+					<Button variant="secondary" onclick={() => uiStore.requestQuickAdd(firstCollection.slug)}>{firstCollection.icon} New {firstCollection.name.replace(/s$/, '')}</Button>
 				{/if}
 				{#if hasTasksCollection}
-					<button class="btn btn-primary" onclick={() => uiStore.requestQuickAdd('tasks')}>+ New Task</button>
+					<Button variant="primary" onclick={() => uiStore.requestQuickAdd('tasks')}>+ New Task</Button>
 				{/if}
 			</div>
 		</header>
@@ -418,8 +419,8 @@
 							have it set up for you — or create your first collection by hand.
 						</p>
 						<div class="empty-escape-actions">
-							<button class="btn btn-primary" onclick={() => (showCreateCollection = true)}>+ Create a collection</button>
-							<button class="btn btn-secondary" onclick={showOnboarding}>Show setup guide</button>
+							<Button variant="primary" onclick={() => (showCreateCollection = true)}>+ Create a collection</Button>
+							<Button variant="secondary" onclick={showOnboarding}>Show setup guide</Button>
 						</div>
 					</div>
 				</div>
@@ -664,7 +665,7 @@
 			<div class="dash-error-icon">⚠️</div>
 			<h2>Couldn't load the dashboard</h2>
 			<p>Something went wrong while loading. It may be a temporary network or server issue.</p>
-			<button class="btn btn-primary" onclick={() => { if (wsSlug) load(wsSlug); }}>Retry</button>
+			<Button variant="primary" onclick={() => { if (wsSlug) load(wsSlug); }}>Retry</Button>
 		</div>
 	{:else}
 		<div class="loading">No dashboard data available.</div>
@@ -743,10 +744,6 @@
 		color: var(--text-muted);
 		max-width: 32em;
 	}
-	.dash-error .btn {
-		cursor: pointer;
-		border: none;
-	}
 
 	/* ── Header ─────────────────────────────────────────────────────────── */
 	.dash-header {
@@ -774,45 +771,8 @@
 		display: flex;
 		gap: var(--space-2);
 	}
-	.btn {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--space-1);
-		font-size: 0.85em;
-		font-weight: 600;
-		padding: var(--space-2) var(--space-4);
-		border-radius: var(--radius);
-		text-decoration: none;
-		transition: background 0.15s, border-color 0.15s, opacity 0.15s;
-		white-space: nowrap;
-	}
-	.btn:hover {
-		text-decoration: none;
-	}
-	.btn-primary {
-		background: var(--accent-blue);
-		color: #fff;
-	}
-	.btn-primary:hover {
-		opacity: 0.9;
-	}
-	.btn-secondary {
-		background: transparent;
-		color: var(--text-secondary);
-		border: 1px solid var(--border);
-	}
-	.btn-secondary:hover {
-		border-color: var(--text-muted);
-		color: var(--text-primary);
-	}
 
 	/* ── Onboarding ─────────────────────────────────────────────────────── */
-	.onboarding-wrapper {
-		margin-bottom: var(--space-6);
-		display: flex;
-		flex-direction: column;
-		gap: var(--space-3);
-	}
 	.onboarding-reshow {
 		margin-bottom: var(--space-4);
 	}
diff --git a/web/src/routes/[username]/[workspace]/conventions/+page.svelte b/web/src/routes/[username]/[workspace]/conventions/+page.svelte
index 5157af44..ad15be29 100644
--- a/web/src/routes/[username]/[workspace]/conventions/+page.svelte
+++ b/web/src/routes/[username]/[workspace]/conventions/+page.svelte
@@ -7,6 +7,7 @@
 	import { createScrollRestoration } from '$lib/scroll/restore.svelte';
 	import { exportAndDownloadArtifact, importArtifactFile } from '$lib/utils/artifacts';
 	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+	import Button from '$lib/components/common/Button.svelte';
 
 	const TRIGGERS = ['always','on-task-start','on-task-complete','on-implement','on-commit','on-pr-create','on-plan-start','on-plan-complete','on-plan'] as const;
 	type Trigger = typeof TRIGGERS[number];
@@ -485,17 +486,17 @@
 			</div>
 			<div class="header-actions">
 				<a href="/{username}/{workspace}/library" class="btn btn-secondary">Browse Library</a>
-				<button
-					class="btn btn-secondary"
+				<Button
+					variant="secondary"
 					disabled={importing}
 					onclick={openImportPicker}
 					title="Import a convention or playbook from a .pad.md artifact"
 				>
 					{importing ? 'Importing…' : 'Import artifact'}
-				</button>
-				<button class="btn btn-primary" onclick={() => (showCreate = !showCreate)}>
+				</Button>
+				<Button variant="primary" onclick={() => (showCreate = !showCreate)}>
 					{showCreate ? 'Cancel' : '+ New Convention'}
-				</button>
+				</Button>
 				<input
 					bind:this={importInputEl}
 					type="file"
@@ -547,10 +548,10 @@
 				<textarea bind:value={newCommands} placeholder="Optional command references, one per line..." rows="2"></textarea>
 				<textarea bind:value={newContent} placeholder="Instruction the agent should follow..." rows="3"></textarea>
 				<div class="form-actions">
-					<button type="button" class="btn btn-secondary" onclick={resetForm}>Cancel</button>
-					<button type="submit" class="btn btn-primary" disabled={creating || !newTitle.trim()}>
+					<Button variant="secondary" onclick={resetForm}>Cancel</Button>
+					<Button variant="primary" type="submit" disabled={creating || !newTitle.trim()}>
 						{creating ? 'Creating...' : 'Create'}
-					</button>
+					</Button>
 				</div>
 			</form>
 		{/if}
@@ -572,7 +573,7 @@
 					{#each ENFORCEMENT_LEVELS as p (p)}<option value={p}>{p}</option>{/each}
 				</select>
 				{#if hasActiveFilters}
-					<button class="btn btn-small btn-secondary" onclick={clearFilters}>Clear</button>
+					<Button variant="secondary" size="sm" onclick={clearFilters}>Clear</Button>
 				{/if}
 			</div>
 		{/if}
@@ -586,7 +587,7 @@
 		{:else if grouped.length === 0 && hasActiveFilters}
 			<div class="empty-state">
 				<p>No conventions match your filters.</p>
-				<button class="btn btn-secondary" onclick={clearFilters}>Clear filters</button>
+				<Button variant="secondary" onclick={clearFilters}>Clear filters</Button>
 			</div>
 		{:else}
 			<div class="groups">
@@ -656,8 +657,8 @@
 														onkeydown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); saveEditing(item); } if (e.key === 'Escape') cancelEditing(); }}
 													></textarea>
 													<div class="expanded-actions">
-														<button class="btn btn-small btn-primary" disabled={saving} onclick={() => saveEditing(item)}>{saving ? 'Saving...' : 'Save'}</button>
-														<button class="btn btn-small btn-secondary" onclick={cancelEditing}>Cancel</button>
+														<Button variant="primary" size="sm" disabled={saving} onclick={() => saveEditing(item)}>{saving ? 'Saving...' : 'Save'}</Button>
+														<Button variant="secondary" size="sm" onclick={cancelEditing}>Cancel</Button>
 														<span class="edit-hint">⌘+Enter to save · Esc to cancel</span>
 													</div>
 												{:else}
@@ -695,21 +696,22 @@
 														</div>
 													{/if}
 													<div class="expanded-actions">
-														<button class="btn btn-small btn-secondary" onclick={() => startEditing(item)}>Edit</button>
-														<button
-															class="btn btn-small btn-secondary"
+														<Button variant="secondary" size="sm" onclick={() => startEditing(item)}>Edit</Button>
+														<Button
+															variant="secondary"
+															size="sm"
 															disabled={exportingSlug === item.slug}
 															onclick={() => handleExport(item)}
 															title="Download as a .pad.md artifact"
 														>
 															{exportingSlug === item.slug ? 'Exporting…' : 'Export'}
-														</button>
+														</Button>
 														{#if confirmDelete === item.slug}
 															<span class="confirm-text">Delete this convention?</span>
-															<button class="btn btn-small btn-danger" onclick={() => deleteConvention(item)}>Confirm</button>
-															<button class="btn btn-small btn-secondary" onclick={() => (confirmDelete = null)}>Cancel</button>
+															<Button variant="danger-solid" size="sm" onclick={() => deleteConvention(item)}>Confirm</Button>
+															<Button variant="secondary" size="sm" onclick={() => (confirmDelete = null)}>Cancel</Button>
 														{:else}
-															<button class="btn btn-small btn-danger-outline" onclick={() => (confirmDelete = item.slug)}>Delete</button>
+															<Button variant="danger" size="sm" onclick={() => (confirmDelete = item.slug)}>Delete</Button>
 														{/if}
 													</div>
 												{/if}
@@ -737,17 +739,11 @@
 	.header-actions { display: flex; gap: var(--space-2); flex-shrink: 0; flex-wrap: wrap; }
 	.visually-hidden-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 
-	/* Buttons */
+	/* Buttons — .btn/.btn-secondary retained only for the Browse Library <a>
+	   (the shared Button primitive renders <button> elements only). */
 	.btn { padding: var(--space-1) var(--space-4); border-radius: var(--radius); font-size: 0.85em; font-weight: 600; cursor: pointer; border: none; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }
-	.btn-primary { background: var(--accent-blue); color: #fff; }
-	.btn-primary:hover { opacity: 0.9; text-decoration: none; }
-	.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
 	.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
 	.btn-secondary:hover { background: var(--bg-hover); text-decoration: none; }
-	.btn-small { padding: 2px var(--space-3); font-size: 0.8em; }
-	.btn-danger { background: var(--accent-red); color: #fff; }
-	.btn-danger-outline { background: none; color: var(--accent-red); border: 1px solid var(--accent-red); }
-	.btn-danger-outline:hover { background: rgba(220,38,38,0.1); }
 
 	/* Create form */
 	.create-form { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
diff --git a/web/src/routes/[username]/[workspace]/playbooks/+page.svelte b/web/src/routes/[username]/[workspace]/playbooks/+page.svelte
index 043759da..1ac9f785 100644
--- a/web/src/routes/[username]/[workspace]/playbooks/+page.svelte
+++ b/web/src/routes/[username]/[workspace]/playbooks/+page.svelte
@@ -8,6 +8,7 @@
 	import { exportAndDownloadArtifact, importArtifactFile } from '$lib/utils/artifacts';
 	import { statusColor } from '$lib/utils/fieldColors';
 	import Chip from '$lib/components/common/Chip.svelte';
+	import Button from '$lib/components/common/Button.svelte';
 	import PlaybookFormFields from '$lib/components/playbooks/PlaybookFormFields.svelte';
 	import {
 		PLAYBOOK_SKELETON_BODY,
@@ -392,14 +393,13 @@
 			{#if !showNewForm}
 				<div style="display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;">
 					<a href="/{username}/{wsSlug}/library?tab=playbooks" class="new-btn" style="background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);">📚 Browse Library</a>
-					<button
-						class="new-btn"
-						style="background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);"
+					<Button
+						variant="secondary"
 						disabled={importing}
 						onclick={openImportPicker}
 						title="Import a playbook or convention from a .pad.md artifact"
-					>{importing ? 'Importing…' : 'Import artifact'}</button>
-					<button class="new-btn" onclick={() => (showNewForm = true)}>+ New Playbook</button>
+					>{importing ? 'Importing…' : 'Import artifact'}</Button>
+					<Button variant="primary" onclick={() => (showNewForm = true)}>+ New Playbook</Button>
 					<input
 						bind:this={importInputEl}
 						type="file"
@@ -457,9 +457,9 @@
 					</div>
 				</div>
 				<div class="form-actions">
-					<button class="btn btn-secondary" onclick={resetForm}>Cancel</button>
-					<button class="btn btn-draft" disabled={!newTitle.trim()} onclick={() => createPlaybook('draft')}>Create as Draft</button>
-					<button class="btn btn-primary" disabled={!newTitle.trim()} onclick={() => createPlaybook('active')}>Create as Active</button>
+					<Button variant="ghost" onclick={resetForm}>Cancel</Button>
+					<Button variant="secondary" disabled={!newTitle.trim()} onclick={() => createPlaybook('draft')}>Create as Draft</Button>
+					<Button variant="primary" disabled={!newTitle.trim()} onclick={() => createPlaybook('active')}>Create as Active</Button>
 				</div>
 			</div>
 		{/if}
@@ -476,7 +476,7 @@
 					{#each allScopes as s (s)}<option value={s}>{s}</option>{/each}
 				</select>
 				{#if hasActiveFilters}
-					<button class="action-btn" onclick={clearFilters}>Clear</button>
+					<Button variant="secondary" size="sm" onclick={clearFilters}>Clear</Button>
 				{/if}
 			</div>
 		{/if}
@@ -484,14 +484,14 @@
 		{#if sorted.length === 0 && hasActiveFilters && !showNewForm}
 			<div class="empty-state">
 				<p>No playbooks match your filters.</p>
-				<button class="btn btn-secondary" onclick={clearFilters}>Clear filters</button>
+				<Button variant="ghost" onclick={clearFilters}>Clear filters</Button>
 			</div>
 		{:else if sorted.length === 0 && !showNewForm}
 			<div class="empty-state">
 				<div class="empty-icon">&#x1F4D8;</div>
 				<h2>No playbooks yet</h2>
 				<p>Playbooks are multi-step workflows that guide agents through complex tasks.</p>
-				<button class="btn btn-primary" onclick={() => (showNewForm = true)}>Create Your First Playbook</button>
+				<Button variant="primary" onclick={() => (showNewForm = true)}>Create Your First Playbook</Button>
 			</div>
 		{:else}
 			<div class="cards">
@@ -539,24 +539,24 @@
 								</div>
 								<div class="card-divider"></div>
 								<div class="card-actions">
-									<button class="action-btn" onclick={() => goto(`/${username}/${wsSlug}/playbooks/${itemUrlId(item)}`)}>Edit</button>
-									<button class="action-btn" disabled={togglingStatus === item.slug} onclick={() => toggleStatus(item)}>
+									<Button variant="secondary" size="sm" onclick={() => goto(`/${username}/${wsSlug}/playbooks/${itemUrlId(item)}`)}>Edit</Button>
+									<Button variant="secondary" size="sm" disabled={togglingStatus === item.slug} onclick={() => toggleStatus(item)}>
 										{togglingStatus === item.slug ? '...' : nextStatusLabel(status)}
-									</button>
-									<button class="action-btn" disabled={duplicating === item.slug} onclick={() => duplicatePlaybook(item)}>
+									</Button>
+									<Button variant="secondary" size="sm" disabled={duplicating === item.slug} onclick={() => duplicatePlaybook(item)}>
 										{duplicating === item.slug ? '...' : 'Duplicate'}
-									</button>
-									<button class="action-btn" disabled={exportingSlug === item.slug} onclick={() => exportPlaybook(item)} title="Download as a .pad.md artifact">
+									</Button>
+									<Button variant="secondary" size="sm" disabled={exportingSlug === item.slug} onclick={() => exportPlaybook(item)} title="Download as a .pad.md artifact">
 										{exportingSlug === item.slug ? '...' : 'Export'}
-									</button>
+									</Button>
 									{#if confirmDeleteSlug === item.slug}
 										<span class="delete-confirm">
 											Delete?
-											<button class="action-btn action-danger" disabled={deleting === item.slug} onclick={() => deletePlaybook(item.slug)}>{deleting === item.slug ? '...' : 'Yes'}</button>
-											<button class="action-btn" onclick={() => (confirmDeleteSlug = null)}>No</button>
+											<Button variant="danger" size="sm" disabled={deleting === item.slug} onclick={() => deletePlaybook(item.slug)}>{deleting === item.slug ? '...' : 'Yes'}</Button>
+											<Button variant="secondary" size="sm" onclick={() => (confirmDeleteSlug = null)}>No</Button>
 										</span>
 									{:else}
-										<button class="action-btn action-danger" onclick={() => (confirmDeleteSlug = item.slug)}>Delete</button>
+										<Button variant="danger" size="sm" onclick={() => (confirmDeleteSlug = item.slug)}>Delete</Button>
 									{/if}
 								</div>
 							</div>
@@ -574,9 +574,10 @@
 	.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-8); gap: var(--space-4); }
 	.page-header h1 { font-size: 1.6em; margin-bottom: var(--space-1); }
 	.subtitle { color: var(--text-secondary); font-size: 0.95em; }
+	/* .new-btn retained only for the Browse Library <a> (the shared Button
+	   primitive renders <button> elements only). */
 	.new-btn { background: var(--accent-blue); color: #fff; padding: var(--space-2) var(--space-5); border-radius: var(--radius); font-size: 0.85em; font-weight: 600; white-space: nowrap; flex-shrink: 0; transition: opacity 0.15s; }
 	.new-btn:hover { opacity: 0.85; }
-	.new-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 	.visually-hidden-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 	.empty-state { text-align: center; padding: var(--space-10) var(--space-6); color: var(--text-secondary); }
 	.empty-icon { font-size: 3em; margin-bottom: var(--space-4); opacity: 0.6; }
@@ -611,11 +612,6 @@
 	.code-line { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-tertiary); padding: 2px var(--space-2); border-radius: var(--radius-sm); margin: 2px 0; }
 	.no-content { color: var(--text-muted); font-size: 0.9em; font-style: italic; }
 	.card-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
-	.action-btn { padding: var(--space-1) var(--space-3); font-size: 0.8em; font-weight: 600; border-radius: var(--radius); background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); cursor: pointer; transition: background 0.15s, color 0.15s; }
-	.action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
-	.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-	.action-danger { color: var(--accent-orange); }
-	.action-danger:hover { background: color-mix(in srgb, var(--accent-orange) 15%, var(--bg-tertiary)); color: var(--accent-orange); }
 	.delete-confirm { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8em; color: var(--accent-orange); font-weight: 600; }
 	.new-form { background: var(--bg-secondary); border: 1px solid var(--accent-blue); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-6); }
 	.new-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); align-items: start; margin-top: var(--space-2); }
@@ -629,19 +625,14 @@
 	.form-input:focus, .form-textarea:focus { border-color: var(--accent-blue); outline: none; }
 	.form-textarea { padding: var(--space-3); background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: var(--font-mono); font-size: 0.9em; line-height: 1.6; min-height: 200px; resize: vertical; }
 	.form-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-4); }
-	.btn { padding: var(--space-2) var(--space-5); border-radius: var(--radius); font-size: 0.85em; font-weight: 600; cursor: pointer; border: none; transition: opacity 0.15s; }
-	.btn:disabled { opacity: 0.5; cursor: not-allowed; }
-	.btn:hover:not(:disabled) { opacity: 0.85; }
-	.btn-primary { background: var(--accent-blue); color: #fff; }
-	.btn-draft { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
-	.btn-secondary { background: transparent; color: var(--text-secondary); }
-	.btn-secondary:hover:not(:disabled) { color: var(--text-primary); opacity: 1; }
 	@media (max-width: 1024px) {
 		.new-form-grid { grid-template-columns: 1fr; }
 	}
 	@media (max-width: 768px) {
 		.page-header { flex-direction: column; }
 		.form-actions { flex-direction: column; }
-		.form-actions .btn { width: 100%; text-align: center; }
+		/* Full-width form buttons on mobile — the shared Button primitive's
+		   root carries the .btn class, so :global reaches into it. */
+		.form-actions :global(.btn) { width: 100%; }
 	}
 </style>
diff --git a/web/src/routes/[username]/[workspace]/playbooks/[slug]/+page.svelte b/web/src/routes/[username]/[workspace]/playbooks/[slug]/+page.svelte
index ac8f1a0d..ac245920 100644
--- a/web/src/routes/[username]/[workspace]/playbooks/[slug]/+page.svelte
+++ b/web/src/routes/[username]/[workspace]/playbooks/[slug]/+page.svelte
@@ -7,6 +7,7 @@
 	import { createScrollRestoration } from '$lib/scroll/restore.svelte';
 	import { exportAndDownloadArtifact } from '$lib/utils/artifacts';
 	import PlaybookFormFields from '$lib/components/playbooks/PlaybookFormFields.svelte';
+	import Button from '$lib/components/common/Button.svelte';
 	import {
 		argumentsFromJSON,
 		argumentsToJSON,
@@ -261,24 +262,22 @@
 				/>
 			</div>
 			<div class="header-actions">
-				<button type="button" class="btn btn-secondary" onclick={cancel}>Cancel</button>
-				<button
-					type="button"
-					class="btn btn-secondary"
+				<Button variant="secondary" onclick={cancel}>Cancel</Button>
+				<Button
+					variant="secondary"
 					disabled={exporting}
 					onclick={handleExport}
 					title="Download this playbook as a .pad.md artifact"
 				>
 					{exporting ? 'Exporting…' : 'Export'}
-				</button>
-				<button
-					type="button"
-					class="btn btn-primary"
+				</Button>
+				<Button
+					variant="primary"
 					disabled={saving || !title.trim()}
 					onclick={save}
 				>
 					{saving ? 'Saving…' : 'Save'}
-				</button>
+				</Button>
 			</div>
 		</header>
 
@@ -376,35 +375,6 @@
 		gap: var(--space-2);
 		flex-shrink: 0;
 	}
-	.btn {
-		padding: var(--space-2) var(--space-5);
-		border-radius: var(--radius);
-		font-size: 0.85em;
-		font-weight: 600;
-		cursor: pointer;
-		border: none;
-		transition: opacity 0.15s;
-	}
-	.btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-	.btn:hover:not(:disabled) {
-		opacity: 0.85;
-	}
-	.btn-primary {
-		background: var(--accent-blue);
-		color: #fff;
-	}
-	.btn-secondary {
-		background: transparent;
-		color: var(--text-secondary);
-		border: 1px solid var(--border);
-	}
-	.btn-secondary:hover:not(:disabled) {
-		color: var(--text-primary);
-		opacity: 1;
-	}
 	.edit-grid {
 		display: grid;
 		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
@@ -462,7 +432,9 @@
 		.header-actions {
 			align-self: stretch;
 		}
-		.header-actions .btn {
+		/* Equal-width header buttons on mobile — the shared Button primitive's
+		   root carries the .btn class, so :global reaches into it. */
+		.header-actions :global(.btn) {
 			flex: 1;
 		}
 	}
diff --git a/web/src/routes/[username]/[workspace]/settings/+page.svelte b/web/src/routes/[username]/[workspace]/settings/+page.svelte
index 92b89610..56077a19 100644
--- a/web/src/routes/[username]/[workspace]/settings/+page.svelte
+++ b/web/src/routes/[username]/[workspace]/settings/+page.svelte
@@ -11,6 +11,7 @@
 	import EditCollectionModal from '$lib/components/collections/EditCollectionModal.svelte';
 	import StorageTab from '$lib/components/settings/StorageTab.svelte';
 	import Chip from '$lib/components/common/Chip.svelte';
+	import Button from '$lib/components/common/Button.svelte';
 	import { collectionStore } from '$lib/stores/collections.svelte';
 	import { toastStore } from '$lib/stores/toast.svelte';
 	import { copyToClipboard } from '$lib/utils/clipboard';
@@ -510,9 +511,9 @@
 								onkeydown={(e) => isOwner && e.key === 'Enter' && saveName()}
 							/>
 							{#if isOwner}
-								<button class="btn btn-small" onclick={saveName} disabled={savingName}>
+								<Button variant="secondary" size="sm" onclick={saveName} disabled={savingName}>
 									{savingName ? 'Saving...' : 'Save'}
-								</button>
+								</Button>
 								{#if nameStatus === 'saved'}
 									<span class="status-saved">Saved</span>
 								{:else if nameStatus === 'error'}
@@ -587,15 +588,15 @@
 					{/if}
 					{#if isOwner}
 						<div class="context-actions">
-							<button class="btn btn-primary" onclick={saveContext} disabled={savingContext}>
+							<Button variant="primary" onclick={saveContext} disabled={savingContext}>
 								{savingContext ? 'Saving...' : 'Save Context'}
-							</button>
-							<button class="btn" onclick={resetContextEditor} disabled={savingContext}>
+							</Button>
+							<Button variant="secondary" onclick={resetContextEditor} disabled={savingContext}>
 								Reset
-							</button>
-							<button class="btn" onclick={clearContextEditor} disabled={savingContext}>
+							</Button>
+							<Button variant="secondary" onclick={clearContextEditor} disabled={savingContext}>
 								Clear
-							</button>
+							</Button>
 							{#if contextStatus === 'saved'}
 								<span class="status-saved">Saved</span>
 							{:else if contextStatus === 'error' && !contextError}
@@ -644,9 +645,9 @@
 												<option value="editor">Editor</option>
 												<option value="viewer">Viewer</option>
 											</select>
-											<button class="btn btn-small btn-remove" onclick={() => handleRemoveMember(member.user_id, member.user_name)}>
+											<Button variant="danger" size="sm" onclick={() => handleRemoveMember(member.user_id, member.user_name)}>
 												Remove
-											</button>
+											</Button>
 										{:else}
 											<Chip color="var(--accent-gray)">{member.role}</Chip>
 										{/if}
@@ -693,12 +694,12 @@
 												</div>
 											{/if}
 											<div class="access-actions">
-												<button class="btn btn-primary btn-small" onclick={saveCollectionAccess} disabled={accessSaving}>
+												<Button variant="primary" size="sm" onclick={saveCollectionAccess} disabled={accessSaving}>
 													{accessSaving ? 'Saving...' : 'Save'}
-												</button>
-												<button class="btn btn-small" onclick={() => { expandedAccessUserId = null; }}>
+												</Button>
+												<Button variant="secondary" size="sm" onclick={() => { expandedAccessUserId = null; }}>
 													Cancel
-												</button>
+												</Button>
 											</div>
 										{/if}
 									</div>
@@ -723,9 +724,9 @@
 									<span class="inv-sent-label">Sent via email</span>
 								{/if}
 								{#if isOwner}
-									<button class="btn btn-small btn-remove" onclick={() => handleCancelInvitation(inv.id, inv.email)}>
+									<Button variant="danger" size="sm" onclick={() => handleCancelInvitation(inv.id, inv.email)}>
 										Cancel
-									</button>
+									</Button>
 								{/if}
 							</div>
 						{/each}
@@ -748,9 +749,9 @@
 								<option value="viewer">Viewer</option>
 								<option value="owner">Owner</option>
 							</select>
-							<button class="btn btn-primary btn-small" onclick={handleInvite} disabled={inviting || !inviteEmail.trim()}>
+							<Button variant="primary" size="sm" onclick={handleInvite} disabled={inviting || !inviteEmail.trim()}>
 								{inviting ? 'Inviting...' : 'Invite'}
-							</button>
+							</Button>
 						</div>
 						{#if inviteResult}
 							<p class="invite-result" class:invite-success={inviteResult.type === 'success'} class:invite-error={inviteResult.type === 'error'}>
@@ -844,9 +845,9 @@
 								<strong>Delete this workspace</strong>
 								<p>This immediately hides the workspace and everything in it — collections, items, documents, and attachments — and permanently deletes it 30 days later. You can restore it any time within those 30 days — from the Undo prompt right after deleting, the workspace switcher's Recently deleted section, or the Deleted workspaces page.</p>
 							</div>
-							<button class="btn btn-danger" onclick={() => confirmDelete = true}>
+							<Button variant="danger" onclick={() => confirmDelete = true}>
 								Delete workspace
-							</button>
+							</Button>
 						</div>
 					{:else}
 						<div class="danger-confirm">
@@ -862,10 +863,10 @@
 								/>
 							</div>
 							<div class="danger-actions">
-								<button class="btn btn-danger" onclick={handleDeleteWorkspace} disabled={deleteInput !== wsSlug || deleting}>
+								<Button variant="danger" onclick={handleDeleteWorkspace} disabled={deleteInput !== wsSlug || deleting}>
 									{deleting ? 'Deleting...' : 'Delete this workspace'}
-								</button>
-								<button class="btn" onclick={() => { confirmDelete = false; deleteInput = ''; }}>Cancel</button>
+								</Button>
+								<Button variant="secondary" onclick={() => { confirmDelete = false; deleteInput = ''; }}>Cancel</Button>
 							</div>
 						</div>
 					{/if}
@@ -929,12 +930,12 @@
 	.inline-edit input { flex: 1; min-width: 120px; max-width: 300px; }
 	.status-saved { font-size: 0.8em; color: var(--accent-green); }
 	.status-error { font-size: 0.8em; color: var(--accent-orange); }
+	/* .btn/.btn-small retained for the remaining non-migrated controls: the
+	   export <a> (Button renders <button> only), .btn-access (stateful
+	   toggle), .copy-link-btn (accent-outline), and .btn-create (dashed). */
 	.btn { padding: var(--space-2) var(--space-4); background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85em; cursor: pointer; color: var(--text-primary); }
 	.btn:hover { background: var(--bg-hover); }
-	.btn:disabled { opacity: 0.5; cursor: not-allowed; }
 	.btn-small { padding: var(--space-1) var(--space-3); font-size: 0.8em; }
-	.btn-primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
-	.btn-primary:hover { opacity: 0.9; }
 	.btn-create { margin-top: var(--space-3); width: 100%; padding: var(--space-3); background: var(--bg-secondary); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-secondary); font-size: 0.85em; cursor: pointer; }
 	.btn-create:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
 	.coll-list { display: flex; flex-direction: column; gap: var(--space-3); }
@@ -976,8 +977,6 @@
 	.member-email { font-size: 0.8em; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 	.member-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
 	.role-select { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: 0.8em; color: var(--text-primary); cursor: pointer; }
-	.btn-remove { color: var(--accent-red); border-color: transparent; background: none; }
-	.btn-remove:hover { background: color-mix(in srgb, var(--accent-red) 15%, transparent); }
 	/* ── Collection Access ──── */
 	.member-card-wrapper { display: flex; flex-direction: column; }
 	.member-card-wrapper + .member-card-wrapper { margin-top: var(--space-3); }
@@ -1021,9 +1020,6 @@
 	.danger-info { flex: 1; }
 	.danger-info strong { font-size: 0.9em; }
 	.danger-info p { font-size: 0.8em; color: var(--text-muted); margin: var(--space-1) 0 0; }
-	.btn-danger { padding: var(--space-2) var(--space-4); background: none; border: 1px solid var(--accent-red); border-radius: var(--radius); color: var(--accent-red); font-size: 0.85em; cursor: pointer; white-space: nowrap; font-weight: 500; }
-	.btn-danger:hover:not(:disabled) { background: var(--accent-red); color: #fff; }
-	.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }
 	.danger-confirm { display: flex; flex-direction: column; gap: var(--space-3); }
 	.danger-warning { font-size: 0.88em; color: var(--text-primary); margin: 0; }
 	.danger-warning strong { color: var(--accent-red); }
diff --git a/web/src/routes/console/+page.svelte b/web/src/routes/console/+page.svelte
index d3b3620e..d60f5b41 100644
--- a/web/src/routes/console/+page.svelte
+++ b/web/src/routes/console/+page.svelte
@@ -7,6 +7,7 @@
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { uiStore } from '$lib/stores/ui.svelte';
 	import Chip from '$lib/components/common/Chip.svelte';
+	import Button from '$lib/components/common/Button.svelte';
 	import type { Workspace } from '$lib/types';
 
 	let workspaces = $state<Workspace[]>([]);
@@ -71,7 +72,7 @@
 		<section class="section">
 			<div class="section-header">
 				<h2 class="section-title">Your Workspaces</h2>
-				<button type="button" class="create-btn" onclick={() => uiStore.openCreateWorkspace()}>Create Workspace</button>
+				<Button variant="primary" onclick={() => uiStore.openCreateWorkspace()}>Create Workspace</Button>
 			</div>
 
 			{#if ownedWorkspaces.length === 0}
@@ -172,25 +173,6 @@
 		color: var(--text-primary);
 	}
 
-	.create-btn {
-		padding: var(--space-2) var(--space-4);
-		background: var(--accent-blue);
-		color: #fff;
-		border: none;
-		border-radius: var(--radius);
-		font-family: inherit;
-		font-size: 0.85rem;
-		font-weight: 500;
-		text-decoration: none;
-		cursor: pointer;
-		transition: opacity 0.15s;
-	}
-
-	.create-btn:hover {
-		opacity: 0.9;
-		text-decoration: none;
-	}
-
 	.workspace-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
diff --git a/web/src/routes/console/billing/+page.svelte b/web/src/routes/console/billing/+page.svelte
index 4b3efa7b..947c40b6 100644
--- a/web/src/routes/console/billing/+page.svelte
+++ b/web/src/routes/console/billing/+page.svelte
@@ -2,6 +2,7 @@
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { api } from '$lib/api/client';
 	import { toastStore } from '$lib/stores/toast.svelte';
+	import Button from '$lib/components/common/Button.svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { onMount, onDestroy } from 'svelte';
@@ -283,13 +284,15 @@
 			{#if isPro}
 				<a href="/billing/portal" class="secondary-btn">Manage Billing</a>
 			{:else if stripeAvailable}
-				<button
-					class="primary-btn"
-					onclick={startCheckout}
-					disabled={checkoutInProgress}
-				>
-					{checkoutInProgress ? 'Redirecting…' : 'Upgrade to Pro'}
-				</button>
+				<div class="cta-line">
+					<Button
+						variant="primary"
+						onclick={startCheckout}
+						disabled={checkoutInProgress}
+					>
+						{checkoutInProgress ? 'Redirecting…' : 'Upgrade to Pro'}
+					</Button>
+				</div>
 			{/if}
 		</div>
 	</section>
@@ -328,13 +331,13 @@
 			{#if !isPro}
 				{#if stripeAvailable}
 					<div class="compare-cta">
-						<button
-							class="primary-btn"
+						<Button
+							variant="primary"
 							onclick={startCheckout}
 							disabled={checkoutInProgress}
 						>
 							{checkoutInProgress ? 'Redirecting…' : 'Upgrade to Pro'}
-						</button>
+						</Button>
 					</div>
 				{:else}
 					<div class="compare-cta coming-soon">
@@ -426,29 +429,10 @@
 		line-height: 1.4;
 	}
 
-	.primary-btn {
-		display: inline-block;
+	/* Layout-only wrapper: keeps the checkout CTA at natural width inside
+	   the card-body flex column (the old .primary-btn carried align-self). */
+	.cta-line {
 		align-self: flex-start;
-		padding: var(--space-2) var(--space-5);
-		background: var(--accent-blue);
-		color: #fff;
-		border: none;
-		border-radius: var(--radius);
-		font-size: 0.9rem;
-		font-weight: 500;
-		text-decoration: none;
-		cursor: pointer;
-		transition: opacity 0.15s;
-	}
-
-	.primary-btn:hover:not(:disabled) {
-		opacity: 0.9;
-		text-decoration: none;
-	}
-
-	.primary-btn:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
 	}
 
 	.secondary-btn {
diff --git a/web/src/routes/console/connected-apps/+page.svelte b/web/src/routes/console/connected-apps/+page.svelte
index c4ccff5b..eb023c3a 100644
--- a/web/src/routes/console/connected-apps/+page.svelte
+++ b/web/src/routes/console/connected-apps/+page.svelte
@@ -3,6 +3,7 @@
 	import { api } from '$lib/api/client';
 	import Modal from '$lib/components/common/Modal.svelte';
 	import Chip from '$lib/components/common/Chip.svelte';
+	import Button from '$lib/components/common/Button.svelte';
 	import type { ConnectedApp, Workspace } from '$lib/types';
 
 	// Connected Apps page (TASK-954). Lists every active OAuth grant
@@ -280,7 +281,7 @@
 	{:else if error}
 		<div class="error-msg">
 			<p>{error}</p>
-			<button class="btn" onclick={loadApps}>Retry</button>
+			<Button variant="secondary" onclick={loadApps}>Retry</Button>
 		</div>
 	{:else if apps.length === 0}
 		<div class="empty-state">
@@ -407,14 +408,14 @@
 					</div>
 
 					<div class="app-actions">
-						<button
-							class="btn"
+						<Button
+							variant="secondary"
 							onclick={() => (editingId === app.id ? closeEdit() : openEdit(app))}
 							aria-expanded={editingId === app.id}
 						>
 							{editingId === app.id ? 'Done' : 'Edit'}
-						</button>
-						<button class="btn btn-danger" onclick={() => openConfirm(app)}>Revoke</button>
+						</Button>
+						<Button variant="danger" onclick={() => openConfirm(app)}>Revoke</Button>
 					</div>
 
 					{#if editingId === app.id}
@@ -438,14 +439,14 @@
 										bind:value={nameDrafts[app.id]}
 										disabled={!!savingFlag[app.id]}
 									/>
-									<button
-										class="btn"
+									<Button
+										variant="secondary"
 										onclick={() => saveName(app)}
 										disabled={!!savingFlag[app.id] ||
 											(nameDrafts[app.id] ?? '').trim() === (app.name ?? '')}
 									>
 										Save
-									</button>
+									</Button>
 								</div>
 								{#if !(app.name ?? '')}
 									<p class="edit-hint">
@@ -558,13 +559,13 @@
 											<option value={ws.slug}>{ws.name}</option>
 										{/each}
 									</select>
-									<button
-										class="btn"
+									<Button
+										variant="secondary"
 										onclick={() => addWorkspaceToApp(app)}
 										disabled={!!savingFlag[app.id] || !addPickerSlug[app.id]}
 									>
 										Add
-									</button>
+									</Button>
 								</div>
 								{#if workspacesError}
 									<p class="edit-hint edit-hint-error">{workspacesError}</p>
@@ -598,10 +599,10 @@
 				<p class="modal-error">{revokeError}</p>
 			{/if}
 			<div class="modal-actions">
-				<button class="btn" onclick={closeConfirm} disabled={revoking}>Cancel</button>
-				<button class="btn btn-danger" onclick={confirmRevoke} disabled={revoking}>
+				<Button variant="secondary" onclick={closeConfirm} disabled={revoking}>Cancel</Button>
+				<Button variant="danger" onclick={confirmRevoke} disabled={revoking}>
 					{revoking ? 'Revoking…' : 'Revoke'}
-				</button>
+				</Button>
 			</div>
 		</div>
 	{/if}
@@ -868,38 +869,6 @@
 		flex-shrink: 0;
 	}
 
-	/* Buttons */
-	.btn {
-		padding: var(--space-2) var(--space-4);
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: var(--radius);
-		color: var(--text-primary);
-		font-size: 0.85rem;
-		font-weight: 500;
-		cursor: pointer;
-		transition: background 0.15s, color 0.15s, border-color 0.15s;
-	}
-
-	.btn:hover:not(:disabled) {
-		background: var(--bg-tertiary);
-	}
-
-	.btn:disabled {
-		opacity: 0.5;
-		cursor: default;
-	}
-
-	.btn-danger {
-		color: var(--accent-red);
-		border-color: rgba(239, 68, 68, 0.4);
-	}
-
-	.btn-danger:hover:not(:disabled) {
-		background: rgba(239, 68, 68, 0.1);
-		border-color: var(--accent-red);
-	}
-
 	/* Modal — surface/backdrop/Escape come from the shared <Modal> primitive
 	   (TASK-2083); this wrapper just restores the inner padding + column layout. */
 	.revoke-modal {
@@ -948,7 +917,9 @@
 			align-self: stretch;
 		}
 
-		.app-actions .btn {
+		/* Layout-only: stretch the shared <Button>s full-width on mobile.
+		   :global because the button element lives inside the Button component. */
+		.app-actions :global(button) {
 			width: 100%;
 		}
 	}
diff --git a/web/src/routes/console/settings/+page.svelte b/web/src/routes/console/settings/+page.svelte
index fadc6349..747f2766 100644
--- a/web/src/routes/console/settings/+page.svelte
+++ b/web/src/routes/console/settings/+page.svelte
@@ -5,6 +5,7 @@
 	import { toastStore } from '$lib/stores/toast.svelte';
 	import { copyToClipboard } from '$lib/utils/clipboard';
 	import { exportAndDownloadAccountData } from '$lib/utils/artifacts';
+	import Button from '$lib/components/common/Button.svelte';
 	import type { User, APIToken, APITokenWithSecret, TOTPSetupResponse } from '$lib/types';
 
 	// Profile
@@ -511,9 +512,11 @@
 				{#if profileMsg}
 					<p class="success">{profileMsg}</p>
 				{/if}
-				<button class="primary-btn" onclick={saveProfile} disabled={profileSaving}>
-					{profileSaving ? 'Saving...' : 'Save Changes'}
-				</button>
+				<div class="btn-row">
+					<Button variant="primary" onclick={saveProfile} disabled={profileSaving}>
+						{profileSaving ? 'Saving...' : 'Save Changes'}
+					</Button>
+				</div>
 			</div>
 		</section>
 
@@ -539,9 +542,11 @@
 				{#if passwordMsg}
 					<p class="success">{passwordMsg}</p>
 				{/if}
-				<button class="primary-btn" onclick={changePassword} disabled={passwordSaving}>
-					{passwordSaving ? 'Changing...' : 'Change Password'}
-				</button>
+				<div class="btn-row">
+					<Button variant="primary" onclick={changePassword} disabled={passwordSaving}>
+						{passwordSaving ? 'Changing...' : 'Change Password'}
+					</Button>
+				</div>
 			</div>
 		</section>
 
@@ -576,23 +581,27 @@
 										<p class="error">{totpError}</p>
 									{/if}
 									<div class="btn-row">
-										<button class="danger-btn" onclick={disableTOTP} disabled={totpSaving}>
+										<Button variant="danger" onclick={disableTOTP} disabled={totpSaving}>
 											{totpSaving ? 'Disabling...' : 'Confirm Disable'}
-										</button>
-										<button class="secondary-btn" onclick={() => { showDisableConfirm = false; disablePassword = ''; totpError = ''; }} disabled={totpSaving}>
+										</Button>
+										<Button variant="secondary" onclick={() => { showDisableConfirm = false; disablePassword = ''; totpError = ''; }} disabled={totpSaving}>
 											Cancel
-										</button>
+										</Button>
 									</div>
 								</div>
 							{:else}
-								<button class="danger-btn" onclick={() => { showDisableConfirm = true; totpError = ''; totpMsg = ''; }}>
-									Disable 2FA
-								</button>
+								<div class="btn-row">
+									<Button variant="danger" onclick={() => { showDisableConfirm = true; totpError = ''; totpMsg = ''; }}>
+										Disable 2FA
+									</Button>
+								</div>
 							{/if}
 						{:else}
-							<button class="primary-btn" onclick={startTOTPSetup} disabled={totpSaving}>
-								{totpSaving ? 'Setting up...' : 'Enable 2FA'}
-							</button>
+							<div class="btn-row">
+								<Button variant="primary" onclick={startTOTPSetup} disabled={totpSaving}>
+									{totpSaving ? 'Setting up...' : 'Enable 2FA'}
+								</Button>
+							</div>
 						{/if}
 					</div>
 					{#if totpMsg}
@@ -631,10 +640,10 @@
 						<p class="error">{totpError}</p>
 					{/if}
 					<div class="btn-row">
-						<button class="primary-btn" onclick={verifyTOTP} disabled={totpSaving || !totpCode.trim()}>
+						<Button variant="primary" onclick={verifyTOTP} disabled={totpSaving || !totpCode.trim()}>
 							{totpSaving ? 'Verifying...' : 'Verify & Enable'}
-						</button>
-						<button class="secondary-btn" onclick={cancelSetup} disabled={totpSaving}>Cancel</button>
+						</Button>
+						<Button variant="secondary" onclick={cancelSetup} disabled={totpSaving}>Cancel</Button>
 					</div>
 
 				{:else if totpStep === 'recovery'}
@@ -646,13 +655,15 @@
 							{/each}
 						</div>
 						<div class="btn-row">
-							<button class="secondary-btn" onclick={copyRecoveryCodes}>Copy</button>
-							<button class="secondary-btn" onclick={downloadRecoveryCodes}>Download</button>
+							<Button variant="secondary" onclick={copyRecoveryCodes}>Copy</Button>
+							<Button variant="secondary" onclick={downloadRecoveryCodes}>Download</Button>
 						</div>
 						{#if totpMsg}
 							<p class="success">{totpMsg}</p>
 						{/if}
-						<button class="primary-btn" onclick={finishSetup}>Done</button>
+						<div class="btn-row">
+							<Button variant="primary" onclick={finishSetup}>Done</Button>
+						</div>
 					</div>
 				{/if}
 			</div>
@@ -680,7 +691,7 @@
 									{/if}
 								</div>
 								{#if linked}
-									<button class="delete-btn" onclick={() => unlinkProvider(p.id)}>Unlink</button>
+									<Button variant="danger" size="sm" onclick={() => unlinkProvider(p.id)}>Unlink</Button>
 								{:else if p.webLinkable}
 									<a href="/auth/{p.id}/link" data-sveltekit-reload class="primary-btn small">Link {p.name}</a>
 								{/if}
@@ -744,9 +755,9 @@
 						bind:value={newTokenName}
 						disabled={tokenCreating}
 					/>
-					<button class="primary-btn" onclick={createToken} disabled={tokenCreating || !newTokenName.trim()}>
+					<Button variant="primary" onclick={createToken} disabled={tokenCreating || !newTokenName.trim()}>
 						{tokenCreating ? 'Creating...' : 'Create'}
-					</button>
+					</Button>
 				</div>
 
 				{#if tokenError}
@@ -766,7 +777,7 @@
 										{/if}
 									</span>
 								</div>
-								<button class="delete-btn" onclick={() => deleteToken(token.id)}>Delete</button>
+								<Button variant="danger" size="sm" onclick={() => deleteToken(token.id)}>Delete</Button>
 							</div>
 						{/each}
 					</div>
@@ -788,9 +799,9 @@
 							take a moment for large accounts.
 						</p>
 					</div>
-					<button class="danger-btn" onclick={exportData} disabled={exportSaving}>
+					<Button variant="danger" onclick={exportData} disabled={exportSaving}>
 						{exportSaving ? 'Exporting...' : 'Export my data'}
-					</button>
+					</Button>
 				</div>
 				{#if exportMsg}
 					<p class="success" role="status" aria-live="polite">{exportMsg}</p>
@@ -810,7 +821,7 @@
 						</p>
 					</div>
 					{#if !showDeleteConfirm}
-						<button class="danger-btn" onclick={revealDeleteConfirm}>Delete my account</button>
+						<Button variant="danger" onclick={revealDeleteConfirm}>Delete my account</Button>
 					{/if}
 				</div>
 
@@ -889,10 +900,10 @@
 						{/if}
 
 						<div class="btn-row">
-							<button class="danger-btn" onclick={deleteAccount} disabled={deleteSaving}>
+							<Button variant="danger" onclick={deleteAccount} disabled={deleteSaving}>
 								{deleteSaving ? 'Deleting...' : 'Permanently delete my account'}
-							</button>
-							<button class="secondary-btn" onclick={cancelDelete} disabled={deleteSaving}>Cancel</button>
+							</Button>
+							<Button variant="secondary" onclick={cancelDelete} disabled={deleteSaving}>Cancel</Button>
 						</div>
 					</div>
 				{/if}
@@ -1120,23 +1131,6 @@
 		color: var(--text-muted);
 	}
 
-	.delete-btn {
-		padding: var(--space-1) var(--space-3);
-		background: transparent;
-		border: 1px solid var(--border);
-		border-radius: var(--radius-sm);
-		color: var(--text-muted);
-		font-size: 0.75rem;
-		cursor: pointer;
-		flex-shrink: 0;
-		transition: color 0.15s, border-color 0.15s;
-	}
-
-	.delete-btn:hover {
-		color: var(--accent-red);
-		border-color: var(--accent-red);
-	}
-
 	.empty-text {
 		color: var(--text-muted);
 		font-size: 0.85rem;
@@ -1291,29 +1285,6 @@
 		background: var(--bg-hover);
 	}
 
-	.danger-btn {
-		align-self: flex-start;
-		padding: var(--space-2) var(--space-4);
-		background: transparent;
-		border: 1px solid var(--accent-red);
-		border-radius: var(--radius);
-		color: var(--accent-red);
-		font-size: 0.85rem;
-		font-weight: 500;
-		font-family: var(--font-ui);
-		cursor: pointer;
-		transition: background 0.15s;
-	}
-
-	.danger-btn:hover:not(:disabled) {
-		background: color-mix(in srgb, var(--accent-red) 10%, transparent);
-	}
-
-	.danger-btn:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
 	.disable-confirm {
 		display: flex;
 		flex-direction: column;