From 7ab7911c2fbb1752270e7550e108b9f06e07d806 Mon Sep 17 00:00:00 2001
From: Rob Hough <robhough180@gmail.com>
Date: Fri, 13 Feb 2026 10:48:03 +0000
Subject: [PATCH] refactor(editor): Migrate Button v2 to N8nButton
 (no-changelog) (#24947)

---
 .../scripts/migrate-button-v2.mjs             | 418 ++++++++++++
 .../AskAssistantChat/AskAssistantChat.vue     |   4 +-
 .../AskAssistantChat.test.ts.snap             |  26 +-
 .../messages/ErrorMessage.vue                 |   4 +-
 .../messages/MessageRating.vue                |  14 +-
 .../messages/RestoreVersionConfirm.vue        |   2 +-
 .../AskAssistantChat/messages/TextMessage.vue |   5 +-
 .../__snapshots__/MessageRating.test.ts.snap  |   4 +-
 .../CanvasThinkingPill/CanvasThinkingPill.vue |   4 +-
 .../src/components/CodeDiff/CodeDiff.vue      |   8 +-
 .../__snapshots__/CodeDiff.test.ts.snap       |  39 +-
 .../DateRangePicker/DateRangePicker.test.ts   |   6 +-
 .../DateRangePicker/DateRangePicker.vue       |  22 +-
 .../components/N8nActionBox/ActionBox.test.ts |   4 +-
 .../src/components/N8nActionBox/ActionBox.vue |   6 +-
 .../N8nActionDropdown/ActionDropdown.vue      |   3 +-
 .../N8nAlertDialog/AlertDialog.test.ts        |   8 +-
 .../components/N8nAlertDialog/AlertDialog.vue |   4 +-
 .../components/N8nButton/Button.legacy.scss   |  48 ++
 .../src/components/N8nButton/Button.scss      | 285 --------
 .../components/N8nButton/Button.stories.ts    | 364 ++++++----
 .../src/components/N8nButton/Button.test.ts   | 440 +++++++++++-
 .../src/components/N8nButton/Button.vue       | 642 ++++++++++--------
 .../__snapshots__/Button.test.ts.snap         |  27 +-
 .../__snapshots__/Datatable.test.ts.snap      |  20 +-
 .../N8nHeaderAction/HeaderAction.vue          |   5 +-
 .../components/N8nIconButton/IconButton.vue   |   9 +-
 .../components/N8nIconPicker/IconPicker.vue   |   8 +-
 .../__snapshots__/N8nPromptInput.test.ts.snap |  47 +-
 .../N8nSendStopButton.test.ts                 |  55 +-
 .../N8nSendStopButton/N8nSendStopButton.vue   |   8 +-
 .../TableHeaderControlsButton.vue             |   2 +-
 .../TableHeaderControlsButton.test.ts.snap    |  10 +-
 .../@n8n/design-system/src/types/button.ts    |  65 +-
 .../v2/components/Button/Button.stories.ts    | 221 ------
 .../src/v2/components/Button/Button.test.ts   | 424 ------------
 .../src/v2/components/Button/Button.vue       | 365 ----------
 .../v2/components/Button/component-button.md  | 190 ------
 .../editor-ui/src/app/components/Banner.vue   |   3 +-
 .../CredentialResolverEditModal.vue           |   4 +-
 .../components/DuplicateWorkflowDialog.vue    |   2 +-
 .../app/components/FreeAiCreditsCallout.vue   |   2 +-
 .../app/components/ImportWorkflowUrlModal.vue |   4 +-
 .../WorkflowHeaderDraftPublishActions.vue     |   4 +-
 .../MainHeader/WorkflowPublishModal.vue       |   2 +-
 .../src/app/components/MainSidebarHeader.vue  |  11 +-
 .../components/MainSidebarSourceControl.vue   |   6 +-
 .../app/components/MainSidebarUserArea.vue    |   2 +-
 .../app/components/NodeExecuteButton.test.ts  |   2 +-
 .../src/app/components/NodeExecuteButton.vue  |   6 +-
 .../src/app/components/NpsSurvey.vue          |   4 +-
 .../src/app/components/SaveButton.vue         |  10 +-
 .../components/StopManyExecutionsModal.vue    |   2 +-
 .../src/app/components/UpdatesPanel.vue       |   3 +-
 .../components/WorkflowDescriptionModal.vue   |   4 +-
 .../WorkflowExtractionNameModal.vue           |   2 +-
 .../src/app/components/WorkflowSettings.vue   |   3 +-
 .../app/components/WorkflowShareModal.ee.vue  |   2 +-
 .../components/common/SelectedItemsInfo.vue   |   4 +-
 .../forms/ResourceFiltersDropdown.vue         |   2 +-
 .../components/layouts/EmptyStateLayout.vue   |   2 +-
 .../src/app/views/EntityNotFound.vue          |   2 +-
 .../editor-ui/src/app/views/NodeView.vue      |   4 +-
 .../src/app/views/OAuthConsentView.vue        |   4 +-
 .../editor-ui/src/app/views/WorkflowsView.vue |   6 +-
 .../components/EmptyStateBuilderPrompt.vue    |   6 +-
 .../components/FeaturedSandboxCard.vue        |   2 +-
 .../components/QuickStartCard.vue             |   4 +-
 .../components/TemplateCard.vue               |   4 +-
 .../Agent/NotificationPermissionBanner.vue    |   4 +-
 .../components/Agent/PlanQuestionsMessage.vue |   2 +-
 .../Chat/NewAssistantSessionModal.vue         |   2 +-
 .../ai/chatHub/ChatPersonalAgentsView.vue     |   2 +-
 .../src/features/ai/chatHub/ChatView.vue      |   2 +-
 .../chatHub/components/AgentEditorModal.vue   |   6 +-
 .../ai/chatHub/components/ChatAgentCard.vue   |   5 +-
 .../components/ChatConversationHeader.vue     |   7 +-
 .../ai/chatHub/components/ChatMessage.vue     |   8 +-
 .../chatHub/components/ChatMessageActions.vue |  23 +-
 .../ai/chatHub/components/ChatPrompt.vue      |   9 +-
 .../chatHub/components/ChatProvidersTable.vue |   4 +-
 .../ai/chatHub/components/ChatSidebarLink.vue |   3 +-
 .../ai/chatHub/components/ChatStarter.vue     |   4 +-
 .../ai/chatHub/components/CopyButton.vue      |   3 +-
 .../components/CredentialSelectorModal.vue    |   4 +-
 .../components/ModelByIdSelectorModal.vue     |   4 +-
 .../ai/chatHub/components/ModelSelector.vue   |   2 +-
 .../components/ProviderSettingsModal.vue      |   8 +-
 .../ai/chatHub/components/ToolsSelector.vue   |   2 +-
 .../chatHub/components/ToolsSelectorModal.vue |   6 +-
 .../components/SetupWizard/SetupWizard.vue    |  12 +-
 .../evaluation.ee/views/EvaluationsView.vue   |   4 +-
 .../evaluation.ee/views/TestRunDetailView.vue |   2 +-
 .../features/ai/mcpAccess/SettingsMCPView.vue |   6 +-
 .../ai/mcpAccess/components/MCPEmptyState.vue |   2 +-
 .../connectPopover/ConnectionParameter.vue    |   4 +-
 .../MCPAccessTokenPopoverTab.vue              |   8 +-
 .../connectPopover/McpConnectPopover.vue      |   2 +-
 .../components/tabs/OAuthClientsTable.vue     |   2 +-
 .../components/tabs/WorkflowsTable.vue        |   2 +-
 .../modals/MCPConnectWorkflowsModal.vue       |   4 +-
 .../components/ProjectCreateResource.vue      |   6 +-
 .../components/ProjectDeleteDialog.vue        |   4 +-
 .../projects/components/ProjectHeader.vue     |   1 +
 .../components/ProjectMoveResourceModal.vue   |   4 +-
 .../components/ProjectRoleUpgradeDialog.vue   |   4 +-
 .../projects/components/ProjectSharing.vue    |   4 +-
 .../projects/views/ProjectSettings.vue        |   6 +-
 .../projects/views/ProjectVariables.vue       |   4 +-
 .../core/auth/components/MfaSetupModal.vue    |   2 +-
 .../src/features/core/auth/views/MfaView.vue  |   2 +-
 .../core/auth/views/SettingsPersonalView.vue  |   4 +-
 .../components/AddDataTableModal.vue          |   4 +-
 .../components/dataGrid/AddColumnButton.vue   |   7 +-
 .../components/dataGrid/AddRowButton.vue      |   3 +-
 .../components/dataGrid/ColumnHeader.vue      |   3 +-
 .../folders/components/MoveToFolderModal.vue  |   2 +-
 .../CredentialEdit/CredentialEdit.vue         |   2 +-
 .../CredentialPicker/CredentialPicker.vue     |  10 +-
 .../components/ExecutionsFilter.vue           |   6 +-
 .../global/GlobalExecutionsListItem.vue       |   4 +-
 .../components/workflow/VoteButtons.vue       |   6 +-
 .../WorkflowExecutionAnnotationPanel.ee.vue   |   2 +-
 .../WorkflowExecutionAnnotationTags.ee.vue    |  10 +-
 .../WorkflowExecutionsLandingPage.vue         |   2 +-
 .../workflow/WorkflowExecutionsPreview.vue    |  10 +-
 .../components/InsightsDashboard.test.ts      |  26 +-
 .../components/InsightsDataRangePicker.vue    |   4 +-
 .../insights/components/InsightsPaywall.vue   |   2 +-
 .../components/InsightsUpgradeModal.vue       |   4 +-
 .../logs/components/ChatMessagesPanel.vue     |  17 +-
 .../logs/components/LogDetailsPanel.vue       |   8 +-
 .../logs/components/LogsOverviewPanel.vue     |   4 +-
 .../logs/components/LogsOverviewRow.vue       |  12 +-
 .../logs/components/LogsPanelActions.vue      |   6 +-
 .../ExternalSecretsProviderCard.ee.vue        |   2 +-
 .../ExternalSecretsProviderModal.ee.vue       |   7 +-
 .../EventDestinationSettingsModal.vue         |   4 +-
 .../SecretsProvidersEmptyState.ee.vue         |   7 +-
 .../components/SourceControlPullModal.vue     |   6 +-
 .../components/SourceControlPushModal.vue     |   6 +-
 .../views/SettingsSourceControl.vue           |   8 +-
 .../ndv/panel/components/NDVHeader.vue        |   3 +-
 .../panel/components/NDVSubConnections.vue    |   2 +-
 .../__snapshots__/InputPanel.test.ts.snap     |  50 +-
 .../NDVSubConnections.test.ts.snap            |   2 +-
 .../AssignmentCollection/Assignment.vue       |   6 +-
 .../ButtonParameter/ButtonParameter.vue       |   2 +-
 .../Collection/CollectionParameterLegacy.vue  |   8 +-
 .../Collection/CollectionParameterNew.vue     |  14 +-
 .../components/ExpressionParameterInput.vue   |   7 +-
 .../components/FilterConditions/Condition.vue |   6 +-
 .../FilterConditions/FilterConditions.vue     |   3 +-
 .../FixedCollection/FixedCollectionItem.vue   |   7 +-
 .../FixedCollectionParameterLegacy.vue        |  13 +-
 .../FixedCollectionParameterNew.vue           |  16 +-
 .../components/ImportCurlParameter.vue        |   4 +-
 .../components/MultipleParameter.vue          |   4 +-
 .../components/ParameterInputList.vue         |   6 +-
 .../FromAiOverrideButton.vue                  |   2 +-
 .../FromAiOverrideField.vue                   |   2 +-
 .../components/ParameterOptions.vue           |   6 +-
 .../ResourceMapper/MappingFields.vue          |   6 +-
 .../ResourceMapper/ResourceMapper.vue         |   4 +-
 .../MultipleParameter.test.ts.snap            |   9 +-
 .../ndv/runData/components/RunData.vue        |  16 +-
 .../ndv/runData/components/RunDataBinary.vue  |   2 +-
 .../runData/components/RunDataJsonActions.vue |   4 +-
 .../components/RunDataParsedAiContent.vue     |   2 +-
 .../runData/components/RunDataPinButton.vue   |   2 +-
 .../ndv/runData/components/RunDataTable.vue   |  15 +-
 .../components/ai/AiRunContentBlock.vue       |   2 +-
 .../components/error/NodeErrorView.vue        |  11 +-
 .../NodeSettingsInvalidNodeWarning.vue        |   4 +-
 .../project-roles/ProjectRoleView.test.ts     |  90 +--
 .../project-roles/ProjectRoleView.vue         |  17 +-
 .../project-roles/ProjectRolesView.vue        |   2 +-
 .../src/features/resolvers/ResolversView.vue  |  11 +-
 .../components/CommunityPackageCard.vue       |   2 +-
 .../CommunityPackageManageConfirmModal.vue    |   2 +-
 .../nodeCreator/CommunityNodeUpdateInfo.vue   |   2 +-
 .../components/VariableModal.vue              |   2 +-
 .../components/VariablesForm.vue              |   4 +-
 .../migrationReport/MigrationRuleDetail.vue   |   3 +-
 .../migrationReport/MigrationRules.vue        |   2 +-
 .../settings/sso/components/SSOLogin.vue      |   3 +-
 .../sso/components/SamlSettingsForm.vue       |   2 +-
 .../components/ConfirmProvisioningDialog.vue  |  16 +-
 .../settings/sso/views/SettingsLdapView.vue   |   2 +-
 .../CommunityPlusEnrollmentModal.vue          |  13 +-
 .../usage/components/EulaAcceptanceModal.vue  |   4 +-
 .../usage/views/SettingsUsageAndPlan.vue      |   6 +-
 .../users/components/InviteUsersModal.vue     |   4 +-
 .../components/NodeSetupCard.test.ts          |   2 +-
 .../banners/EmailConfirmationBanner.vue       |   3 +-
 .../components/banners/TrialBanner.vue        |   6 +-
 .../components/banners/TrialOverBanner.vue    |  11 +-
 .../OutputItemSelect.vue                      |  10 +-
 .../ItemTypes/CommunityNodeItem.vue           |   2 +-
 .../nodeCreator/components/NodeCreator.vue    |   2 +-
 .../shared/nodeCreator/views/NodeCreation.vue |  12 +-
 .../TagsManager/TagsView/TagsTable.vue        |   6 +-
 .../elements/buttons/CanvasChatButton.vue     |   4 +-
 .../elements/buttons/CanvasControlButtons.vue |  20 +-
 .../buttons/CanvasRunWorkflowButton.vue       |   4 +-
 .../CanvasStopCurrentExecutionButton.vue      |   2 +-
 .../CanvasStopWaitingForWebhookButton.vue     |   2 +-
 .../CanvasChatButton.test.ts.snap             |   2 +-
 ...anvasClearExecutionDataButton.test.ts.snap |   2 +-
 .../CanvasControlButtons.test.ts.snap         |   8 +-
 .../CanvasRunWorkflowButton.test.ts.snap      |   2 +-
 ...vasStopCurrentExecutionButton.test.ts.snap |   2 +-
 ...asStopWaitingForWebhookButton.test.ts.snap |   2 +-
 .../elements/edges/CanvasEdgeToolbar.vue      |   4 +-
 .../elements/nodes/CanvasNodeToolbar.vue      |  15 +-
 .../render-types/parts/CanvasNodeTrigger.vue  |   6 +-
 .../ExperimentalEmbeddedNdvActions.vue        |  10 +-
 .../ExperimentalFocusPanelHeader.vue          |  12 +-
 .../ExperimentalNodeDetailsDrawer.vue         |   2 +-
 .../components/ReadyToRunButton.vue           |   2 +-
 .../SetupWorkflowCredentialsButton.vue        |   2 +-
 .../templates/components/TemplateCard.vue     |   2 +-
 .../templates/views/TemplatesSearchView.vue   |   3 +-
 .../workflowDiff/WorkflowDiffAside.vue        |   3 +-
 .../workflowDiff/WorkflowDiffModal.vue        |   8 +-
 .../workflowDiff/WorkflowDiffView.vue         |   6 +-
 .../components/WorkflowHistoryButton.vue      |   3 +-
 .../components/WorkflowHistoryContent.vue     |   2 +-
 .../WorkflowHistoryVersionRestoreModal.vue    |   6 +-
 .../WorkflowHistoryVersionUnpublishModal.vue  |   4 +-
 .../components/WorkflowVersionFormModal.vue   |   2 +-
 .../workflowHistory/views/WorkflowHistory.vue |   2 +-
 232 files changed, 2202 insertions(+), 2750 deletions(-)
 create mode 100755 packages/frontend/@n8n/design-system/scripts/migrate-button-v2.mjs
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nButton/Button.legacy.scss
 delete mode 100644 packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss
 delete mode 100644 packages/frontend/@n8n/design-system/src/v2/components/Button/Button.stories.ts
 delete mode 100644 packages/frontend/@n8n/design-system/src/v2/components/Button/Button.test.ts
 delete mode 100644 packages/frontend/@n8n/design-system/src/v2/components/Button/Button.vue
 delete mode 100644 packages/frontend/@n8n/design-system/src/v2/components/Button/component-button.md

diff --git a/packages/frontend/@n8n/design-system/scripts/migrate-button-v2.mjs b/packages/frontend/@n8n/design-system/scripts/migrate-button-v2.mjs
new file mode 100755
index 00000000000..05a0533d701
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/scripts/migrate-button-v2.mjs
@@ -0,0 +1,418 @@
+#!/usr/bin/env node
+
+/**
+ * Button V2 Migration Codemod
+ *
+ * This script migrates N8nButton components from the legacy V1 API to the V2 API.
+ *
+ * Transformations:
+ * - type="primary" → variant="solid"
+ * - type="secondary" → variant="subtle"
+ * - type="tertiary" → variant="subtle"
+ * - type="danger" → variant="destructive"
+ * - type="success" → variant="solid" class="n8n-button--success"
+ * - type="warning" → variant="solid" class="n8n-button--warning"
+ * - type="highlight" → variant="ghost" class="n8n-button--highlight"
+ * - type="highlightFill" → variant="subtle" class="n8n-button--highlightFill"
+ * - outline prop → variant="outline"
+ * - text prop → variant="ghost"
+ * - size="xmini"|"mini" → size="xsmall"
+ * - square → iconOnly
+ * - nativeType → type attribute
+ * - block → style="width: 100%"
+ * - element="a" → (removed, href determines element)
+ * Usage:
+ *   node migrate-button-v2.mjs [--dry-run]
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, relative } from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Configuration
+const FRONTEND_ROOT = join(__dirname, '../../..');
+const DRY_RUN = process.argv.includes('--dry-run');
+
+// Mapping from legacy type to new variant
+const TYPE_TO_VARIANT = {
+	primary: 'solid',
+	secondary: 'subtle',
+	tertiary: 'subtle',
+	danger: 'destructive',
+};
+
+// Legacy types that need override classes
+const LEGACY_TYPES_WITH_CLASSES = {
+	success: { variant: 'solid', className: 'n8n-button--success' },
+	warning: { variant: 'solid', className: 'n8n-button--warning' },
+	highlight: { variant: 'ghost', className: 'n8n-button--highlight' },
+	highlightFill: { variant: 'subtle', className: 'n8n-button--highlightFill' },
+};
+
+// Size normalization
+const SIZE_MAP = {
+	xmini: 'xsmall',
+	mini: 'xsmall',
+};
+
+// Stats
+const stats = {
+	filesScanned: 0,
+	filesModified: 0,
+	transformations: {
+		typeToVariant: 0,
+		legacyTypeWithClass: 0,
+		outlineToVariant: 0,
+		textToVariant: 0,
+		sizeNormalized: 0,
+		squareToIconOnly: 0,
+		nativeTypeToType: 0,
+		blockToStyle: 0,
+		elementRemoved: 0,
+	},
+};
+
+/**
+ * Find all .vue files recursively
+ */
+function findVueFiles(dir, files = []) {
+	const entries = readdirSync(dir);
+
+	for (const entry of entries) {
+		const fullPath = join(dir, entry);
+
+		// Skip node_modules and hidden directories
+		if (entry === 'node_modules' || entry.startsWith('.')) continue;
+
+		const stat = statSync(fullPath);
+		if (stat.isDirectory()) {
+			findVueFiles(fullPath, files);
+		} else if (entry.endsWith('.vue')) {
+			files.push(fullPath);
+		}
+	}
+
+	return files;
+}
+
+/**
+ * Transform a single N8nButton tag
+ */
+function transformButtonTag(fullMatch, tagContent, selfClosing, content, closingTag) {
+	let modified = false;
+	const changes = [];
+
+	// Track what we need to add
+	let newVariant = null;
+	let addClass = null;
+	let addStyle = null;
+
+	// Parse current attributes (handles both static and v-bind shorthand :prop)
+	const hasType = /\btype=["']([^"']+)["']/.exec(tagContent);
+	const hasVariant = /\bvariant=["']/.test(tagContent);
+	const hasOutline = /\b:?outline(?:=["']true["'])?(?=\s|\/?>|\s)/.test(tagContent);
+	const hasText = /\b:?text(?:=["']true["'])?(?=\s|\/?>|\s)/.test(tagContent);
+	const hasSize = /\b:?size=["']([^"']+)["']/.exec(tagContent);
+	const hasSquare = /\b:?square(?:=["']true["'])?(?=\s|\/?>|\s)/.test(tagContent);
+	const hasNativeType = /\b:?nativeType=["']([^"']+)["']/.exec(tagContent);
+	const hasBlock = /\b:?block(?:=["']true["'])?(?=\s|\/?>|\s)/.test(tagContent);
+	const hasElement = /\b:?element=["']([^"']+)["']/.exec(tagContent);
+	const hasClass = /\bclass=["']([^"']+)["']/.exec(tagContent);
+	const hasStyle = /\bstyle=["']([^"']+)["']/.exec(tagContent);
+
+	// Skip if already using variant (already migrated)
+	if (hasVariant) {
+		return fullMatch;
+	}
+
+	// 1. Handle outline prop → variant="outline"
+	if (hasOutline && !hasText) {
+		newVariant = 'outline';
+		tagContent = tagContent.replace(/\s*\b:?outline(?:=["']true["'])?(?=\s|\/?>)/, '');
+		// Also remove type if present since outline takes precedence
+		if (hasType) {
+			tagContent = tagContent.replace(/\s*\btype=["'][^"']+["']/, '');
+		}
+		changes.push('outline → variant="outline"');
+		stats.transformations.outlineToVariant++;
+		modified = true;
+	}
+	// 2. Handle text prop → variant="ghost"
+	else if (hasText) {
+		newVariant = 'ghost';
+		tagContent = tagContent.replace(/\s*\b:?text(?:=["']true["'])?(?=\s|\/?>)/, '');
+		// Also remove type and outline if present
+		if (hasType) {
+			tagContent = tagContent.replace(/\s*\btype=["'][^"']+["']/, '');
+		}
+		if (hasOutline) {
+			tagContent = tagContent.replace(/\s*\b:?outline(?:=["']true["'])?(?=\s|\/?>)/, '');
+		}
+		changes.push('text → variant="ghost"');
+		stats.transformations.textToVariant++;
+		modified = true;
+	}
+	// 3. Handle type prop
+	else if (hasType) {
+		const typeValue = hasType[1];
+
+		if (TYPE_TO_VARIANT[typeValue]) {
+			// Direct mapping
+			newVariant = TYPE_TO_VARIANT[typeValue];
+			tagContent = tagContent.replace(/\s*\btype=["'][^"']+["']/, '');
+			changes.push(`type="${typeValue}" → variant="${newVariant}"`);
+			stats.transformations.typeToVariant++;
+			modified = true;
+		} else if (LEGACY_TYPES_WITH_CLASSES[typeValue]) {
+			// Legacy type with class override
+			const mapping = LEGACY_TYPES_WITH_CLASSES[typeValue];
+			newVariant = mapping.variant;
+			addClass = mapping.className;
+			tagContent = tagContent.replace(/\s*\btype=["'][^"']+["']/, '');
+			changes.push(`type="${typeValue}" → variant="${newVariant}" + class="${addClass}"`);
+			stats.transformations.legacyTypeWithClass++;
+			modified = true;
+		}
+	}
+
+	// 4. Handle size normalization
+	if (hasSize && SIZE_MAP[hasSize[1]]) {
+		const oldSize = hasSize[1];
+		const newSize = SIZE_MAP[oldSize];
+		tagContent = tagContent.replace(/\b:?size=["'][^"']+["']/, `size="${newSize}"`);
+		changes.push(`size="${oldSize}" → size="${newSize}"`);
+		stats.transformations.sizeNormalized++;
+		modified = true;
+	}
+
+	// 5. Handle square → iconOnly
+	if (hasSquare) {
+		tagContent = tagContent.replace(/\s*\b:?square(?:=["']true["'])?(?=\s|\/?>)/, '');
+		// Add iconOnly attribute
+		tagContent = tagContent.replace(
+			/(N8nButton|n8n-button|N8nIconButton|n8n-icon-button|IconButton)/,
+			'$1 iconOnly',
+		);
+		changes.push('square → iconOnly');
+		stats.transformations.squareToIconOnly++;
+		modified = true;
+	}
+
+	// 6. Handle nativeType → type
+	if (hasNativeType) {
+		const nativeTypeValue = hasNativeType[1];
+		tagContent = tagContent.replace(/\s*\b:?nativeType=["'][^"']+["']/, '');
+		tagContent = tagContent.replace(
+			/(N8nButton|n8n-button|N8nIconButton|n8n-icon-button|IconButton)/,
+			`$1 type="${nativeTypeValue}"`,
+		);
+		changes.push(`nativeType="${nativeTypeValue}" → type="${nativeTypeValue}"`);
+		stats.transformations.nativeTypeToType++;
+		modified = true;
+	}
+
+	// 7. Handle block → style="width: 100%"
+	if (hasBlock) {
+		tagContent = tagContent.replace(/\s*\b:?block(?:=["']true["'])?(?=\s|\/?>)/, '');
+		addStyle = 'width: 100%';
+		changes.push('block → style="width: 100%"');
+		stats.transformations.blockToStyle++;
+		modified = true;
+	}
+
+	// 8. Handle element="a" → remove (href determines element)
+	if (hasElement) {
+		tagContent = tagContent.replace(/\s*\b:?element=["'][^"']+["']/, '');
+		changes.push('element removed (href determines element)');
+		stats.transformations.elementRemoved++;
+		modified = true;
+	}
+
+	if (!modified) {
+		return fullMatch;
+	}
+
+	// Now apply the collected changes
+	const BUTTON_TAG_PATTERN = /(N8nButton|n8n-button|N8nIconButton|n8n-icon-button|IconButton)/;
+
+	// Add variant attribute
+	if (newVariant) {
+		tagContent = tagContent.replace(BUTTON_TAG_PATTERN, `$1 variant="${newVariant}"`);
+	}
+
+	// Merge class attribute
+	if (addClass) {
+		if (hasClass) {
+			// Merge with existing class
+			tagContent = tagContent.replace(/\bclass=["']([^"']+)["']/, `class="$1 ${addClass}"`);
+		} else {
+			// Add new class attribute
+			tagContent = tagContent.replace(BUTTON_TAG_PATTERN, `$1 class="${addClass}"`);
+		}
+	}
+
+	// Merge style attribute
+	if (addStyle) {
+		if (hasStyle) {
+			// Merge with existing style
+			const existingStyle = hasStyle[1].trim();
+			const separator = existingStyle.endsWith(';') ? ' ' : '; ';
+			tagContent = tagContent.replace(
+				/\bstyle=["']([^"']+)["']/,
+				`style="$1${separator}${addStyle}"`,
+			);
+		} else {
+			// Add new style attribute
+			tagContent = tagContent.replace(BUTTON_TAG_PATTERN, `$1 style="${addStyle}"`);
+		}
+	}
+
+	// Build the new tag
+	let result;
+	if (selfClosing) {
+		result = `<${tagContent.trim()} />`;
+	} else {
+		result = `<${tagContent.trim()}>${content || ''}${closingTag}`;
+	}
+
+	// Log the transformation
+	console.log(`  ${changes.join(', ')}`);
+
+	return result;
+}
+
+/**
+ * Transform all N8nButton usages in a file
+ */
+function transformFile(filePath) {
+	const content = readFileSync(filePath, 'utf-8');
+	stats.filesScanned++;
+
+	// Find template section - use greedy match ([\s\S]*) to get the outermost </template>
+	// Vue SFC files may have nested <template> tags for slots, so we need the last closing tag
+	const templateMatch = /<template[^>]*>([\s\S]*)<\/template>/i.exec(content);
+	if (!templateMatch) {
+		return { modified: false };
+	}
+
+	const templateStart = templateMatch.index;
+	const templateContent = templateMatch[1];
+
+	// Match button components (both self-closing and with content)
+	// Includes: N8nButton, n8n-button, N8nIconButton, n8n-icon-button, IconButton
+	const BUTTON_TAGS = 'N8nButton|n8n-button|N8nIconButton|n8n-icon-button|IconButton';
+
+	let newTemplateContent = templateContent;
+	let hasChanges = false;
+
+	// Process self-closing buttons first
+	// Pattern matches: <TAG + attributes (no unquoted >) + />
+	// This avoids matching non-self-closing tags like <N8nButton ...>content</N8nButton>
+	newTemplateContent = newTemplateContent.replace(
+		new RegExp(`<(${BUTTON_TAGS})((?:[^>"]|"[^"]*")*)\\s*\\/>`, 'gi'),
+		(match, tagName, attrs) => {
+			// Skip if no attributes
+			if (!attrs || !attrs.trim()) return match;
+			const result = transformButtonTag(match, `${tagName} ${attrs.trim()}`, true, null, null);
+			if (result !== match) hasChanges = true;
+			return result;
+		},
+	);
+
+	// Process buttons with content (non-self-closing)
+	// Pattern matches: <TAG + attrs (not ending with /) + > + content + </TAG>
+	// The attrs pattern uses negative lookahead to ensure / is not followed by >
+	newTemplateContent = newTemplateContent.replace(
+		new RegExp(
+			`<(${BUTTON_TAGS})((?:[^>"/]|"[^"]*"|/(?!>))*)>([\\s\\S]*?)<\\/(${BUTTON_TAGS})>`,
+			'gi',
+		),
+		(match, tagName, attrs, content, closeTag) => {
+			const result = transformButtonTag(
+				match,
+				`${tagName}${attrs || ''}`,
+				false,
+				content,
+				`</${closeTag}>`,
+			);
+			if (result !== match) hasChanges = true;
+			return result;
+		},
+	);
+
+	if (!hasChanges) {
+		return { modified: false };
+	}
+
+	// Reconstruct the file
+	const newContent =
+		content.slice(0, templateStart) +
+		'<template>' +
+		newTemplateContent +
+		'</template>' +
+		content.slice(templateStart + templateMatch[0].length);
+
+	return { modified: true, content: newContent };
+}
+
+/**
+ * Main function
+ */
+async function main() {
+	console.log('Button V2 Migration Codemod');
+	console.log('===========================');
+	console.log(`Mode: ${DRY_RUN ? 'DRY RUN (no files will be modified)' : 'LIVE'}`);
+	console.log(`Scanning: ${FRONTEND_ROOT}`);
+	console.log('');
+
+	const vueFiles = findVueFiles(FRONTEND_ROOT);
+	console.log(`Found ${vueFiles.length} Vue files\n`);
+
+	for (const filePath of vueFiles) {
+		const relativePath = relative(FRONTEND_ROOT, filePath);
+
+		try {
+			const result = transformFile(filePath);
+
+			if (result.modified) {
+				console.log(`\nModified: ${relativePath}`);
+				stats.filesModified++;
+
+				if (!DRY_RUN) {
+					writeFileSync(filePath, result.content, 'utf-8');
+				}
+			}
+		} catch (error) {
+			console.error(`Error processing ${relativePath}:`, error.message);
+		}
+	}
+
+	// Print summary
+	console.log('\n===========================');
+	console.log('Summary');
+	console.log('===========================');
+	console.log(`Files scanned: ${stats.filesScanned}`);
+	console.log(`Files modified: ${stats.filesModified}`);
+	console.log('');
+	console.log('Transformations:');
+	console.log(`  type → variant: ${stats.transformations.typeToVariant}`);
+	console.log(`  legacy type + class: ${stats.transformations.legacyTypeWithClass}`);
+	console.log(`  outline → variant: ${stats.transformations.outlineToVariant}`);
+	console.log(`  text → variant: ${stats.transformations.textToVariant}`);
+	console.log(`  size normalized: ${stats.transformations.sizeNormalized}`);
+	console.log(`  square → iconOnly: ${stats.transformations.squareToIconOnly}`);
+	console.log(`  nativeType → type: ${stats.transformations.nativeTypeToType}`);
+	console.log(`  block → style: ${stats.transformations.blockToStyle}`);
+	console.log(`  element removed: ${stats.transformations.elementRemoved}`);
+
+	if (DRY_RUN) {
+		console.log('\nDry run complete. No files were modified.');
+		console.log('Run without --dry-run to apply changes.');
+	}
+}
+
+main().catch(console.error);
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
index 28ef1152f04..32532218b52 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
@@ -545,8 +545,8 @@ defineExpose({
 									>
 										<N8nButton
 											v-if="opt.text"
-											type="secondary"
-											size="mini"
+											variant="subtle"
+											size="xsmall"
 											@click="() => onQuickReply(opt)"
 										>
 											{{ opt.text }}
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
index 3004ff7ba73..19b9e351ec4 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
@@ -284,34 +284,24 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
                         data-test-id="quick-replies"
                       >
                         <n8n-button-stub
-                          active="false"
-                          block="false"
+                          class=""
                           disabled="false"
-                          element="button"
-                          label=""
+                          icononly="false"
                           loading="false"
-                          outline="false"
-                          size="mini"
-                          square="false"
-                          text="false"
-                          type="secondary"
+                          size="xsmall"
+                          variant="subtle"
                         />
                       </div>
                       <div
                         data-test-id="quick-replies"
                       >
                         <n8n-button-stub
-                          active="false"
-                          block="false"
+                          class=""
                           disabled="false"
-                          element="button"
-                          label=""
+                          icononly="false"
                           loading="false"
-                          outline="false"
-                          size="mini"
-                          square="false"
-                          text="false"
-                          type="secondary"
+                          size="xsmall"
+                          variant="subtle"
                         />
                       </div>
                       
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ErrorMessage.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ErrorMessage.vue
index 445dee21ddf..48c8592878d 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ErrorMessage.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ErrorMessage.vue
@@ -26,9 +26,9 @@ const { t } = useI18n();
 				{{ message.content }}
 			</p>
 			<N8nButton
+				variant="subtle"
 				v-if="message.retry"
-				type="secondary"
-				size="mini"
+				size="xsmall"
 				:class="$style.retryButton"
 				data-test-id="error-retry-button"
 				@click="() => message.retry?.()"
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/MessageRating.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/MessageRating.vue
index 244f7f09fd7..0ee3210877d 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/MessageRating.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/MessageRating.vue
@@ -67,7 +67,7 @@ function onCancelFeedback() {
 		<div v-if="showRatingButtons" :class="$style.buttons">
 			<template v-if="!minimal">
 				<N8nButton
-					type="secondary"
+					variant="subtle"
 					size="small"
 					:label="t('assistantChat.builder.thumbsUp')"
 					data-test-id="message-thumbs-up-button"
@@ -75,7 +75,7 @@ function onCancelFeedback() {
 					@click="onRateButton('up')"
 				/>
 				<N8nButton
-					type="secondary"
+					variant="subtle"
 					size="small"
 					data-test-id="message-thumbs-down-button"
 					:label="t('assistantChat.builder.thumbsDown')"
@@ -85,9 +85,8 @@ function onCancelFeedback() {
 			</template>
 			<template v-else>
 				<N8nIconButton
-					type="tertiary"
+					variant="ghost"
 					size="small"
-					text
 					icon="thumbs-up"
 					icon-size="large"
 					:class="$style.ratingButton"
@@ -95,9 +94,8 @@ function onCancelFeedback() {
 					@click="onRateButton('up')"
 				/>
 				<N8nIconButton
-					type="tertiary"
+					variant="ghost"
 					size="small"
-					text
 					icon="thumbs-down"
 					icon-size="large"
 					:class="$style.ratingButton"
@@ -120,13 +118,13 @@ function onCancelFeedback() {
 			/>
 			<div :class="$style.feedbackActions">
 				<N8nButton
-					type="secondary"
+					variant="subtle"
 					size="small"
 					:label="t('generic.cancel')"
 					@click="onCancelFeedback"
 				/>
 				<N8nButton
-					type="primary"
+					variant="solid"
 					size="small"
 					data-test-id="message-submit-feedback-button"
 					:label="t('assistantChat.builder.feedbackSubmit')"
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/RestoreVersionConfirm.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/RestoreVersionConfirm.vue
index 616d35db75b..2bfa7996e9c 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/RestoreVersionConfirm.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/RestoreVersionConfirm.vue
@@ -79,7 +79,7 @@ function handleConfirm() {
 				{{ t('aiAssistant.versionCard.restoreModal.showVersion') }}
 				<N8nIcon icon="arrow-up-right" size="xlarge" />
 			</button>
-			<N8nButton type="primary" size="large" @click="handleConfirm">
+			<N8nButton variant="solid" size="large" @click="handleConfirm">
 				{{ t('aiAssistant.versionCard.restoreModal.restore') }}
 			</N8nButton>
 		</div>
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue
index d590cad0b87..be9e256caa5 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue
@@ -145,9 +145,8 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
 			>
 				<header v-if="isClipboardSupported">
 					<N8nButton
-						type="tertiary"
-						:text="true"
-						size="mini"
+						variant="ghost"
+						size="xsmall"
 						data-test-id="assistant-copy-snippet-button"
 						@click="onCopyButtonClick(message.codeSnippet, $event)"
 					>
diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/__snapshots__/MessageRating.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/__snapshots__/MessageRating.test.ts.snap
index a3d52637196..5722abe3624 100644
--- a/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/__snapshots__/MessageRating.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/__snapshots__/MessageRating.test.ts.snap
@@ -3,8 +3,8 @@
 exports[`MessageRating > should render correctly with default props 1`] = `
 "<div class="rating">
   <div class="buttons">
-    <n8n-button-stub icon="thumbs-up" block="false" element="button" label="assistantChat.builder.thumbsUp" square="false" active="false" disabled="false" loading="false" outline="false" size="small" text="false" type="secondary" data-test-id="message-thumbs-up-button"></n8n-button-stub>
-    <n8n-button-stub icon="thumbs-down" block="false" element="button" label="assistantChat.builder.thumbsDown" square="false" active="false" disabled="false" loading="false" outline="false" size="small" text="false" type="secondary" data-test-id="message-thumbs-down-button"></n8n-button-stub>
+    <n8n-button-stub label="assistantChat.builder.thumbsUp" icon="thumbs-up" variant="subtle" size="small" loading="false" icononly="false" disabled="false" class="" data-test-id="message-thumbs-up-button"></n8n-button-stub>
+    <n8n-button-stub label="assistantChat.builder.thumbsDown" icon="thumbs-down" variant="subtle" size="small" loading="false" icononly="false" disabled="false" class="" data-test-id="message-thumbs-down-button"></n8n-button-stub>
   </div>
   <!--v-if-->
   <!--v-if-->
diff --git a/packages/frontend/@n8n/design-system/src/components/CanvasThinkingPill/CanvasThinkingPill.vue b/packages/frontend/@n8n/design-system/src/components/CanvasThinkingPill/CanvasThinkingPill.vue
index b42feb625f9..b562315feba 100644
--- a/packages/frontend/@n8n/design-system/src/components/CanvasThinkingPill/CanvasThinkingPill.vue
+++ b/packages/frontend/@n8n/design-system/src/components/CanvasThinkingPill/CanvasThinkingPill.vue
@@ -34,8 +34,8 @@ const $style = useCssModule();
 			v-if="showStop"
 			:class="$style.stopButton"
 			:label="'Stop'"
-			type="secondary"
-			size="mini"
+			variant="subtle"
+			size="xsmall"
 			@click="emit('stop')"
 		/>
 	</N8nCanvasPill>
diff --git a/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue b/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue
index d25147caec7..242daed0846 100644
--- a/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue
+++ b/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue
@@ -113,8 +113,8 @@ const diffs = computed(() => {
 			</div>
 			<div v-else-if="replaced">
 				<N8nButton
-					type="secondary"
-					size="mini"
+					variant="subtle"
+					size="xsmall"
 					icon="undo-2"
 					data-test-id="undo-replace-button"
 					@click="() => emit('undo')"
@@ -128,8 +128,8 @@ const diffs = computed(() => {
 			</div>
 			<N8nButton
 				v-else
-				:type="replacing ? 'secondary' : 'primary'"
-				size="mini"
+				:variant="replacing ? 'subtle' : 'solid'"
+				size="xsmall"
 				icon="refresh-cw"
 				data-test-id="replace-code-button"
 				:disabled="!content || streaming"
diff --git a/packages/frontend/@n8n/design-system/src/components/CodeDiff/__snapshots__/CodeDiff.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/CodeDiff/__snapshots__/CodeDiff.test.ts.snap
index 725c9764fc8..b57a09c304b 100644
--- a/packages/frontend/@n8n/design-system/src/components/CodeDiff/__snapshots__/CodeDiff.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/CodeDiff/__snapshots__/CodeDiff.test.ts.snap
@@ -271,19 +271,14 @@ exports[`CodeDiff > renders code diff correctly 1`] = `
       class="actions"
     >
       <n8n-button-stub
-        active="false"
-        block="false"
+        class=""
         data-test-id="replace-code-button"
         disabled="false"
-        element="button"
         icon="refresh-cw"
-        label=""
+        icononly="false"
         loading="false"
-        outline="false"
-        size="mini"
-        square="false"
-        text="false"
-        type="primary"
+        size="xsmall"
+        variant="solid"
       />
     </div>
   </div>
@@ -808,19 +803,14 @@ exports[`CodeDiff > renders replaced code diff correctly 1`] = `
     >
       <div>
         <n8n-button-stub
-          active="false"
-          block="false"
+          class=""
           data-test-id="undo-replace-button"
           disabled="false"
-          element="button"
           icon="undo-2"
-          label=""
+          icononly="false"
           loading="false"
-          outline="false"
-          size="mini"
-          square="false"
-          text="false"
-          type="secondary"
+          size="xsmall"
+          variant="subtle"
         />
         <n8n-icon-stub
           class="ml-xs"
@@ -1090,19 +1080,14 @@ exports[`CodeDiff > renders replacing code diff correctly 1`] = `
       class="actions"
     >
       <n8n-button-stub
-        active="false"
-        block="false"
+        class=""
         data-test-id="replace-code-button"
         disabled="false"
-        element="button"
         icon="refresh-cw"
-        label=""
+        icononly="false"
         loading="true"
-        outline="false"
-        size="mini"
-        square="false"
-        text="false"
-        type="secondary"
+        size="xsmall"
+        variant="subtle"
       />
     </div>
   </div>
diff --git a/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.test.ts b/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.test.ts
index 7bba0b74524..f3926501c1e 100644
--- a/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.test.ts
@@ -27,12 +27,10 @@ describe('N8nDateRangePicker', () => {
 	});
 
 	it('should emit update:close when clicking the apply button', async () => {
-		const { container, emitted, getByText } = render(DateRangePicker);
+		const { container, emitted, getByRole } = render(DateRangePicker);
 		await openCalendarPopover(container);
 
-		getByText('Apply', { selector: 'button' }); // ensure the button is in the
-
-		const applyButton = getByText('Apply', { selector: 'button' });
+		const applyButton = getByRole('button', { name: 'Apply' });
 		expect(applyButton).toBeVisible();
 
 		await userEvent.click(applyButton);
diff --git a/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.vue b/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.vue
index 15cda54ea17..a047f948898 100644
--- a/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.vue
+++ b/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.vue
@@ -18,7 +18,7 @@ import {
 	useForwardPropsEmits,
 } from 'reka-ui';
 
-import Button from '../N8nButton/Button.vue';
+import N8nButton from '../N8nButton';
 import IconButton from '../N8nIconButton';
 import N8nDateRangePickerField from './DateRangePickerField.vue';
 import type { N8nDateRangePickerProps, N8nDateRangePickerRootEmits } from './index';
@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(props, emit);
 	<DateRangePickerRoot v-bind="forwarded">
 		<DateRangePickerTrigger as-child>
 			<slot name="trigger">
-				<IconButton icon="calendar" type="secondary" aria-label="Open calendar" />
+				<IconButton variant="subtle" icon="calendar" aria-label="Open calendar" />
 			</slot>
 		</DateRangePickerTrigger>
 
@@ -59,11 +59,11 @@ const forwarded = useForwardPropsEmits(props, emit);
 					<div :class="$style.CalendarWrapper">
 						<DateRangePickerHeader :class="$style.CalendarHeader">
 							<DateRangePickerPrev as-child>
-								<IconButton icon="chevron-left" type="secondary" />
+								<IconButton icon="chevron-left" variant="subtle" />
 							</DateRangePickerPrev>
 							<DateRangePickerHeading :class="$style.CalendarHeading" />
 							<DateRangePickerNext as-child>
-								<IconButton icon="chevron-right" type="secondary" />
+								<IconButton icon="chevron-right" variant="subtle" />
 							</DateRangePickerNext>
 						</DateRangePickerHeader>
 
@@ -110,9 +110,13 @@ const forwarded = useForwardPropsEmits(props, emit);
 						<N8nDateRangePickerField :class="$style.DateField"></N8nDateRangePickerField>
 						<div :class="$style.DateFieldError">Outside of allowed range</div>
 
-						<Button type="secondary" block class="mt-2xs" @click="emit('update:open', false)">
-							Apply
-						</Button>
+						<N8nButton
+							variant="subtle"
+							label="Apply"
+							class="mt-2xs"
+							:class="$style.ApplyButton"
+							@click="emit('update:open', false)"
+						/>
 					</div>
 				</div>
 			</DateRangePickerCalendar>
@@ -138,6 +142,10 @@ const forwarded = useForwardPropsEmits(props, emit);
 	display: none;
 }
 
+.ApplyButton {
+	width: 100%;
+}
+
 .DateFieldSegment:focus {
 	outline: 2px solid rgba(67, 142, 255, 1);
 	border-radius: 0.25rem;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.test.ts
index a154c2b5785..13a68d2e763 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.test.ts
@@ -11,7 +11,7 @@ describe('N8NActionBox', () => {
 				description:
 					'Long description that you should know something is the way it is because of how it is. ',
 				buttonText: 'Do something',
-				buttonType: 'primary',
+				buttonVariant: 'solid',
 			},
 			global: {
 				stubs: ['N8nHeading', 'N8nText', 'N8nButton', 'N8nCallout', 'N8nTooltip'],
@@ -27,7 +27,7 @@ describe('N8NActionBox', () => {
 				heading: 'Add something new',
 				description: 'Click the button to add a new item.',
 				buttonText: 'Add Item',
-				buttonType: 'primary',
+				buttonVariant: 'solid',
 			},
 			global: {
 				stubs: ['N8nHeading', 'N8nText', 'N8nButton', 'N8nCallout', 'N8nIcon', 'N8nTooltip'],
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue b/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue
index 309f2a402e1..f50652f8ccb 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ButtonType } from '../../types/button';
+import type { ButtonVariant } from '../../types/button';
 import N8nButton from '../N8nButton';
 import N8nCallout, { type CalloutTheme } from '../N8nCallout';
 import N8nHeading from '../N8nHeading';
@@ -13,7 +13,7 @@ interface ActionBoxProps {
 	icon?: IconOrEmoji;
 	heading?: string;
 	buttonText?: string;
-	buttonType?: ButtonType;
+	buttonVariant?: ButtonVariant;
 	buttonDisabled?: boolean;
 	buttonIcon?: IconName;
 	description?: string;
@@ -59,7 +59,7 @@ withDefaults(defineProps<ActionBoxProps>(), {
 			</template>
 			<N8nButton
 				:label="buttonText"
-				:type="buttonType"
+				:variant="buttonVariant"
 				:disabled="buttonDisabled"
 				:icon="buttonIcon"
 				size="large"
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 65efcbdd4be..b0c5c5397e1 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -104,9 +104,8 @@ defineExpose({ open, close });
 		>
 			<slot v-if="$slots.activator" name="activator" />
 			<N8nIconButton
+				variant="ghost"
 				v-else
-				type="tertiary"
-				text
 				:class="$style.activator"
 				:size="activatorSize"
 				:icon="activatorIcon"
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.test.ts
index 9715dc62ed7..896d4935977 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.test.ts
@@ -221,7 +221,7 @@ describe('N8nAlertDialog', () => {
 		});
 
 		describe('actionVariant', () => {
-			it('should default to solid variant (primary button)', async () => {
+			it('should default to solid variant', async () => {
 				const user = userEvent.setup();
 				const { getByTestId, getByRole } = renderAlertDialog({
 					title: 'Save?',
@@ -230,10 +230,10 @@ describe('N8nAlertDialog', () => {
 				await user.click(getByTestId('alert-trigger'));
 
 				const actionButton = getByRole('button', { name: 'Confirm' });
-				expect(actionButton.className).toContain('primary');
+				expect(actionButton.className).toContain('solid');
 			});
 
-			it('should apply destructive variant (danger button)', async () => {
+			it('should apply destructive variant', async () => {
 				const user = userEvent.setup();
 				const { getByTestId, getByRole } = renderAlertDialog({
 					title: 'Delete?',
@@ -243,7 +243,7 @@ describe('N8nAlertDialog', () => {
 				await user.click(getByTestId('alert-trigger'));
 
 				const actionButton = getByRole('button', { name: 'Confirm' });
-				expect(actionButton.className).toContain('danger');
+				expect(actionButton.className).toContain('destructive');
 			});
 		});
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.vue b/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.vue
index e91fa531592..a88a3bf6aff 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.vue
@@ -109,9 +109,9 @@ const handleCancel = () => {
 				<slot />
 
 				<N8nDialogFooter>
-					<N8nButton type="secondary" :label="cancelLabel" @click="handleCancel" />
+					<N8nButton variant="subtle" :label="cancelLabel" @click="handleCancel" />
 					<N8nButton
-						:type="actionVariant === 'destructive' ? 'danger' : 'primary'"
+						:variant="actionVariant === 'destructive' ? 'destructive' : 'solid'"
 						:label="actionLabel"
 						:loading="loading"
 						@click="handleAction"
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.legacy.scss b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.legacy.scss
new file mode 100644
index 00000000000..146f13ad5fa
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.legacy.scss
@@ -0,0 +1,48 @@
+/**
+ * Legacy Button Override Classes
+ *
+ * These global classes can be applied via the `class` attribute to override
+ * V2 button styling with legacy color schemes.
+ *
+ * @deprecated Do not use these classes in new code. They exist only for
+ * backwards compatibility during migration from V1 to V2 Button API.
+ * These will be removed in a future major version.
+ *
+ * Usage:
+ *   <N8nButton variant="solid" class="n8n-button--success">Save</N8nButton>
+ *   <N8nButton variant="ghost" class="n8n-button--highlight">Info</N8nButton>
+ */
+
+/** @deprecated Use a semantic variant instead of success color */
+:global(.n8n-button--success) {
+	--button--color--background: var(--color--success);
+	--button--color--background-hover: var(--color--success--shade-1);
+	--button--color--background-active: var(--color--success--shade-1);
+	--button--color: var(--color--neutral-white);
+	--button--shadow: 0 0 0 1px var(--color--success);
+	--button--shadow--hover: 0 0 0 1px var(--color--success--shade-1);
+	--button--shadow--active: 0 0 0 1px var(--color--success--shade-1);
+
+	&:disabled,
+	&[aria-disabled='true'] {
+		--button--color--background: var(--color--success--tint-3);
+		--button--shadow: 0 0 0 1px var(--color--success--tint-3);
+	}
+}
+
+/** @deprecated Use a semantic variant instead of warning color */
+:global(.n8n-button--warning) {
+	--button--color--background: var(--color--warning);
+	--button--color--background-hover: var(--color--warning--shade-1);
+	--button--color--background-active: var(--color--warning--shade-1);
+	--button--color: var(--color--neutral-white);
+	--button--shadow: 0 0 0 1px var(--color--warning);
+	--button--shadow--hover: 0 0 0 1px var(--color--warning--shade-1);
+	--button--shadow--active: 0 0 0 1px var(--color--warning--shade-1);
+
+	&:disabled,
+	&[aria-disabled='true'] {
+		--button--color--background: var(--color--warning--tint-1);
+		--button--shadow: 0 0 0 1px var(--color--warning--tint-1);
+	}
+}
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss
deleted file mode 100644
index 38c3baa231f..00000000000
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss
+++ /dev/null
@@ -1,285 +0,0 @@
-@use '../../css/mixins/utils';
-@use '../../css/common/var';
-@use 'sass:string';
-
-@mixin n8n-button($override: false) {
-	$important: if($override, !important, '');
-
-	display: inline-block;
-	line-height: 1;
-	white-space: nowrap;
-	cursor: pointer;
-
-	border: var(--border-width) var.$button-border-color var(--border-style)
-		string.unquote($important);
-	color: var.$button-font-color string.unquote($important);
-	background-color: var.$button-background-color string.unquote($important);
-	font-weight: var(--font-weight--medium) string.unquote($important);
-	border-radius: var.$button-border-radius string.unquote($important);
-	padding: var.$button-padding-vertical var.$button-padding-horizontal string.unquote($important);
-	font-size: var.$button-font-size string.unquote($important);
-
-	-webkit-appearance: none;
-	text-align: center;
-	box-sizing: border-box;
-	outline: none;
-	margin: 0;
-	transition:
-		all 0.3s,
-		padding 0s,
-		width 0s,
-		height 0s;
-
-	gap: var(--spacing--3xs);
-
-	@include utils.utils-user-select(none);
-
-	// Solution for a inside button
-	& a {
-		color: var.$button-font-color string.unquote($important);
-	}
-
-	&:hover {
-		color: var.$button-hover-font-color string.unquote($important);
-		border-color: var.$button-hover-border-color string.unquote($important);
-		background-color: var.$button-hover-background-color string.unquote($important);
-
-		& a {
-			color: var.$button-hover-font-color string.unquote($important);
-		}
-	}
-
-	&:active,
-	&.active {
-		color: var.$button-active-font-color string.unquote($important);
-		border-color: var.$button-active-border-color string.unquote($important);
-		background-color: var.$button-active-background-color string.unquote($important);
-		outline: none;
-
-		& a {
-			color: var.$button-active-font-color string.unquote($important);
-		}
-	}
-
-	&:focus-visible:not(:active, .active) {
-		color: var.$button-focus-font-color string.unquote($important);
-		border-color: var.$button-focus-border-color string.unquote($important);
-		background-color: var.$button-focus-background-color string.unquote($important);
-		outline: var.$focus-outline-width solid var.$button-focus-outline-color
-			string.unquote($important);
-
-		& a {
-			color: var.$button-focus-font-color string.unquote($important);
-		}
-	}
-
-	&.disabled {
-		&,
-		&:hover,
-		&:active,
-		&:focus-visible {
-			color: var.$button-disabled-font-color;
-			border-color: var.$button-disabled-border-color;
-			background-color: var.$button-disabled-background-color;
-
-			& a {
-				color: var.$button-disabled-font-color;
-			}
-		}
-	}
-
-	.loading {
-		&,
-		&:hover,
-		&:active,
-		&:focus-visible {
-			color: var.$button-loading-font-color;
-			border-color: var.$button-loading-border-color;
-			background-color: var.$button-loading-background-color;
-
-			& a {
-				color: var.$button-loading-font-color;
-			}
-		}
-	}
-
-	&::-moz-focus-inner {
-		border: 0;
-	}
-
-	> i {
-		display: none;
-	}
-
-	> span {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-}
-
-@mixin n8n-button-secondary {
-	--button--color--text: var(--button--color--text--secondary);
-	--button--border-color: var(--button--border-color--secondary);
-	--button--color--background: var(--button--color--background--secondary);
-
-	--button--color--text--hover: var(--button--color--text--secondary--hover-active-focus);
-	--button--border-color--hover: var(--button--border-color--secondary--hover-active-focus);
-	--button--color--background--hover: var(--button--color--background--secondary--hover);
-
-	--button--color--text--active: var(--button--color--text--secondary--hover-active-focus);
-	--button--border-color--active: var(--button--border-color--secondary--hover-active-focus);
-	--button--color--background--active: var(--button--color--background--secondary--active-focus);
-
-	--button--color--text--focus: var(--button--color--text--secondary--hover-active-focus);
-	--button--border-color--focus: var(--button--border-color--secondary--hover-active-focus);
-	--button--color--background--focus: var(--button--color--background--secondary--active-focus);
-	--button--outline-color--focus: var(--button--outline-color--secondary--focus);
-
-	--button--color--text--disabled: var(--button--color--text--secondary--disabled);
-	--button--border-color--disabled: var(--button--border-color--secondary--disabled);
-	--button--color--background--disabled: var(--button--color--background--secondary);
-
-	--button--color--text--loading: var(--button--color--text--secondary--loading);
-	--button--border-color--loading: var(--button--border-color--secondary--loading);
-	--button--color--background--loading: var(--button--color--background--secondary--loading);
-}
-
-@mixin n8n-button-highlight {
-	--button--color--text: var(--button--color--text--highlight);
-	--button--border-color: var(--button--border-color--highlight);
-	--button--color--background: var(--button--color--background--highlight);
-
-	--button--color--text--hover: var(--button--color--text--highlight--hover-active-focus);
-	--button--border-color--hover: var(--button--border-color--highlight--hover-active-focus);
-	--button--color--background--hover: var(--button--color--background--highlight--hover);
-
-	--button--color--text--active: var(--button--color--text--highlight--hover-active-focus);
-	--button--border-color--active: var(--button--border-color--highlight--hover-active-focus);
-	--button--color--background--active: var(--button--color--background--highlight--active-focus);
-
-	--button--color--text--focus: var(--button--color--text--highlight--hover-active-focus);
-	--button--border-color--focus: var(--button--border-color--highlight--hover-active-focus);
-	--button--color--background--focus: var(--button--color--background--highlight--active-focus);
-	--button--outline-color--focus: var(--button--outline-color--highlight--focus);
-
-	--button--color--text--disabled: var(--button--color--text--highlight--disabled);
-	--button--border-color--disabled: var(--button--border-color--highlight--disabled);
-	--button--color--background--disabled: var(--button--color--background--highlight--disabled);
-
-	--button--color--text--loading: var(--button--color--text--highlight--loading);
-	--button--border-color--loading: var(--button--border-color--highlight--loading);
-	--button--color--background--loading: var(--button--color--background--highlight--loading);
-}
-
-@mixin n8n-button-highlight-fill {
-	--button--color--text: var(--button--color--text--highlight-fill);
-	--button--border-color: var(--button--border-color--highlight-fill);
-	--button--color--background: var(--button--color--background--highlight-fill);
-
-	--button--color--text--hover: var(--button--color--text--highlight-fill--hover-active-focus);
-	--button--border-color--hover: var(--button--border-color--highlight-fill--hover-active-focus);
-	--button--color--background--hover: var(--button--color--background--highlight-fill--hover);
-
-	--button--color--text--active: var(--button--color--text--highlight-fill--hover-active-focus);
-	--button--border-color--active: var(--button--border-color--highlight-fill--hover-active-focus);
-	--button--color--background--active: var(
-		--button--color--background--highlight-fill--active-focus
-	);
-
-	--button--color--text--focus: var(--button--color--text--highlight-fill--hover-active-focus);
-	--button--border-color--focus: var(--button--border-color--highlight-fill--hover-active-focus);
-	--button--color--background--focus: var(
-		--button--color--background--highlight-fill--active-focus
-	);
-	--button--outline-color--focus: var(--button--outline-color--highlight-fill--focus);
-
-	--button--color--text--disabled: var(--button--color--text--highlight-fill--disabled);
-	--button--border-color--disabled: var(--button--border-color--highlight-fill--disabled);
-	--button--color--background--disabled: var(--button--color--background--highlight-fill--disabled);
-
-	--button--color--text--loading: var(--button--color--text--highlight-fill);
-	--button--border-color--loading: var(--button--border-color--highlight-fill);
-	--button--color--background--loading: var(--button--color--background--highlight-fill);
-}
-
-@mixin n8n-button-success {
-	--button--color--text: var(--button--color--text--success);
-	--button--border-color: var(--color--success);
-	--button--color--background: var(--color--success);
-
-	--button--color--text--hover: var(--button--color--text--success);
-	--button--border-color--hover: var(--color--success--shade-1);
-	--button--color--background--hover: var(--color--success--shade-1);
-
-	--button--color--text--active: var(--button--color--text--success);
-	--button--border-color--active: var(--color--success--shade-1);
-	--button--color--background--active: var(--color--success--shade-1);
-
-	--button--color--text--focus: var(--button--color--text--success);
-	--button--border-color--focus: var(--color--success);
-	--button--color--background--focus: var(--color--success);
-	--button--outline-color--focus: var(--color--success--tint-1);
-
-	--button--color--text--disabled: var(--button--color--text--success--disabled);
-	--button--border-color--disabled: var(--color--success--tint-3);
-	--button--color--background--disabled: var(--color--success--tint-3);
-
-	--button--color--text--loading: var(--button--color--text--success);
-	--button--border-color--loading: var(--color--success);
-	--button--color--background--loading: var(--color--success);
-}
-
-@mixin n8n-button-warning {
-	--button--color--text: var(--button--color--text--warning);
-	--button--border-color: var(--color--warning);
-	--button--color--background: var(--color--warning);
-
-	--button--color--text--hover: var(--button--color--text--warning);
-	--button--border-color--hover: var(--color--warning--shade-1);
-	--button--color--background--hover: var(--color--warning--shade-1);
-
-	--button--color--text--active: var(--button--color--text--warning);
-	--button--border-color--active: var(--color--warning--shade-1);
-	--button--color--background--active: var(--color--warning--shade-1);
-
-	--button--color--text--focus: var(--button--color--text--warning);
-	--button--border-color--focus: var(--color--warning);
-	--button--color--background--focus: var(--color--warning);
-	--button--outline-color--focus: var(--color--warning--tint-1);
-
-	--button--color--text--disabled: var(--button--color--text--warning--disabled);
-	--button--border-color--disabled: var(--color--warning--tint-1);
-	--button--color--background--disabled: var(--color--warning--tint-1);
-
-	--button--color--text--loading: var(--button--color--text--warning);
-	--button--border-color--loading: var(--color--warning);
-	--button--color--background--loading: var(--color--warning);
-}
-
-@mixin n8n-button-danger {
-	--button--color--text: var(--button--color--text--danger);
-	--button--border-color: var(--button--border-color--danger);
-	--button--color--background: var(--color--danger);
-
-	--button--color--text--hover: var(--button--color--text--danger);
-	--button--border-color--hover: var(--color--danger--shade-1);
-	--button--color--background--hover: var(--color--danger--shade-1);
-
-	--button--color--text--active: var(--button--color--text--danger);
-	--button--border-color--active: var(--color--danger--shade-1);
-	--button--color--background--active: var(--color--danger--shade-1);
-
-	--button--color--text--focus: var(--button--color--text--danger);
-	--button--border-color--focus: var(--color--danger);
-	--button--color--background--focus: var(--color--danger);
-	--button--outline-color--focus: var(--button--outline-color--danger--focus);
-
-	--button--color--text--disabled: var(--button--color--text--danger--disabled);
-	--button--border-color--disabled: var(--button--border-color--danger--disabled);
-	--button--color--background--disabled: var(--button--color--background--danger--disabled);
-
-	--button--color--text--loading: var(--button--color--text--danger);
-	--button--border-color--loading: var(--color--danger);
-	--button--color--background--loading: var(--color--danger);
-}
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts
index 082397e38a2..b1d4438a77d 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts
@@ -1,183 +1,259 @@
-import type { StoryFn } from '@storybook/vue3-vite';
-import { action } from 'storybook/actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import N8nButton from './Button.vue';
+import N8nIcon from '../N8nIcon/Icon.vue';
 
-export default {
+const meta = {
 	title: 'Atoms/Button',
 	component: N8nButton,
 	argTypes: {
-		type: {
+		variant: {
 			control: 'select',
-			options: [
-				'primary',
-				'secondary',
-				'tertiary',
-				'success',
-				'warning',
-				'danger',
-				'highlight',
-				'highlightFill',
-			],
+			options: ['solid', 'subtle', 'ghost', 'outline', 'destructive'],
 		},
 		size: {
-			control: {
-				type: 'select',
-			},
-			options: ['mini', 'small', 'medium', 'large', 'xlarge'],
+			control: 'select',
+			options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
 		},
-		float: {
-			type: 'select',
-			options: ['left', 'right'],
+		loading: {
+			control: 'boolean',
 		},
+		disabled: {
+			control: 'boolean',
+		},
+		iconOnly: {
+			control: 'boolean',
+			description: 'Makes button square (icon-only)',
+		},
+		href: {
+			control: 'text',
+			description: 'If provided, renders as a link',
+		},
+		// Hide internal props from the table
+		icon: { table: { disable: true } },
+		iconSize: { table: { disable: true } },
+		label: { table: { disable: true } },
 	},
 	parameters: {
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=5%3A1147',
+		docs: {
+			source: { type: 'dynamic' },
 		},
 	},
-};
+} satisfies Meta<typeof N8nButton>;
 
-const methods = {
-	onClick: action('click'),
-};
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: StoryFn = (args, { argTypes }) => ({
-	setup: () => ({ args }),
-	props: Object.keys(argTypes),
-	components: {
-		N8nButton,
+export const Default: Story = {
+	render: (args) => ({
+		components: { N8nButton },
+		setup() {
+			return { args };
+		},
+		template: `
+		<div style="display: grid; place-items: center;">
+			<N8nButton v-bind="args">{{ args.default || 'Button' }}</N8nButton>
+		</div>
+		`,
+	}),
+	args: {
+		variant: 'solid',
+		size: 'medium',
+		loading: false,
+		default: 'Button',
 	},
-	template: '<n8n-button v-bind="args" @click="onClick" />',
-	methods,
-});
-
-export const Button = Template.bind({});
-Button.args = {
-	label: 'Button',
 };
 
-const AllSizesTemplate: StoryFn = (args, { argTypes }) => ({
-	setup: () => ({ args }),
-	props: Object.keys(argTypes),
-	components: {
-		N8nButton,
-	},
-	template: `<div>
-		<n8n-button v-bind="args" size="large" @click="onClick" />
-		<n8n-button v-bind="args" size="medium" @click="onClick" />
-		<n8n-button v-bind="args" size="small" @click="onClick" />
-		<n8n-button v-bind="args" :loading="true" @click="onClick" />
-		<n8n-button v-bind="args" :disabled="true" @click="onClick" />
-	</div>`,
-	methods,
-});
-
-const AllColorsAndSizesTemplate: StoryFn = (args, { argTypes }) => ({
-	setup: () => ({ args }),
-	props: Object.keys(argTypes),
-	components: {
-		N8nButton,
-	},
-	template: `<div>
-		<n8n-button v-bind="args" size="large" type="primary" @click="onClick" />
-		<n8n-button v-bind="args" size="large" type="secondary" @click="onClick" />
-		<n8n-button v-bind="args" size="large" type="tertiary" @click="onClick" />
-		<n8n-button v-bind="args" size="large" type="success" @click="onClick" />
-		<n8n-button v-bind="args" size="large" type="warning" @click="onClick" />
-		<n8n-button v-bind="args" size="large" type="danger" @click="onClick" />
-		<n8n-button v-bind="args" size="large" type="highlight" @click="onClick" />
-		<br/>
-		<br/>
-		<n8n-button v-bind="args" size="medium" type="primary" @click="onClick" />
-		<n8n-button v-bind="args" size="medium" type="secondary" @click="onClick" />
-		<n8n-button v-bind="args" size="medium" type="tertiary" @click="onClick" />
-		<n8n-button v-bind="args" size="medium" type="success" @click="onClick" />
-		<n8n-button v-bind="args" size="medium" type="warning" @click="onClick" />
-		<n8n-button v-bind="args" size="medium" type="danger" @click="onClick" />
-		<n8n-button v-bind="args" size="medium" type="highlight" @click="onClick" />
-		<br/>
-		<br/>
-		<n8n-button v-bind="args" size="small" type="primary" @click="onClick" />
-		<n8n-button v-bind="args" size="small" type="secondary" @click="onClick" />
-		<n8n-button v-bind="args" size="small" type="tertiary" @click="onClick" />
-		<n8n-button v-bind="args" size="small" type="success" @click="onClick" />
-		<n8n-button v-bind="args" size="small" type="warning" @click="onClick" />
-		<n8n-button v-bind="args" size="small" type="danger" @click="onClick" />
-		<n8n-button v-bind="args" size="small" type="highlight" @click="onClick" />
-	</div>`,
-	methods,
-});
-
-export const Primary = AllSizesTemplate.bind({});
-Primary.args = {
-	type: 'primary',
-	label: 'Button',
+export const Variant: Story = {
+	render: () => ({
+		components: { N8nButton },
+		template: `
+		<div style="display: grid; place-items: center;">
+			<div style="display: flex; gap: 12px; align-items: center;">
+				<N8nButton variant="solid" size="medium">Solid</N8nButton>
+				<N8nButton variant="subtle" size="medium">Subtle</N8nButton>
+				<N8nButton variant="outline" size="medium">Outline</N8nButton>
+				<N8nButton variant="ghost" size="medium">Ghost</N8nButton>
+				<N8nButton variant="destructive" size="medium">Destructive</N8nButton>
+			</div>
+		</div>
+		`,
+	}),
+	args: {},
 };
 
-export const Secondary = AllSizesTemplate.bind({});
-Secondary.args = {
-	type: 'secondary',
-	label: 'Button',
+export const Size: Story = {
+	render: () => ({
+		components: { N8nButton },
+		template: `
+		<div style="display: grid; place-items: center;">
+			<div style="display: flex; gap: 12px; align-items: center;">
+				<N8nButton variant="solid" size="xsmall">XSmall</N8nButton>
+				<N8nButton variant="solid" size="small">Small</N8nButton>
+				<N8nButton variant="solid" size="medium">Medium</N8nButton>
+				<N8nButton variant="solid" size="large">Large</N8nButton>
+				<N8nButton variant="solid" size="xlarge">XLarge</N8nButton>
+			</div>
+		</div>
+		`,
+	}),
+	args: {},
 };
 
-export const Tertiary = AllSizesTemplate.bind({});
-Tertiary.args = {
-	type: 'tertiary',
-	label: 'Button',
+export const WithIcons: Story = {
+	render: () => ({
+		components: { N8nButton, N8nIcon },
+		template: `
+		<div style="display: grid; place-items: center;">
+			<div style="display: flex; gap: 12px; align-items: center;">
+				<N8nButton variant="solid" size="medium">
+					<N8nIcon icon="plus" size="medium" />
+					Add Item
+				</N8nButton>
+				<N8nButton variant="solid" size="medium">
+					Continue
+					<N8nIcon icon="arrow-right" size="medium" />
+				</N8nButton>
+				<N8nButton variant="solid" size="medium">
+					<N8nIcon icon="plus" size="medium" />
+					Options
+					<N8nIcon icon="chevron-down" size="medium" />
+				</N8nButton>
+			</div>
+		</div>
+		`,
+	}),
+	args: {},
 };
 
-export const Success = AllSizesTemplate.bind({});
-Success.args = {
-	type: 'success',
-	label: 'Button',
+export const Loading: Story = {
+	render: () => ({
+		components: { N8nButton },
+		template: `
+		<div style="display: grid; place-items: center;">
+			<div style="display: flex; gap: 12px; align-items: center;">
+				<N8nButton variant="solid" size="medium" loading>Solid</N8nButton>
+				<N8nButton variant="subtle" size="medium" loading>Subtle</N8nButton>
+				<N8nButton variant="outline" size="medium" loading>Outline</N8nButton>
+				<N8nButton variant="ghost" size="medium" loading>Ghost</N8nButton>
+				<N8nButton variant="destructive" size="medium" loading>Destructive</N8nButton>
+			</div>
+		</div>
+		`,
+	}),
+	args: {},
 };
 
-export const Warning = AllSizesTemplate.bind({});
-Warning.args = {
-	type: 'warning',
-	label: 'Button',
+export const Link: Story = {
+	render: () => ({
+		components: { N8nButton },
+		template: `
+		<div style="display: grid; place-items: center;">
+			<div style="display: flex; gap: 12px; align-items: center;">
+				<N8nButton variant="solid" size="medium" href="https://n8n.io">Link</N8nButton>
+				<N8nButton variant="subtle" size="medium" href="https://n8n.io">Link</N8nButton>
+				<N8nButton variant="outline" size="medium" href="https://n8n.io">Link</N8nButton>
+				<N8nButton variant="ghost" size="medium" href="https://n8n.io">Link</N8nButton>
+				<N8nButton variant="destructive" size="medium" href="https://n8n.io">Link</N8nButton>
+			</div>
+		</div>
+		`,
+	}),
+	args: {},
 };
 
-export const Danger = AllSizesTemplate.bind({});
-Danger.args = {
-	type: 'danger',
-	label: 'Button',
+export const IconOnly: Story = {
+	render: () => ({
+		components: { N8nButton, N8nIcon },
+		template: `
+		<div style="display: grid; place-items: center;">
+			<div style="display: flex; gap: 12px; align-items: center;">
+				<N8nButton variant="solid" size="xsmall" icon-only aria-label="Add">
+					<N8nIcon icon="plus" size="xsmall" />
+				</N8nButton>
+				<N8nButton variant="solid" size="small" icon-only aria-label="Add">
+					<N8nIcon icon="plus" size="small" />
+				</N8nButton>
+				<N8nButton variant="solid" size="medium" icon-only aria-label="Add">
+					<N8nIcon icon="plus" size="medium" />
+				</N8nButton>
+			</div>
+		</div>
+		`,
+	}),
+	args: {},
 };
 
-export const Outline = AllColorsAndSizesTemplate.bind({});
-Outline.args = {
-	outline: true,
-	label: 'Button',
+export const Disabled: Story = {
+	render: () => ({
+		components: { N8nButton },
+		template: `
+		<div style="display: grid; place-items: center;">
+			<div style="display: flex; gap: 12px; align-items: center;">
+				<N8nButton variant="solid" size="medium" disabled>Solid</N8nButton>
+				<N8nButton variant="subtle" size="medium" disabled>Subtle</N8nButton>
+				<N8nButton variant="outline" size="medium" disabled>Outline</N8nButton>
+				<N8nButton variant="ghost" size="medium" disabled>Ghost</N8nButton>
+				<N8nButton variant="destructive" size="medium" disabled>Destructive</N8nButton>
+			</div>
+		</div>
+		`,
+	}),
+	args: {},
 };
 
-export const Text = AllColorsAndSizesTemplate.bind({});
-Text.args = {
-	text: true,
-	label: 'Button',
-};
+/**
+ * ## Migration from `type` to `variant`
+ *
+ * The `type` prop is deprecated. Use `variant` instead with this mapping:
+ *
+ * | Legacy `type` | Current `variant` |
+ * |---------------|-------------------|
+ * | `primary`     | `solid`           |
+ * | `secondary`   | `subtle`          |
+ * | `tertiary`    | `ghost`           |
+ * | `danger`      | `destructive`     |
+ *
+ * Additionally:
+ * - `outline` prop → `variant="outline"`
+ * - `text` prop → `variant="ghost"`
+ */
+export const TypeToVariantMapping: Story = {
+	render: () => ({
+		components: { N8nButton },
+		template: `
+		<div style="display: grid; gap: 24px;">
+			<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center; font-family: var(--font-family); font-size: var(--font-size--sm);">
+				<strong>Legacy type</strong>
+				<strong>Current variant</strong>
+				<strong>Result</strong>
 
-export const WithIcon = AllSizesTemplate.bind({});
-WithIcon.args = {
-	label: 'Button',
-	icon: 'circle-plus',
-};
+				<code>type="primary"</code>
+				<code>variant="solid"</code>
+				<N8nButton variant="solid">Solid</N8nButton>
 
-export const Highlight = AllSizesTemplate.bind({});
-Highlight.args = {
-	type: 'highlight',
-	label: 'Button',
-};
+				<code>type="secondary"</code>
+				<code>variant="subtle"</code>
+				<N8nButton variant="subtle">Subtle</N8nButton>
 
-export const HighlightFill = AllSizesTemplate.bind({});
-HighlightFill.args = {
-	type: 'highlightFill',
-	label: 'Button',
-};
+				<code>type="tertiary"</code>
+				<code>variant="ghost"</code>
+				<N8nButton variant="ghost">Ghost</N8nButton>
 
-export const Square = AllColorsAndSizesTemplate.bind({});
-Square.args = {
-	label: '48',
-	square: true,
+				<code>type="danger"</code>
+				<code>variant="destructive"</code>
+				<N8nButton variant="destructive">Destructive</N8nButton>
+
+				<code>outline</code>
+				<code>variant="outline"</code>
+				<N8nButton variant="outline">Outline</N8nButton>
+
+				<code>text</code>
+				<code>variant="ghost"</code>
+				<N8nButton variant="ghost">Ghost</N8nButton>
+			</div>
+		</div>
+		`,
+	}),
+	args: {},
 };
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts
index bd554029d83..5603124b893 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts
@@ -1,47 +1,231 @@
+import userEvent from '@testing-library/user-event';
 import { render } from '@testing-library/vue';
 
 import N8nButton from './Button.vue';
 
-const slots = {
-	default: 'Button',
-};
 const stubs = ['N8nSpinner', 'N8nIcon'];
 
 describe('components', () => {
 	describe('N8nButton', () => {
-		it('should render correctly', () => {
-			const wrapper = render(N8nButton, {
-				slots,
-				global: {
-					stubs,
-				},
+		describe('rendering', () => {
+			it('should render correctly with default props', () => {
+				const wrapper = render(N8nButton, {
+					slots: {
+						default: 'Click me',
+					},
+					global: {
+						stubs,
+					},
+				});
+				expect(wrapper.getByRole('button')).toBeInTheDocument();
+				expect(wrapper.getByText('Click me')).toBeInTheDocument();
+			});
+
+			it('should render as button element by default', () => {
+				const wrapper = render(N8nButton, {
+					slots: {
+						default: 'Button',
+					},
+					global: {
+						stubs,
+					},
+				});
+				expect(wrapper.container.querySelector('button')).toBeInTheDocument();
+			});
+
+			it('should render as anchor element when href is provided', () => {
+				const wrapper = render(N8nButton, {
+					props: {
+						href: 'https://example.com',
+					},
+					slots: {
+						default: 'Link Button',
+					},
+					global: {
+						stubs,
+					},
+				});
+				const link = wrapper.container.querySelector('a');
+				expect(link).toBeInTheDocument();
+				expect(link).toHaveAttribute('href', 'https://example.com');
+				expect(link).toHaveAttribute('rel', 'nofollow noopener noreferrer');
+			});
+
+			it('should have type="button" by default', () => {
+				const wrapper = render(N8nButton, {
+					slots: {
+						default: 'Button',
+					},
+					global: {
+						stubs,
+					},
+				});
+				expect(wrapper.getByRole('button')).toHaveAttribute('type', 'button');
+			});
+
+			it('should not have type attribute when rendered as link', () => {
+				const wrapper = render(N8nButton, {
+					props: {
+						href: 'https://example.com',
+					},
+					slots: {
+						default: 'Link',
+					},
+					global: {
+						stubs,
+					},
+				});
+				const link = wrapper.container.querySelector('a');
+				expect(link).not.toHaveAttribute('type');
 			});
-			expect(wrapper.html()).toMatchSnapshot();
 		});
 
 		describe('props', () => {
+			describe('variant', () => {
+				it.each(['solid', 'subtle', 'ghost', 'outline', 'destructive'] as const)(
+					'should render %s variant',
+					(variant) => {
+						const wrapper = render(N8nButton, {
+							props: { variant },
+							slots: { default: 'Button' },
+							global: { stubs },
+						});
+						const button = wrapper.container.querySelector('button');
+						expect(button?.className).toContain(variant);
+					},
+				);
+			});
+
+			describe('size', () => {
+				it.each(['xsmall', 'small', 'medium'] as const)('should render %s size', (size) => {
+					const wrapper = render(N8nButton, {
+						props: { size, variant: 'solid' },
+						slots: { default: 'Button' },
+						global: { stubs },
+					});
+					const button = wrapper.container.querySelector('button');
+					expect(button?.className).toContain(size);
+				});
+
+				it('should map size="mini" to xsmall', () => {
+					const wrapper = render(N8nButton, {
+						props: { size: 'mini', variant: 'solid' },
+						slots: { default: 'Button' },
+						global: { stubs },
+					});
+					const button = wrapper.container.querySelector('button');
+					expect(button?.className).toContain('xsmall');
+				});
+
+				it('should map size="xmini" to xsmall', () => {
+					const wrapper = render(N8nButton, {
+						props: { size: 'xmini', variant: 'solid' },
+						slots: { default: 'Button' },
+						global: { stubs },
+					});
+					const button = wrapper.container.querySelector('button');
+					expect(button?.className).toContain('xsmall');
+				});
+			});
+
 			describe('loading', () => {
-				it('should render loading spinner', () => {
+				it('should show loading spinner when loading', () => {
+					const wrapper = render(N8nButton, {
+						props: { loading: true, variant: 'solid' },
+						slots: { default: 'Button' },
+						global: { stubs },
+					});
+					const button = wrapper.container.querySelector('button');
+					expect(button?.className).toContain('loading');
+					expect(wrapper.container.querySelector('n8n-icon-stub')).toBeInTheDocument();
+				});
+
+				it('should be disabled while loading', async () => {
+					const handleClick = vi.fn();
+					const wrapper = render(N8nButton, {
+						props: { loading: true, variant: 'solid' },
+						attrs: { onClick: handleClick },
+						slots: { default: 'Button' },
+						global: { stubs },
+					});
+
+					const button = wrapper.getByRole('button');
+					expect(button).toBeDisabled();
+					expect(button).toHaveAttribute('aria-disabled', 'true');
+
+					await userEvent.click(button);
+					expect(handleClick).not.toHaveBeenCalled();
+				});
+			});
+
+			describe('disabled', () => {
+				it('should be disabled when disabled prop is true', () => {
+					const wrapper = render(N8nButton, {
+						props: { disabled: true, variant: 'solid' },
+						slots: { default: 'Button' },
+						global: { stubs },
+					});
+					const button = wrapper.getByRole('button');
+					expect(button).toBeDisabled();
+					expect(button).toHaveAttribute('aria-disabled', 'true');
+				});
+
+				it('should apply disabled class', () => {
+					const wrapper = render(N8nButton, {
+						props: { disabled: true, variant: 'solid' },
+						slots: { default: 'Button' },
+						global: { stubs },
+					});
+					const button = wrapper.container.querySelector('button');
+					expect(button?.className).toContain('disabled');
+				});
+
+				it('should prevent navigation on disabled link button', async () => {
 					const wrapper = render(N8nButton, {
 						props: {
-							loading: true,
-						},
-						slots,
-						global: {
-							stubs,
+							href: 'https://example.com',
+							disabled: true,
+							variant: 'solid',
 						},
+						slots: { default: 'Link' },
+						global: { stubs },
 					});
-					expect(wrapper.html()).toMatchSnapshot();
+					const link = wrapper.container.querySelector('a')!;
+
+					const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+					const preventDefaultSpy = vi.spyOn(clickEvent, 'preventDefault');
+
+					link.dispatchEvent(clickEvent);
+
+					expect(preventDefaultSpy).toHaveBeenCalled();
+				});
+			});
+
+			describe('iconOnly', () => {
+				it('should apply iconOnly class for square icon button', () => {
+					const wrapper = render(N8nButton, {
+						props: {
+							iconOnly: true,
+							variant: 'solid',
+						},
+						attrs: {
+							'aria-label': 'Icon button',
+						},
+						slots: { default: '<span>+</span>' },
+						global: { stubs },
+					});
+					const button = wrapper.container.querySelector('button');
+					expect(button?.className).toContain('iconOnly');
 				});
 			});
 
 			describe('icon', () => {
-				it('should render icon button', () => {
+				it('should render icon button with icon name', () => {
 					const wrapper = render(N8nButton, {
 						props: {
 							icon: 'circle-plus',
 						},
-						slots,
+						slots: { default: 'Button' },
 						global: {
 							stubs,
 						},
@@ -50,37 +234,223 @@ describe('components', () => {
 				});
 			});
 
-			describe('square', () => {
-				it('should render square button', () => {
+			describe('label', () => {
+				it('should render label prop content', () => {
 					const wrapper = render(N8nButton, {
 						props: {
-							square: true,
-							label: '48',
+							label: 'Click me',
 						},
 						global: {
 							stubs,
 						},
 					});
-					expect(wrapper.html()).toMatchSnapshot();
+					expect(wrapper.getByText('Click me')).toBeInTheDocument();
 				});
 			});
 
-			describe('type', () => {
-				it('should render highlight button', () => {
+			describe('class', () => {
+				it('should apply custom class', () => {
 					const wrapper = render(N8nButton, {
-						props: {
-							type: 'highlight',
-						},
-						slots,
-						global: {
-							stubs,
-						},
+						props: { class: 'custom-class', variant: 'solid' },
+						slots: { default: 'Button' },
+						global: { stubs },
 					});
 					const button = wrapper.container.querySelector('button');
-					expect(button?.className).toContain('highlight');
-					expect(wrapper.html()).toMatchSnapshot();
+					expect(button?.className).toContain('custom-class');
 				});
 			});
 		});
+
+		describe('slots', () => {
+			it('should render default slot content', () => {
+				const wrapper = render(N8nButton, {
+					props: { variant: 'solid' },
+					slots: {
+						default: '<span data-test-id="slot-content">Custom Content</span>',
+					},
+					global: { stubs },
+				});
+				expect(wrapper.getByTestId('slot-content')).toBeInTheDocument();
+				expect(wrapper.getByText('Custom Content')).toBeInTheDocument();
+			});
+
+			it('should render complex slot content', () => {
+				const wrapper = render(N8nButton, {
+					props: { variant: 'solid' },
+					slots: {
+						default: '<span>Icon</span><span>Text</span>',
+					},
+					global: { stubs },
+				});
+				expect(wrapper.getByText('Icon')).toBeInTheDocument();
+				expect(wrapper.getByText('Text')).toBeInTheDocument();
+			});
+		});
+
+		describe('events', () => {
+			it('should emit click event', async () => {
+				const handleClick = vi.fn();
+				const wrapper = render(N8nButton, {
+					props: { variant: 'solid' },
+					attrs: { onClick: handleClick },
+					slots: { default: 'Button' },
+					global: { stubs },
+				});
+
+				await userEvent.click(wrapper.getByRole('button'));
+				expect(handleClick).toHaveBeenCalledOnce();
+			});
+
+			it('should not emit click when disabled', async () => {
+				const handleClick = vi.fn();
+				const wrapper = render(N8nButton, {
+					props: {
+						disabled: true,
+						variant: 'solid',
+					},
+					attrs: { onClick: handleClick },
+					slots: { default: 'Button' },
+					global: { stubs },
+				});
+
+				await userEvent.click(wrapper.getByRole('button'));
+				expect(handleClick).not.toHaveBeenCalled();
+			});
+		});
+
+		describe('accessibility', () => {
+			it('should be keyboard accessible', async () => {
+				const handleClick = vi.fn();
+				const wrapper = render(N8nButton, {
+					props: { variant: 'solid' },
+					attrs: { onClick: handleClick },
+					slots: { default: 'Button' },
+					global: { stubs },
+				});
+
+				const button = wrapper.getByRole('button');
+				button.focus();
+				expect(button).toHaveFocus();
+
+				await userEvent.keyboard('{Enter}');
+				expect(handleClick).toHaveBeenCalledOnce();
+			});
+
+			it('should be focusable', () => {
+				const wrapper = render(N8nButton, {
+					props: { variant: 'solid' },
+					slots: { default: 'Button' },
+					global: { stubs },
+				});
+				const button = wrapper.getByRole('button');
+				button.focus();
+				expect(button).toHaveFocus();
+			});
+
+			it('should warn about missing accessible label for icon-only buttons in dev mode', () => {
+				const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+				render(N8nButton, {
+					props: { iconOnly: true, variant: 'solid' },
+					slots: { default: '+' },
+					global: { stubs },
+				});
+
+				expect(consoleSpy).toHaveBeenCalledWith(
+					expect.stringContaining('Icon-only buttons should have an accessible label'),
+				);
+
+				consoleSpy.mockRestore();
+			});
+
+			it('should not warn when icon button has aria-label', () => {
+				const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+				render(N8nButton, {
+					props: {
+						iconOnly: true,
+						variant: 'solid',
+					},
+					attrs: {
+						'aria-label': 'Add item',
+					},
+					slots: { default: '+' },
+					global: { stubs },
+				});
+
+				const iconWarningCalls = consoleSpy.mock.calls.filter((call) =>
+					call[0]?.includes?.('Icon-only buttons should have an accessible label'),
+				);
+				expect(iconWarningCalls).toHaveLength(0);
+
+				consoleSpy.mockRestore();
+			});
+
+			it('should not warn when icon button has title', () => {
+				const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+				render(N8nButton, {
+					props: {
+						iconOnly: true,
+						variant: 'solid',
+					},
+					attrs: {
+						title: 'Add item',
+					},
+					slots: { default: '+' },
+					global: { stubs },
+				});
+
+				const iconWarningCalls = consoleSpy.mock.calls.filter((call) =>
+					call[0]?.includes?.('Icon-only buttons should have an accessible label'),
+				);
+				expect(iconWarningCalls).toHaveLength(0);
+
+				consoleSpy.mockRestore();
+			});
+		});
+
+		describe('button type attribute', () => {
+			it('should pass through additional attributes', () => {
+				const wrapper = render(N8nButton, {
+					props: { variant: 'solid' },
+					attrs: {
+						'data-test-id': 'custom-button',
+						'aria-describedby': 'help-text',
+					},
+					slots: { default: 'Button' },
+					global: { stubs },
+				});
+				const button = wrapper.getByRole('button');
+				expect(button).toHaveAttribute('data-test-id', 'custom-button');
+				expect(button).toHaveAttribute('aria-describedby', 'help-text');
+			});
+		});
+
+		describe('link button', () => {
+			it('should render link with proper security attributes', () => {
+				const wrapper = render(N8nButton, {
+					props: { href: 'https://external.com', variant: 'solid' },
+					slots: { default: 'External Link' },
+					global: { stubs },
+				});
+				const link = wrapper.container.querySelector('a');
+				expect(link).toHaveAttribute('rel', 'nofollow noopener noreferrer');
+			});
+
+			it('should not have disabled attribute on links (uses aria-disabled)', () => {
+				const wrapper = render(N8nButton, {
+					props: {
+						href: 'https://example.com',
+						disabled: true,
+						variant: 'solid',
+					},
+					slots: { default: 'Disabled Link' },
+					global: { stubs },
+				});
+				const link = wrapper.container.querySelector('a');
+				expect(link).toHaveAttribute('aria-disabled', 'true');
+			});
+		});
 	});
 });
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
index f5f7253ad41..6384fdca84a 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
@@ -3,370 +3,412 @@ import { computed, useAttrs, useCssModule, watchEffect } from 'vue';
 
 import type { IconSize } from '../../types';
 import type { ButtonProps } from '../../types/button';
+import { cn } from '../../utils/cn';
 import N8nIcon from '../N8nIcon';
-import N8nSpinner from '../N8nSpinner';
 
 const $style = useCssModule();
 const attrs = useAttrs();
 
-defineOptions({ name: 'N8nButton' });
+defineOptions({
+	name: 'N8nButton',
+	inheritAttrs: false,
+});
+
 const props = withDefaults(defineProps<ButtonProps>(), {
-	label: '',
-	type: 'primary',
+	variant: 'solid',
 	size: 'medium',
 	loading: false,
 	disabled: false,
-	outline: false,
-	text: false,
-	block: false,
-	active: false,
-	square: false,
-	element: 'button',
 });
 
-watchEffect(() => {
-	if (props.element === 'a' && !props.href) {
-		console.error('n8n-button:href is required for link buttons');
-	}
+// Map legacy size values to current ones
+const effectiveSize = computed(() => {
+	if (props.size === 'mini' || props.size === 'xmini') return 'xsmall';
+	return props.size;
+});
+
+// Map legacy variant values to current ones
+const effectiveVariant = computed(() => {
+	if (props.variant === 'highlight') return 'ghost';
+	if (props.variant === 'highlight-fill') return 'ghost';
+	return props.variant;
+});
+
+const computedIconSize = computed((): IconSize | undefined => {
+	if (props.iconSize) return props.iconSize;
+	if (effectiveSize.value === 'xsmall') return 'xsmall';
+	return effectiveSize.value as IconSize;
+});
+
+const componentTag = computed(() => {
+	if (props.href) return 'a';
+	return 'button';
+});
+
+const buttonType = computed(() => {
+	if (componentTag.value === 'a') return undefined;
+	return (attrs.type as string | undefined) ?? 'button';
 });
 
-const ariaBusy = computed(() => (props.loading ? 'true' : undefined));
-const ariaDisabled = computed(() => (props.disabled ? 'true' : undefined));
 const isDisabled = computed(() => props.disabled || props.loading);
 
-const iconSize = computed(
-	(): IconSize | undefined =>
-		props.iconSize ?? (props.size === 'xmini' || props.size === 'mini' ? 'xsmall' : props.size),
+const classes = computed(() =>
+	cn(
+		'button',
+		$style.button,
+		$style[effectiveVariant.value],
+		$style[effectiveSize.value],
+		props.loading && $style.loading,
+		props.iconOnly && $style.iconOnly,
+		props.disabled && $style.disabled,
+		props.class,
+	),
 );
 
-const classes = computed(() => {
-	return (
-		`button ${$style.button} ${$style[props.type]}` +
-		`${props.size ? ` ${$style[props.size]}` : ''}` +
-		`${props.outline ? ` ${$style.outline}` : ''}` +
-		`${props.loading ? ` ${$style.loading}` : ''}` +
-		`${props.float ? ` ${$style[`float-${props.float}`]}` : ''}` +
-		`${props.text ? ` ${$style.text}` : ''}` +
-		`${props.disabled ? ` ${$style.disabled}` : ''}` +
-		`${props.block ? ` ${$style.block}` : ''}` +
-		`${props.active ? ` ${$style.active}` : ''}` +
-		`${props.icon || props.loading ? ` ${$style.withIcon}` : ''}` +
-		`${props.square ? ` ${$style.square}` : ''}`
-	);
-});
+// Accessibility warning for icon-only buttons without accessible labels
+if (import.meta.env.DEV) {
+	watchEffect(() => {
+		if (props.iconOnly && !attrs['aria-label'] && !attrs.title) {
+			console.warn(
+				'[N8nButton] Icon-only buttons should have an accessible label. ' +
+					'Add aria-label or title attribute.',
+			);
+		}
+	});
+}
+
+const handleClick = (event: MouseEvent) => {
+	if (props.href && isDisabled.value) {
+		event.preventDefault();
+	}
+};
 </script>
 
 <template>
 	<component
-		:is="element"
-		:class="classes"
-		:disabled="isDisabled"
-		:aria-disabled="ariaDisabled"
-		:aria-busy="ariaBusy"
+		:is="componentTag"
+		v-bind="attrs"
+		:type="buttonType"
 		:href="href"
+		:rel="href ? 'nofollow noopener noreferrer' : undefined"
+		:disabled="componentTag === 'button' ? isDisabled || undefined : undefined"
+		:aria-disabled="isDisabled || undefined"
+		:aria-busy="loading || undefined"
+		:tabindex="componentTag === 'a' && isDisabled ? -1 : undefined"
+		:class="classes"
 		aria-live="polite"
-		v-bind="{
-			...attrs,
-			...(props.nativeType ? { type: props.nativeType } : {}),
-		}"
+		@click="handleClick"
 	>
-		<span v-if="loading || icon" :class="$style.icon">
-			<N8nSpinner v-if="loading" :size="iconSize" />
-			<N8nIcon v-else-if="icon" :icon="icon" :size="iconSize" />
-		</span>
-		<span v-if="label">{{ label }}</span>
-		<template v-else-if="$slots.default"><slot /></template>
+		<Transition name="n8n-button-fade">
+			<div v-if="loading" :class="$style['loading-container']">
+				<div :class="[$style['loading-spinner'], 'n8n-spinner']">
+					<N8nIcon icon="loader" :size="computedIconSize" transform-origin="center" />
+				</div>
+			</div>
+		</Transition>
+
+		<div :class="$style['button-inner']">
+			<slot name="icon">
+				<N8nIcon v-if="icon && !loading" :icon="icon" :size="computedIconSize" />
+			</slot>
+
+			<span v-if="label">{{ label }}</span>
+			<slot v-else />
+		</div>
 	</component>
 </template>
 
 <style lang="scss">
-@use './Button';
-
-.el-button {
-	@include Button.n8n-button(true);
-
-	--button--padding--vertical: var(--spacing--2xs);
-	--button--padding--horizontal: var(--spacing--xs);
-	--button--font-size: var(--font-size--2xs);
-
-	+ .el-button {
-		margin-left: var(--spacing--2xs);
-	}
-
-	&.btn--cancel,
-	&.el-color-dropdown__link-btn {
-		@include Button.n8n-button-secondary;
-	}
-}
+// Import legacy override classes (n8n-button--success, n8n-button--warning, etc.)
+// These are global classes added by the migration codemod for legacy button types
+@use './Button.legacy';
 </style>
 
 <style lang="scss" module>
-@use './Button';
-@use '../../css/mixins/utils';
-@use '../../css/common/var';
+@use '../../css/mixins/focus';
 
 .button {
-	@include Button.n8n-button;
-}
+	appearance: none;
+	touch-action: manipulation;
+	-webkit-tap-highlight-color: transparent;
+	user-select: none;
+	width: fit-content;
+	display: grid;
+	font-weight: var(--font-weight--medium);
+	line-height: 1;
+	cursor: pointer;
+	text-decoration: none;
 
-$loading-overlay-background-color: rgba(255, 255, 255, 0);
+	height: var(--button--height);
+	padding: var(--button--padding);
+	border-radius: var(--button--radius);
+	font-size: var(--button--font-size);
 
-/**
- * Colors
- */
-
-.secondary {
-	@include Button.n8n-button-secondary;
-}
-
-.highlight {
-	@include Button.n8n-button-highlight;
-}
-
-.highlightFill {
-	@include Button.n8n-button-highlight-fill;
-}
-
-.tertiary {
-	@include Button.n8n-button-secondary;
-}
-
-.success {
-	@include Button.n8n-button-success;
-}
-
-.warning {
-	@include Button.n8n-button-warning;
-}
-
-.danger {
-	@include Button.n8n-button-danger;
-}
-
-/**
- * Sizes
- */
-
-.xmini {
-	--button--padding--vertical: var(--spacing--4xs);
-	--button--padding--horizontal: var(--spacing--3xs);
-	--button--font-size: var(--font-size--3xs);
-
-	&.square {
-		height: 22px;
-		width: 22px;
-	}
-}
-
-.mini {
-	--button--padding--vertical: var(--spacing--4xs);
-	--button--padding--horizontal: var(--spacing--2xs);
-	--button--font-size: var(--font-size--2xs);
-
-	&.square {
-		height: 22px;
-		width: 22px;
-	}
-}
-
-.small {
-	--button--padding--vertical: var(--spacing--3xs);
-	--button--padding--horizontal: var(--spacing--xs);
-	--button--font-size: var(--font-size--2xs);
-
-	&.square {
-		height: 26px;
-		width: 26px;
-	}
-}
-
-.medium {
-	--button--padding--vertical: var(--spacing--2xs);
-	--button--padding--horizontal: var(--spacing--xs);
-	--button--font-size: var(--font-size--2xs);
-
-	&.square {
-		height: 30px;
-		width: 30px;
-	}
-}
-
-.large {
-	&.square {
-		height: 42px;
-		width: 42px;
-	}
-}
-
-.xlarge {
-	--button--padding--vertical: var(--spacing--xs);
-	--button--padding--horizontal: var(--spacing--sm);
-	--button--font-size: var(--font-size--md);
-
-	&.square {
-		height: 46px;
-		width: 46px;
-	}
-}
-
-/**
- * Modifiers
- */
-.outline {
 	--button--color--background: transparent;
-	--button--color--background--disabled: transparent;
-
-	&.primary {
-		--button--color--text: var(--color--primary);
-		--button--color--text--disabled: var(--color--primary--tint-1);
-		--button--border-color--disabled: var(--color--primary--tint-1);
-		--button--color--background--disabled: transparent;
-	}
-
-	&.success {
-		--button--color--text: var(--color--success);
-		--button--border-color: var(--color--success);
-		--button--border-color--hover: var(--color--success);
-		--button--color--background--hover: var(--color--success);
-		--button--color--background--active: var(--color--success);
-		--button--color--text--disabled: var(--color--success--tint-1);
-		--button--border-color--disabled: var(--color--success--tint-1);
-		--button--color--background--disabled: transparent;
-	}
-
-	&.warning {
-		--button--color--text: var(--color--warning);
-		--button--border-color: var(--color--warning);
-		--button--border-color--hover: var(--color--warning);
-		--button--color--background--hover: var(--color--warning);
-		--button--color--background--active: var(--color--warning);
-		--button--color--text--disabled: var(--color--warning--tint-1);
-		--button--border-color--disabled: var(--color--warning--tint-1);
-		--button--color--background--disabled: transparent;
-	}
-
-	&.danger {
-		--button--color--text: var(--color--danger);
-		--button--border-color: var(--color--danger);
-		--button--border-color--hover: var(--color--danger);
-		--button--color--background--hover: var(--color--danger);
-		--button--color--background--active: var(--color--danger);
-		--button--color--text--disabled: var(--color--danger--tint-3);
-		--button--border-color--disabled: var(--color--danger--tint-3);
-		--button--color--background--disabled: transparent;
-	}
-}
-
-.text {
-	--button--color--text: var(--text-button--color--text--secondary);
+	--button--color--background-hover: transparent;
+	--button--color--background-active: transparent;
+	--button--color: light-dark(var(--color--neutral-900), var(--color--neutral-100));
+	--button--shadow: none;
+	--button--shadow--hover: none;
+	--button--shadow--active: none;
 	--button--border-color: transparent;
-	--button--color--background: transparent;
 	--button--border-color--hover: transparent;
-	--button--color--background--hover: transparent;
 	--button--border-color--active: transparent;
-	--button--color--background--active: transparent;
-	--button--border-color--focus: transparent;
-	--button--color--background--focus: transparent;
-	--button--border-color--disabled: transparent;
-	--button--color--background--disabled: transparent;
 
-	&:focus {
-		outline: 0;
-	}
+	background-color: var(--button--color--background);
+	color: var(--button--color);
+	box-shadow: var(--button--shadow);
+	border: 1px solid var(--button--border-color);
 
-	&.primary {
-		--button--color--text: var(--color--primary);
-		--button--color--text--hover: var(--color--primary--shade-1);
-		--button--color--text--active: var(--color--primary--shade-1);
-		--button--color--text--focus: var(--color--primary);
-		--button--color--text--disabled: var(--color--primary--tint-1);
-	}
-
-	&.success {
-		--button--color--text: var(--color--success);
-		--button--color--text--hover: var(--color--success--shade-1);
-		--button--color--text--active: var(--color--success--shade-1);
-		--button--color--text--focus: var(--color--success);
-		--button--color--text--disabled: var(--color--success--tint-1);
-	}
-
-	&.warning {
-		--button--color--text: var(--color--warning);
-		--button--color--text--hover: var(--color--warning--shade-1);
-		--button--color--text--active: var(--color--warning--shade-1);
-		--button--color--text--focus: var(--color--warning);
-		--button--color--text--disabled: var(--color--warning--tint-1);
-	}
-
-	&.danger {
-		--button--color--text: var(--color--danger);
-		--button--color--text--hover: var(--color--danger--shade-1);
-		--button--color--text--active: var(--color--danger--shade-1);
-		--button--color--text--focus: var(--color--danger);
-		--button--color--text--disabled: var(--color--danger--tint-3);
+	> * {
+		grid-area: 1 / 1;
 	}
 
 	&:hover {
-		text-decoration: underline;
+		background-color: var(--button--color--background-hover);
+		box-shadow: var(--button--shadow--hover);
+		border-color: var(--button--border-color--hover);
 	}
-}
 
-.loading {
-	position: relative;
-	pointer-events: none;
-
-	&:before {
-		pointer-events: none;
-		content: '';
-		position: absolute;
-		left: -1px;
-		top: -1px;
-		right: -1px;
-		bottom: -1px;
-		border-radius: inherit;
+	&:active {
+		background-color: var(--button--color--background-active);
+		box-shadow: var(--button--shadow--active);
+		border-color: var(--button--border-color--active);
 	}
-}
 
-.disabled {
-	&,
-	&:hover,
-	&:active,
 	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@include focus.focus-ring;
+	}
+
+	&.xsmall {
+		--button--height: 1.5rem;
+		--button--padding: 0 var(--spacing--2xs);
+		--button--radius: var(--radius--2xs);
+		--button--font-size: var(--font-size--2xs);
+	}
+
+	&.small {
+		--button--height: 1.75rem;
+		--button--padding: 0 var(--spacing--xs);
+		--button--radius: var(--radius--2xs);
+		--button--font-size: var(--font-size--xs);
+	}
+
+	&.medium {
+		--button--height: 2rem;
+		--button--padding: 0 var(--spacing--xs);
+		--button--radius: var(--radius--xs);
+		--button--font-size: var(--font-size--sm);
+	}
+
+	&.large {
+		--button--height: 2.25rem;
+		--button--padding: 0 var(--spacing--sm);
+		--button--radius: var(--radius--xs);
+		--button--font-size: var(--font-size--md);
+	}
+
+	&.xlarge {
+		--button--height: 2.5rem;
+		--button--padding: 0 var(--spacing--sm);
+		--button--radius: var(--radius--xs);
+		--button--font-size: var(--font-size--md);
+	}
+
+	&.solid {
+		--button--color--background: var(--color--orange-400);
+		--button--color--background-hover: var(--color--orange-500);
+		--button--color--background-active: var(--color--orange-600);
+		--button--color: var(--color--neutral-white);
+		--button--shadow: 0 1px 3px 0
+			light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200));
+		--button--shadow--hover: 0 1px 3px 0
+			light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200));
+		--button--shadow--active: 0 1px 3px 0
+			light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200));
+		--button--border-color: var(--color--orange-400);
+		--button--border-color--hover: var(--color--orange-500);
+		--button--border-color--active: var(--color--orange-600);
+	}
+
+	&.subtle {
+		--button--color--background: light-dark(var(--color--neutral-white), var(--color--neutral-800));
+		--button--color--background-hover: light-dark(
+			var(--color--neutral-150),
+			var(--color--neutral-700)
+		);
+		--button--color--background-active: light-dark(
+			var(--color--neutral-200),
+			var(--color--neutral-600)
+		);
+		--button--shadow:
+			0 1px 2px light-dark(var(--color--black-alpha-100), var(--color--black-alpha-300)),
+			0 0 0 1px light-dark(transparent, var(--color--black-alpha-100));
+		--button--shadow--hover:
+			0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)),
+			0 0 0 1px light-dark(transparent, var(--color--black-alpha-100));
+		--button--shadow--active:
+			0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)),
+			0 0 0 1px light-dark(transparent, var(--color--black-alpha-100));
+		--button--border-color: light-dark(
+			var(--color--black-alpha-200),
+			var(--color--white-alpha-100)
+		);
+		--button--border-color--hover: light-dark(
+			var(--color--black-alpha-200),
+			var(--color--white-alpha-300)
+		);
+		--button--border-color--active: light-dark(
+			var(--color--black-alpha-300),
+			var(--color--white-alpha-300)
+		);
+	}
+
+	&.outline {
+		--button--color--background: transparent;
+		--button--color--background-hover: light-dark(
+			var(--color--neutral-150),
+			var(--color--white-alpha-100)
+		);
+		--button--color--background-active: light-dark(
+			var(--color--black-alpha-200),
+			var(--color--white-alpha-200)
+		);
+		--button--border-color: light-dark(
+			var(--color--black-alpha-200),
+			var(--color--white-alpha-100)
+		);
+		--button--border-color--hover: light-dark(
+			var(--color--black-alpha-200),
+			var(--color--white-alpha-200)
+		);
+		--button--border-color--active: light-dark(
+			var(--color--black-alpha-300),
+			var(--color--white-alpha-300)
+		);
+	}
+
+	&.ghost {
+		--button--color--background: transparent;
+		--button--color--background-hover: light-dark(
+			var(--color--black-alpha-100),
+			var(--color--white-alpha-100)
+		);
+		--button--color--background-active: light-dark(
+			var(--color--black-alpha-200),
+			var(--color--white-alpha-200)
+		);
+		--button--border-color: transparent;
+	}
+
+	&.destructive {
+		--button--color--background: light-dark(var(--color--red-500), var(--color--red-600));
+		--button--color--background-hover: light-dark(var(--color--red-600), var(--color--red-500));
+		--button--color--background-active: light-dark(var(--color--red-600), var(--color--red-400));
+		--button--color: var(--color--neutral-white);
+		--button--shadow: light-dark(
+			0 1px 3px 0 var(--color--black-alpha-100),
+			0 1px 3px 0 var(--color--black-alpha-200)
+		);
+		--button--shadow--hover: light-dark(
+			0 1px 3px 0 var(--color--black-alpha-100),
+			0 1px 3px 0 var(--color--black-alpha-200)
+		);
+		--button--shadow--active: light-dark(
+			0 1px 3px 0 var(--color--black-alpha-100),
+			0 1px 3px 0 var(--color--black-alpha-200)
+		);
+		--button--border-color: light-dark(var(--color--red-500), var(--color--red-600));
+		--button--border-color--hover: light-dark(var(--color--red-600), var(--color--red-500));
+		--button--border-color--active: light-dark(var(--color--red-600), var(--color--red-400));
+	}
+
+	&.disabled {
+		opacity: 0.5;
 		cursor: not-allowed;
-		background-image: none;
+	}
+
+	&.loading {
+		pointer-events: none;
+	}
+
+	&.iconOnly {
+		width: var(--button--height);
+		padding: 0;
 	}
 }
 
-.transparent {
-	--button--color--background: transparent;
-	--button--color--background--active: transparent;
+.loading-container {
+	height: auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
-.withIcon {
-	display: inline-flex;
-	justify-content: center;
+.button-inner {
+	display: flex;
 	align-items: center;
-}
-
-.icon {
-	display: inline-flex;
 	justify-content: center;
-	align-items: center;
+	gap: var(--spacing--3xs);
+	white-space: nowrap;
 
-	svg {
-		display: block;
+	/** NOTE (@heymynameisrob): Covers legacy prop label which wraps in span **/
+	> span {
+		white-space: nowrap;
 	}
 }
 
-.block {
-	width: 100%;
+.loading-container + .button-inner {
+	pointer-events: none;
+	opacity: 0;
 }
 
-.float-left {
-	float: left;
+.loading-spinner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	animation: spin 1s linear infinite;
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
 }
 
-.float-right {
-	float: right;
+/* TODO: Move to global animations css library */
+:global(.n8n-button-fade-enter-active),
+:global(.n8n-button-fade-leave-active) {
+	--easing--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+	transition:
+		opacity 0.2s var(--easing--ease-out),
+		transform 0.2s var(--easing--ease-out);
+
+	@media (prefers-reduced-motion: reduce) {
+		transition: opacity 0.1s;
+	}
+}
+
+:global(.n8n-button-fade-enter-from),
+:global(.n8n-button-fade-leave-to) {
+	opacity: 0;
+	transform: translateY(4px);
+	filter: blur(2px);
+
+	@media (prefers-reduced-motion: reduce) {
+		transform: none;
+		filter: none;
+	}
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }
 </style>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/__snapshots__/Button.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/N8nButton/__snapshots__/Button.test.ts.snap
index 1c0b76ffd81..cc9424e45cd 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/__snapshots__/Button.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/__snapshots__/Button.test.ts.snap
@@ -1,23 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button class="button button primary medium withIcon" aria-live="polite"><span class="icon"><n8n-icon-stub icon="circle-plus" size="medium" spin="false"></n8n-icon-stub></span>Button</button>"`;
-
-exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button class="button button primary medium loading withIcon" disabled="" aria-busy="true" aria-live="polite"><span class="icon"><n8n-spinner-stub size="medium" type="dots"></n8n-spinner-stub></span>Button</button>"`;
-
-exports[`components > N8nButton > props > square > should render square button 1`] = `
-"<button class="button button primary medium square" aria-live="polite">
-  <!--v-if--><span>48</span>
-</button>"
-`;
-
-exports[`components > N8nButton > props > type > should render highlight button 1`] = `
-"<button class="button button highlight medium" aria-live="polite">
-  <!--v-if-->Button
-</button>"
-`;
-
-exports[`components > N8nButton > should render correctly 1`] = `
-"<button class="button button primary medium" aria-live="polite">
-  <!--v-if-->Button
+exports[`components > N8nButton > props > icon > should render icon button with icon name 1`] = `
+"<button type="button" class="button button solid medium" aria-live="polite">
+  <transition-stub name="n8n-button-fade" appear="false" persisted="false" css="true">
+    <!--v-if-->
+  </transition-stub>
+  <div class="button-inner">
+    <n8n-icon-stub icon="circle-plus" size="medium" spin="false"></n8n-icon-stub>Button
+  </div>
 </button>"
 `;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDatatable/__snapshots__/Datatable.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/N8nDatatable/__snapshots__/Datatable.test.ts.snap
index a0312811043..483c3629ce6 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nDatatable/__snapshots__/Datatable.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/N8nDatatable/__snapshots__/Datatable.test.ts.snap
@@ -19,7 +19,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">Richard Hendricks</span></td>
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">29</span></td>
             <td data-v-c73ff18f="" class="">
-              <n8n-button-stub data-v-c73ff18f="" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="primary" column="[object Object]"></n8n-button-stub>
+              <n8n-button-stub data-v-c73ff18f="" variant="solid" size="medium" loading="false" icononly="false" disabled="false" class="" column="[object Object]"></n8n-button-stub>
             </td>
           </tr>
           <tr data-v-c73ff18f="">
@@ -27,7 +27,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">Bertram Gilfoyle</span></td>
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">44</span></td>
             <td data-v-c73ff18f="" class="">
-              <n8n-button-stub data-v-c73ff18f="" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="primary" column="[object Object]"></n8n-button-stub>
+              <n8n-button-stub data-v-c73ff18f="" variant="solid" size="medium" loading="false" icononly="false" disabled="false" class="" column="[object Object]"></n8n-button-stub>
             </td>
           </tr>
           <tr data-v-c73ff18f="">
@@ -35,7 +35,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">Dinesh Chugtai</span></td>
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">31</span></td>
             <td data-v-c73ff18f="" class="">
-              <n8n-button-stub data-v-c73ff18f="" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="primary" column="[object Object]"></n8n-button-stub>
+              <n8n-button-stub data-v-c73ff18f="" variant="solid" size="medium" loading="false" icononly="false" disabled="false" class="" column="[object Object]"></n8n-button-stub>
             </td>
           </tr>
           <tr data-v-c73ff18f="">
@@ -43,7 +43,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">Jared Dunn </span></td>
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">38</span></td>
             <td data-v-c73ff18f="" class="">
-              <n8n-button-stub data-v-c73ff18f="" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="primary" column="[object Object]"></n8n-button-stub>
+              <n8n-button-stub data-v-c73ff18f="" variant="solid" size="medium" loading="false" icononly="false" disabled="false" class="" column="[object Object]"></n8n-button-stub>
             </td>
           </tr>
           <tr data-v-c73ff18f="">
@@ -51,7 +51,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">Richard Hendricks</span></td>
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">29</span></td>
             <td data-v-c73ff18f="" class="">
-              <n8n-button-stub data-v-c73ff18f="" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="primary" column="[object Object]"></n8n-button-stub>
+              <n8n-button-stub data-v-c73ff18f="" variant="solid" size="medium" loading="false" icononly="false" disabled="false" class="" column="[object Object]"></n8n-button-stub>
             </td>
           </tr>
           <tr data-v-c73ff18f="">
@@ -59,7 +59,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">Bertram Gilfoyle</span></td>
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">44</span></td>
             <td data-v-c73ff18f="" class="">
-              <n8n-button-stub data-v-c73ff18f="" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="primary" column="[object Object]"></n8n-button-stub>
+              <n8n-button-stub data-v-c73ff18f="" variant="solid" size="medium" loading="false" icononly="false" disabled="false" class="" column="[object Object]"></n8n-button-stub>
             </td>
           </tr>
           <tr data-v-c73ff18f="">
@@ -67,7 +67,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">Dinesh Chugtai</span></td>
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">31</span></td>
             <td data-v-c73ff18f="" class="">
-              <n8n-button-stub data-v-c73ff18f="" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="primary" column="[object Object]"></n8n-button-stub>
+              <n8n-button-stub data-v-c73ff18f="" variant="solid" size="medium" loading="false" icononly="false" disabled="false" class="" column="[object Object]"></n8n-button-stub>
             </td>
           </tr>
           <tr data-v-c73ff18f="">
@@ -75,7 +75,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">Jared Dunn </span></td>
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">38</span></td>
             <td data-v-c73ff18f="" class="">
-              <n8n-button-stub data-v-c73ff18f="" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="primary" column="[object Object]"></n8n-button-stub>
+              <n8n-button-stub data-v-c73ff18f="" variant="solid" size="medium" loading="false" icononly="false" disabled="false" class="" column="[object Object]"></n8n-button-stub>
             </td>
           </tr>
           <tr data-v-c73ff18f="">
@@ -83,7 +83,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">Richard Hendricks</span></td>
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">29</span></td>
             <td data-v-c73ff18f="" class="">
-              <n8n-button-stub data-v-c73ff18f="" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="primary" column="[object Object]"></n8n-button-stub>
+              <n8n-button-stub data-v-c73ff18f="" variant="solid" size="medium" loading="false" icononly="false" disabled="false" class="" column="[object Object]"></n8n-button-stub>
             </td>
           </tr>
           <tr data-v-c73ff18f="">
@@ -91,7 +91,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">Bertram Gilfoyle</span></td>
             <td data-v-c73ff18f="" class=""><span data-v-c73ff18f="">44</span></td>
             <td data-v-c73ff18f="" class="">
-              <n8n-button-stub data-v-c73ff18f="" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="primary" column="[object Object]"></n8n-button-stub>
+              <n8n-button-stub data-v-c73ff18f="" variant="solid" size="medium" loading="false" icononly="false" disabled="false" class="" column="[object Object]"></n8n-button-stub>
             </td>
           </tr>
         </tbody>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nHeaderAction/HeaderAction.vue b/packages/frontend/@n8n/design-system/src/components/N8nHeaderAction/HeaderAction.vue
index 362293cad1a..90bc3e70f76 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nHeaderAction/HeaderAction.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nHeaderAction/HeaderAction.vue
@@ -42,14 +42,13 @@ const emit = defineEmits<{
 	<N8nTooltip :disabled="!tooltip" :show-after="TOOLTIP_DELAY_MS">
 		<template #content>{{ tooltip || label }}</template>
 		<N8nIconButton
-			type="secondary"
-			text
+			variant="ghost"
 			size="small"
 			icon-size="large"
 			:icon="icon"
 			:aria-label="label"
 			:data-test-id="testId"
-			:class="{ [$style.dangerAction]: danger }"
+			:class="danger ? $style.dangerAction : undefined"
 			v-bind="$attrs"
 			@click.stop="emit('click', $event)"
 		/>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.vue b/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.vue
index bc038f1a69a..a899e838277 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.vue
@@ -3,17 +3,14 @@ import type { IconButtonProps } from '../../types/button';
 import N8nButton from '../N8nButton';
 
 defineOptions({ name: 'N8nIconButton' });
-withDefaults(defineProps<IconButtonProps>(), {
-	type: 'primary',
+const props = withDefaults(defineProps<IconButtonProps>(), {
 	size: 'medium',
 	loading: false,
-	outline: false,
-	text: false,
 	disabled: false,
-	active: false,
+	iconOnly: true,
 });
 </script>
 
 <template>
-	<N8nButton square v-bind="{ ...$attrs, ...$props }" />
+	<N8nButton v-bind="{ ...$attrs, ...props }" />
 </template>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue
index 2b14d7913b5..149d1613e0f 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue
@@ -185,9 +185,9 @@ async function loadEmojiMetadataMap() {
 					:class="$style['icon-button']"
 					:icon="model.value"
 					:size="buttonSize"
-					:square="true"
+					icon-only
 					:disabled="isReadOnly"
-					type="tertiary"
+					variant="subtle"
 					data-test-id="icon-picker-button"
 					@click="togglePopup"
 				/>
@@ -195,8 +195,8 @@ async function loadEmojiMetadataMap() {
 					v-else-if="model.type === 'emoji'"
 					:class="$style['emoji-button']"
 					:size="buttonSize"
-					:square="true"
-					type="tertiary"
+					icon-only
+					variant="subtle"
 					data-test-id="icon-picker-button"
 					:disabled="isReadOnly"
 					@click="togglePopup"
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/__snapshots__/N8nPromptInput.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/__snapshots__/N8nPromptInput.test.ts.snap
index 0ce13a752fa..2c5bd8f86e4 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/__snapshots__/N8nPromptInput.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/__snapshots__/N8nPromptInput.test.ts.snap
@@ -40,13 +40,23 @@ exports[`N8nPromptInput > rendering > should render correctly with default props
         <button
           aria-disabled="true"
           aria-live="polite"
-          class="button button primary small disabled withIcon square sendButton sendButton"
+          class="button button solid small iconOnly disabled sendButton"
           data-test-id="send-message-button"
           disabled=""
+          type="button"
         >
-          <span
-            class="icon"
+          <transition-stub
+            appear="false"
+            css="true"
+            name="n8n-button-fade"
+            persisted="false"
           >
+            <!--v-if-->
+          </transition-stub>
+          <div
+            class="button-inner"
+          >
+            
             <svg
               aria-hidden="true"
               class="n8n-icon"
@@ -66,10 +76,11 @@ exports[`N8nPromptInput > rendering > should render correctly with default props
                 stroke-width="2"
               />
             </svg>
-          </span>
-          
-          
-          
+            
+            
+            
+            
+          </div>
         </button>
       </div>
     </div>
@@ -119,12 +130,22 @@ exports[`N8nPromptInput > rendering > should render streaming state without disa
         
         <button
           aria-live="polite"
-          class="button button primary small withIcon square stopButton stopButton"
+          class="button button solid small iconOnly stopButton"
           data-test-id="send-message-button"
+          type="button"
         >
-          <span
-            class="icon"
+          <transition-stub
+            appear="false"
+            css="true"
+            name="n8n-button-fade"
+            persisted="false"
           >
+            <!--v-if-->
+          </transition-stub>
+          <div
+            class="button-inner"
+          >
+            
             <svg
               aria-hidden="true"
               class="n8n-icon"
@@ -145,8 +166,10 @@ exports[`N8nPromptInput > rendering > should render streaming state without disa
                 width="10"
               />
             </svg>
-          </span>
-          <!--v-if-->
+            
+            
+            
+          </div>
         </button>
       </div>
     </div>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.test.ts
index ee2adc0917d..40e324f69ea 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.test.ts
@@ -11,7 +11,12 @@ describe('N8nSendStopButton', () => {
 		it('should render send button by default', () => {
 			const { container } = renderComponent({
 				global: {
-					stubs: ['N8nButton'],
+					stubs: {
+						N8nButton: {
+							inheritAttrs: true,
+							template: '<button v-bind="$attrs"></button>',
+						},
+					},
 				},
 			});
 
@@ -28,7 +33,12 @@ describe('N8nSendStopButton', () => {
 					streaming: true,
 				},
 				global: {
-					stubs: ['N8nButton'],
+					stubs: {
+						N8nButton: {
+							inheritAttrs: true,
+							template: '<button v-bind="$attrs"></button>',
+						},
+					},
 				},
 			});
 
@@ -47,7 +57,7 @@ describe('N8nSendStopButton', () => {
 				global: {
 					stubs: {
 						N8nButton: {
-							props: ['size', 'type', 'square', 'disabled', 'icon', 'iconSize'],
+							props: ['size', 'variant', 'iconOnly', 'disabled', 'icon', 'iconSize'],
 							template: '<button :class="{sendButton: true}" :data-size="size"></button>',
 						},
 					},
@@ -66,7 +76,7 @@ describe('N8nSendStopButton', () => {
 				global: {
 					stubs: {
 						N8nButton: {
-							props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
+							props: ['disabled', 'variant', 'iconOnly', 'icon', 'iconSize', 'size'],
 							template: '<button :disabled="disabled" :class="{sendButton: true}"></button>',
 						},
 					},
@@ -84,7 +94,7 @@ describe('N8nSendStopButton', () => {
 				global: {
 					stubs: {
 						N8nButton: {
-							props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
+							props: ['disabled', 'variant', 'iconOnly', 'icon', 'iconSize', 'size'],
 							template: '<button @click="$emit(\'click\')" :class="{sendButton: true}"></button>',
 							emits: ['click'],
 						},
@@ -107,7 +117,7 @@ describe('N8nSendStopButton', () => {
 				global: {
 					stubs: {
 						N8nButton: {
-							props: ['type', 'square', 'size', 'icon', 'iconSize'],
+							props: ['variant', 'iconOnly', 'size', 'icon', 'iconSize'],
 							template: '<button @click="$emit(\'click\')" :class="{stopButton: true}"></button>',
 							emits: ['click'],
 						},
@@ -130,7 +140,7 @@ describe('N8nSendStopButton', () => {
 				global: {
 					stubs: {
 						N8nButton: {
-							props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
+							props: ['disabled', 'variant', 'iconOnly', 'icon', 'iconSize', 'size'],
 							template:
 								'<button :disabled="disabled" @click="!disabled && $emit(\'click\')" :class="{sendButton: true}"></button>',
 							emits: ['click'],
@@ -156,13 +166,13 @@ describe('N8nSendStopButton', () => {
 				global: {
 					stubs: {
 						N8nButton: {
-							props: ['type', 'size', 'iconSize', 'square', 'icon', 'disabled'],
+							props: ['variant', 'size', 'iconSize', 'iconOnly', 'icon', 'disabled'],
 							template: `
 								<button
-									:data-type="type"
+									:data-variant="variant"
 									:data-size="size"
 									:data-icon-size="iconSize"
-									:data-square="square"
+									:data-icon-only="iconOnly"
 									:data-icon="icon"
 									:disabled="disabled"
 									:class="{sendButton: true}"
@@ -173,10 +183,10 @@ describe('N8nSendStopButton', () => {
 			});
 
 			const button = container.querySelector('button');
-			expect(button).toHaveAttribute('data-type', 'primary');
+			expect(button).toHaveAttribute('data-variant', 'solid');
 			expect(button).toHaveAttribute('data-size', 'medium');
 			expect(button).toHaveAttribute('data-icon-size', 'large');
-			expect(button).toHaveAttribute('data-square', 'true');
+			expect(button).toHaveAttribute('data-icon-only', 'true');
 			expect(button).toHaveAttribute('data-icon', 'arrow-up');
 			expect(button).not.toHaveAttribute('disabled');
 		});
@@ -190,12 +200,12 @@ describe('N8nSendStopButton', () => {
 				global: {
 					stubs: {
 						N8nButton: {
-							props: ['type', 'size', 'square'],
+							props: ['variant', 'size', 'iconOnly'],
 							template: `
 								<button
-									:data-type="type"
+									:data-variant="variant"
 									:data-size="size"
-									:data-square="square"
+									:data-icon-only="iconOnly"
 									:class="{stopButton: true}"
 								></button>`,
 						},
@@ -204,9 +214,9 @@ describe('N8nSendStopButton', () => {
 			});
 
 			const button = container.querySelector('button');
-			expect(button).toHaveAttribute('data-type', 'primary');
+			expect(button).toHaveAttribute('data-variant', 'solid');
 			expect(button).toHaveAttribute('data-size', 'small');
-			expect(button).toHaveAttribute('data-square', '');
+			expect(button).toHaveAttribute('data-icon-only', '');
 		});
 	});
 
@@ -216,7 +226,7 @@ describe('N8nSendStopButton', () => {
 				global: {
 					stubs: {
 						N8nButton: {
-							props: ['size', 'type', 'square', 'icon', 'iconSize', 'disabled'],
+							props: ['size', 'variant', 'iconOnly', 'icon', 'iconSize', 'disabled'],
 							template: '<button :data-size="size" :class="{sendButton: true}"></button>',
 						},
 					},
@@ -230,7 +240,12 @@ describe('N8nSendStopButton', () => {
 		it('should default to not streaming', () => {
 			const { container } = renderComponent({
 				global: {
-					stubs: ['N8nButton'],
+					stubs: {
+						N8nButton: {
+							inheritAttrs: true,
+							template: '<button v-bind="$attrs"></button>',
+						},
+					},
 				},
 			});
 
@@ -246,7 +261,7 @@ describe('N8nSendStopButton', () => {
 				global: {
 					stubs: {
 						N8nButton: {
-							props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
+							props: ['disabled', 'variant', 'iconOnly', 'icon', 'iconSize', 'size'],
 							template:
 								'<button :disabled="disabled" :data-disabled="disabled" :class="{sendButton: true}"></button>',
 						},
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.vue b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.vue
index 2eb1f6b3836..edd8bfc3219 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.vue
@@ -32,21 +32,21 @@ function handleStop() {
 <template>
 	<N8nButton
 		v-if="streaming"
+		variant="solid"
+		icon-only
 		:class="$style.stopButton"
-		type="primary"
 		:size="size"
 		icon="filled-square"
 		icon-size="small"
-		square
 		@click="handleStop"
 	/>
 	<N8nButton
 		v-else
+		variant="solid"
 		:class="$style.sendButton"
-		type="primary"
 		:size="size"
 		icon-size="large"
-		:square="!label"
+		:icon-only="!label"
 		:icon="label ? undefined : 'arrow-up'"
 		:disabled="disabled"
 		@click="handleSend"
diff --git a/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.vue b/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.vue
index 6cf6a656c8e..08757034049 100644
--- a/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.vue
+++ b/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.vue
@@ -132,8 +132,8 @@ const handleDragEnd = () => {
 	<N8nPopover :class="$style.container" width="260px" max-height="300px" scroll-type="auto">
 		<template #trigger>
 			<N8nButton
+				variant="subtle"
 				icon="sliders-horizontal"
-				type="secondary"
 				:icon-size="iconSize"
 				:size="buttonSize"
 			>
diff --git a/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/__snapshots__/TableHeaderControlsButton.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/__snapshots__/TableHeaderControlsButton.test.ts.snap
index ca7c5bf4330..991522d7b8e 100644
--- a/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/__snapshots__/TableHeaderControlsButton.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/__snapshots__/TableHeaderControlsButton.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`TableHeaderControlsButton > Disabled columns > should render correctly when only disabled columns exist 1`] = `
 "<div class="container" width="260px" max-height="300px" scroll-type="auto">
   <trigger>
-    <n8n-button-stub icon="sliders-horizontal" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="secondary"></n8n-button-stub>
+    <n8n-button-stub icon="sliders-horizontal" variant="subtle" size="medium" loading="false" icononly="false" disabled="false" class="false"></n8n-button-stub>
   </trigger>
   <content>
     <div class="contentContainer">
@@ -17,7 +17,7 @@ exports[`TableHeaderControlsButton > Disabled columns > should render correctly
 exports[`TableHeaderControlsButton > should render correctly with all columns hidden 1`] = `
 "<div class="container" width="260px" max-height="300px" scroll-type="auto">
   <trigger>
-    <n8n-button-stub icon="sliders-horizontal" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="secondary"></n8n-button-stub>
+    <n8n-button-stub icon="sliders-horizontal" variant="subtle" size="medium" loading="false" icononly="false" disabled="false" class="false"></n8n-button-stub>
   </trigger>
   <content>
     <div class="contentContainer">
@@ -53,7 +53,7 @@ exports[`TableHeaderControlsButton > should render correctly with all columns hi
 exports[`TableHeaderControlsButton > should render correctly with all columns visible 1`] = `
 "<div class="container" width="260px" max-height="300px" scroll-type="auto">
   <trigger>
-    <n8n-button-stub icon="sliders-horizontal" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="secondary"></n8n-button-stub>
+    <n8n-button-stub icon="sliders-horizontal" variant="subtle" size="medium" loading="false" icononly="false" disabled="false" class="false"></n8n-button-stub>
   </trigger>
   <content>
     <div class="contentContainer">
@@ -107,7 +107,7 @@ exports[`TableHeaderControlsButton > should render correctly with all columns vi
 exports[`TableHeaderControlsButton > should render correctly with mixed visible and hidden columns 1`] = `
 "<div class="container" width="260px" max-height="300px" scroll-type="auto">
   <trigger>
-    <n8n-button-stub icon="sliders-horizontal" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="secondary"></n8n-button-stub>
+    <n8n-button-stub icon="sliders-horizontal" variant="subtle" size="medium" loading="false" icononly="false" disabled="false" class="false"></n8n-button-stub>
   </trigger>
   <content>
     <div class="contentContainer">
@@ -157,7 +157,7 @@ exports[`TableHeaderControlsButton > should render correctly with mixed visible
 exports[`TableHeaderControlsButton > should render correctly with no columns 1`] = `
 "<div class="container" width="260px" max-height="300px" scroll-type="auto">
   <trigger>
-    <n8n-button-stub icon="sliders-horizontal" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="secondary"></n8n-button-stub>
+    <n8n-button-stub icon="sliders-horizontal" variant="subtle" size="medium" loading="false" icononly="false" disabled="false" class="false"></n8n-button-stub>
   </trigger>
   <content>
     <div class="contentContainer">
diff --git a/packages/frontend/@n8n/design-system/src/types/button.ts b/packages/frontend/@n8n/design-system/src/types/button.ts
index a8461fc24c1..ba15af942b9 100644
--- a/packages/frontend/@n8n/design-system/src/types/button.ts
+++ b/packages/frontend/@n8n/design-system/src/types/button.ts
@@ -1,48 +1,43 @@
+import { type ClassValue } from 'clsx';
+
+import { type IconName } from '@n8n/design-system/components/N8nIcon/icons';
+
 import { type IconSize } from './icon';
-import type { TextFloat } from './text';
-import type { IconName } from '../components/N8nIcon/icons';
 
-const BUTTON_ELEMENT = ['button', 'a'] as const;
-export type ButtonElement = (typeof BUTTON_ELEMENT)[number];
+const BUTTON_VARIANT = ['solid', 'subtle', 'ghost', 'outline', 'destructive'] as const;
+export type ButtonVariant = (typeof BUTTON_VARIANT)[number];
 
-const BUTTON_TYPE = [
-	'primary',
-	'secondary',
-	'tertiary',
-	'success',
-	'warning',
-	'danger',
-	'highlight',
-	'highlightFill',
-] as const;
-export type ButtonType = (typeof BUTTON_TYPE)[number];
+/** @deprecated Use 'ghost' or 'subtle' instead */
+export type LegacyButtonVariant = 'highlight' | 'highlight-fill';
 
-const BUTTON_SIZE = ['xmini', 'mini', 'small', 'medium', 'large'] as const;
+const BUTTON_SIZE = ['mini', 'xmini', 'small', 'medium', 'large', 'xlarge', 'xsmall'] as const;
 export type ButtonSize = (typeof BUTTON_SIZE)[number];
 
-const BUTTON_NATIVE_TYPE = ['submit', 'reset', 'button'] as const;
-export type ButtonNativeType = (typeof BUTTON_NATIVE_TYPE)[number];
-
-export interface IconButtonProps {
-	active?: boolean;
-	disabled?: boolean;
-	float?: TextFloat;
-	icon?: IconName;
-	loading?: boolean;
-	outline?: boolean;
+export interface ButtonProps {
+	/** Determines the visual style of the button */
+	variant?: ButtonVariant | LegacyButtonVariant;
+	/** Determines the size of the button */
 	size?: ButtonSize;
+	/** If passed, the button will be rendered as a link */
+	href?: string;
+	/** If true, the button will show a loading spinner */
+	loading?: boolean;
+	/** If true, button is fixed square size (for icon-only buttons) */
+	iconOnly?: boolean;
+	/** If true, the button will be disabled */
+	disabled?: boolean;
+	/** Additional classes to apply to the button (accepts string, object, or array) */
+	class?: ClassValue;
+	/** @deprecated Use slot instead */
+	icon?: IconName;
 	iconSize?: IconSize;
-	text?: boolean;
-	type?: ButtonType;
-	nativeType?: ButtonNativeType;
+	/** @deprecated Use slot instead */
+	label?: string;
 }
 
-export interface ButtonProps extends IconButtonProps {
-	block?: boolean;
-	element?: ButtonElement;
-	href?: string;
-	label?: string;
-	square?: boolean;
+export interface IconButtonProps extends ButtonProps {
+	/** Icon is required for icon buttons */
+	icon: IconName;
 }
 
 export type IN8nButton = {
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/Button/Button.stories.ts b/packages/frontend/@n8n/design-system/src/v2/components/Button/Button.stories.ts
deleted file mode 100644
index d8771611d14..00000000000
--- a/packages/frontend/@n8n/design-system/src/v2/components/Button/Button.stories.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import type { StoryObj } from '@storybook/vue3-vite';
-
-import Button from './Button.vue';
-import N8nIcon from '../../../components/N8nIcon/Icon.vue';
-
-const meta = {
-	title: 'Components v2/Button',
-	component: Button,
-	argTypes: {
-		variant: {
-			control: 'select',
-			options: ['solid', 'subtle', 'outline', 'ghost', 'destructive'],
-		},
-		size: {
-			control: 'select',
-			options: ['xsmall', 'small', 'medium'],
-		},
-		loading: {
-			control: 'boolean',
-		},
-		icon: {
-			control: 'boolean',
-		},
-		disabled: {
-			control: 'boolean',
-		},
-		href: {
-			control: 'text',
-		},
-		default: {
-			control: 'text',
-			description: 'Button text content',
-		},
-	},
-	parameters: {
-		docs: {
-			source: { type: 'dynamic' },
-		},
-	},
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default = {
-	render: (args) => ({
-		components: { Button },
-		setup() {
-			return { args };
-		},
-		template: `
-		<div style="display: grid; place-items: center;">
-			<Button v-bind="args">{{ args.default }}</Button>
-		</div>
-		`,
-	}),
-	args: {
-		variant: 'outline',
-		size: 'medium',
-		loading: false,
-		default: 'Button',
-	},
-} satisfies Story;
-
-export const Size = {
-	render: (args) => ({
-		components: { Button },
-		setup() {
-			return { args };
-		},
-		template: `
-		<div style="display: grid; place-items: center;">
-			<div style="display: flex; gap: 12px; align-items: center;">
-				<Button variant="solid" size="xsmall">Button</Button>
-				<Button variant="solid" size="small">Button</Button>
-				<Button variant="solid" size="medium">Button</Button>
-			</div>
-		</div>
-		`,
-	}),
-	args: {},
-} satisfies Story;
-
-export const Variant = {
-	render: (args) => ({
-		components: { Button },
-		setup() {
-			return { args };
-		},
-		template: `
-		<div style="display: grid; place-items: center;">
-			<div style="display: flex; gap: 12px; align-items: center;">
-				<Button variant="solid" size="medium">Solid</Button>
-				<Button variant="subtle" size="medium">Subtle</Button>
-				<Button variant="outline" size="medium">Outline</Button>
-				<Button variant="ghost" size="medium">Ghost</Button>
-				<Button variant="destructive" size="medium">Destructive</Button>
-			</div>
-		</div>
-		`,
-	}),
-	args: {},
-} satisfies Story;
-
-export const WithIcons = {
-	render: (args) => ({
-		components: { Button, N8nIcon },
-		setup() {
-			return { args };
-		},
-		template: `
-		<div style="display: grid; place-items: center;">
-			<div style="display: flex; gap: 12px; align-items: center;">
-				<Button variant="solid" size="medium">
-					<N8nIcon icon="plus" size="medium" />
-					Button
-				</Button>
-				<Button variant="solid" size="medium">
-					Button
-					<N8nIcon icon="arrow-right" size="medium" />
-				</Button>
-				<Button variant="solid" size="medium">
-					<N8nIcon icon="plus" size="medium" />
-					Button
-					<N8nIcon icon="chevron-down" size="medium" />
-				</Button>
-			</div>
-		</div>
-		`,
-	}),
-	args: {},
-} satisfies Story;
-
-export const Loading = {
-	render: (args) => ({
-		components: { Button },
-		setup() {
-			return { args };
-		},
-		template: `
-		<div style="display: grid; place-items: center;">
-			<div style="display: flex; gap: 12px; align-items: center;">
-				<Button variant="solid" size="medium" loading>Button</Button>
-				<Button variant="subtle" size="medium" loading>Button</Button>
-				<Button variant="outline" size="medium" loading>Button</Button>
-				<Button variant="ghost" size="medium" loading>Button</Button>
-				<Button variant="destructive" size="medium" loading>Button</Button>
-			</div>
-		</div>
-		`,
-	}),
-	args: {},
-} satisfies Story;
-
-export const Link = {
-	render: (args) => ({
-		components: { Button },
-		setup() {
-			return { args };
-		},
-		template: `
-		<div style="display: grid; place-items: center;">
-			<div style="display: flex; gap: 12px; align-items: center;">
-				<Button variant="solid" size="medium" href="https://n8n.io">Link</Button>
-				<Button variant="subtle" size="medium" href="https://n8n.io">Link</Button>
-				<Button variant="outline" size="medium" href="https://n8n.io">Link</Button>
-				<Button variant="ghost" size="medium" href="https://n8n.io">Link</Button>
-				<Button variant="destructive" size="medium" href="https://n8n.io">Link</Button>
-			</div>
-		</div>
-		`,
-	}),
-	args: {},
-} satisfies Story;
-
-export const IconOnly = {
-	render: (args) => ({
-		components: { Button, N8nIcon },
-		setup() {
-			return { args };
-		},
-		template: `
-		<div style="display: grid; place-items: center;">
-			<div style="display: flex; gap: 12px; align-items: center;">
-				<Button variant="solid" size="xsmall" icon aria-label="Add">
-					<N8nIcon icon="plus" size="xsmall" />
-				</Button>
-				<Button variant="solid" size="small" icon aria-label="Add">
-					<N8nIcon icon="plus" size="small" />
-				</Button>
-				<Button variant="solid" size="medium" icon aria-label="Add">
-					<N8nIcon icon="plus" size="medium" />
-				</Button>
-			</div>
-		</div>
-		`,
-	}),
-	args: {},
-} satisfies Story;
-
-export const Disabled = {
-	render: (args) => ({
-		components: { Button },
-		setup() {
-			return { args };
-		},
-		template: `
-		<div style="display: grid; place-items: center;">
-			<div style="display: flex; gap: 12px; align-items: center;">
-				<Button variant="solid" size="medium" disabled>Solid</Button>
-				<Button variant="subtle" size="medium" disabled>Subtle</Button>
-				<Button variant="outline" size="medium" disabled>Outline</Button>
-				<Button variant="ghost" size="medium" disabled>Ghost</Button>
-				<Button variant="destructive" size="medium" disabled>Destructive</Button>
-			</div>
-		</div>
-		`,
-	}),
-	args: {},
-} satisfies Story;
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/Button/Button.test.ts b/packages/frontend/@n8n/design-system/src/v2/components/Button/Button.test.ts
deleted file mode 100644
index d67986647e9..00000000000
--- a/packages/frontend/@n8n/design-system/src/v2/components/Button/Button.test.ts
+++ /dev/null
@@ -1,424 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { render } from '@testing-library/vue';
-
-import Button from './Button.vue';
-
-const stubs = ['N8nIcon'];
-
-describe('v2/components/Button', () => {
-	describe('rendering', () => {
-		it('should render correctly with default props', () => {
-			const wrapper = render(Button, {
-				slots: {
-					default: 'Click me',
-				},
-				global: {
-					stubs,
-				},
-			});
-			expect(wrapper.getByRole('button')).toBeInTheDocument();
-			expect(wrapper.getByText('Click me')).toBeInTheDocument();
-		});
-
-		it('should render as button element by default', () => {
-			const wrapper = render(Button, {
-				slots: {
-					default: 'Button',
-				},
-				global: {
-					stubs,
-				},
-			});
-			expect(wrapper.container.querySelector('button')).toBeInTheDocument();
-		});
-
-		it('should render as anchor element when href is provided', () => {
-			const wrapper = render(Button, {
-				props: {
-					href: 'https://example.com',
-				},
-				slots: {
-					default: 'Link Button',
-				},
-				global: {
-					stubs,
-				},
-			});
-			const link = wrapper.container.querySelector('a');
-			expect(link).toBeInTheDocument();
-			expect(link).toHaveAttribute('href', 'https://example.com');
-			expect(link).toHaveAttribute('rel', 'nofollow noopener noreferrer');
-		});
-
-		it('should have type="button" by default', () => {
-			const wrapper = render(Button, {
-				slots: {
-					default: 'Button',
-				},
-				global: {
-					stubs,
-				},
-			});
-			expect(wrapper.getByRole('button')).toHaveAttribute('type', 'button');
-		});
-
-		it('should not have type attribute when rendered as link', () => {
-			const wrapper = render(Button, {
-				props: {
-					href: 'https://example.com',
-				},
-				slots: {
-					default: 'Link',
-				},
-				global: {
-					stubs,
-				},
-			});
-			const link = wrapper.container.querySelector('a');
-			expect(link).not.toHaveAttribute('type');
-		});
-	});
-
-	describe('props', () => {
-		describe('variant', () => {
-			it.each(['solid', 'subtle', 'ghost', 'outline', 'destructive'] as const)(
-				'should render %s variant',
-				(variant) => {
-					const wrapper = render(Button, {
-						props: { variant },
-						slots: { default: 'Button' },
-						global: { stubs },
-					});
-					const button = wrapper.container.querySelector('button');
-					expect(button?.className).toContain(variant);
-				},
-			);
-
-			it('should default to outline variant', () => {
-				const wrapper = render(Button, {
-					slots: { default: 'Button' },
-					global: { stubs },
-				});
-				const button = wrapper.container.querySelector('button');
-				expect(button?.className).toContain('outline');
-			});
-		});
-
-		describe('size', () => {
-			it.each(['xsmall', 'small', 'medium'] as const)('should render %s size', (size) => {
-				const wrapper = render(Button, {
-					props: { size },
-					slots: { default: 'Button' },
-					global: { stubs },
-				});
-				const button = wrapper.container.querySelector('button');
-				expect(button?.className).toContain(size);
-			});
-
-			it('should default to small size', () => {
-				const wrapper = render(Button, {
-					slots: { default: 'Button' },
-					global: { stubs },
-				});
-				const button = wrapper.container.querySelector('button');
-				expect(button?.className).toContain('small');
-			});
-		});
-
-		describe('loading', () => {
-			it('should show loading spinner when loading', () => {
-				const wrapper = render(Button, {
-					props: { loading: true },
-					slots: { default: 'Button' },
-					global: { stubs },
-				});
-				const button = wrapper.container.querySelector('button');
-				expect(button?.className).toContain('loading');
-				expect(wrapper.container.querySelector('n8n-icon-stub')).toBeInTheDocument();
-			});
-
-			it('should be disabled while loading', async () => {
-				const handleClick = vi.fn();
-				const wrapper = render(Button, {
-					props: { loading: true, onClick: handleClick },
-					slots: { default: 'Button' },
-					global: { stubs },
-				});
-
-				const button = wrapper.getByRole('button');
-				expect(button).toBeDisabled();
-				expect(button).toHaveAttribute('aria-disabled', 'true');
-
-				// Verify clicks are blocked
-				await userEvent.click(button);
-				expect(handleClick).not.toHaveBeenCalled();
-
-				// Verify keyboard activation is also blocked
-				button.focus();
-				await userEvent.keyboard('{Enter}');
-				expect(handleClick).not.toHaveBeenCalled();
-			});
-
-			it('applies loading CSS class to wrapper element', () => {
-				const wrapper = render(Button, {
-					props: { loading: true },
-					slots: { default: 'Button' },
-					global: { stubs },
-				});
-				const button = wrapper.container.querySelector('button');
-				expect(button?.className).toContain('loading');
-			});
-		});
-
-		describe('disabled', () => {
-			it('should be disabled when disabled prop is true', () => {
-				const wrapper = render(Button, {
-					props: { disabled: true },
-					slots: { default: 'Button' },
-					global: { stubs },
-				});
-				const button = wrapper.getByRole('button');
-				expect(button).toBeDisabled();
-				expect(button).toHaveAttribute('aria-disabled', 'true');
-			});
-
-			it('should apply disabled class', () => {
-				const wrapper = render(Button, {
-					props: { disabled: true },
-					slots: { default: 'Button' },
-					global: { stubs },
-				});
-				const button = wrapper.container.querySelector('button');
-				expect(button?.className).toContain('disabled');
-			});
-
-			it('should prevent navigation on disabled link button', async () => {
-				const wrapper = render(Button, {
-					props: {
-						href: 'https://example.com',
-						disabled: true,
-					},
-					slots: { default: 'Link' },
-					global: { stubs },
-				});
-				const link = wrapper.container.querySelector('a')!;
-
-				const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
-				const preventDefaultSpy = vi.spyOn(clickEvent, 'preventDefault');
-
-				link.dispatchEvent(clickEvent);
-
-				expect(preventDefaultSpy).toHaveBeenCalled();
-			});
-		});
-
-		describe('icon', () => {
-			it('should apply icon class for square icon button', () => {
-				const wrapper = render(Button, {
-					props: {
-						icon: true,
-						'aria-label': 'Icon button',
-					},
-					slots: { default: '<span>+</span>' },
-					global: { stubs },
-				});
-				const button = wrapper.container.querySelector('button');
-				expect(button?.className).toContain('icon');
-			});
-		});
-
-		describe('class', () => {
-			it('should apply custom class', () => {
-				const wrapper = render(Button, {
-					props: { class: 'custom-class' },
-					slots: { default: 'Button' },
-					global: { stubs },
-				});
-				const button = wrapper.container.querySelector('button');
-				expect(button?.className).toContain('custom-class');
-			});
-		});
-	});
-
-	describe('slots', () => {
-		it('should render default slot content', () => {
-			const wrapper = render(Button, {
-				slots: {
-					default: '<span data-test-id="slot-content">Custom Content</span>',
-				},
-				global: { stubs },
-			});
-			expect(wrapper.getByTestId('slot-content')).toBeInTheDocument();
-			expect(wrapper.getByText('Custom Content')).toBeInTheDocument();
-		});
-
-		it('should render complex slot content', () => {
-			const wrapper = render(Button, {
-				slots: {
-					default: '<span>Icon</span><span>Text</span>',
-				},
-				global: { stubs },
-			});
-			expect(wrapper.getByText('Icon')).toBeInTheDocument();
-			expect(wrapper.getByText('Text')).toBeInTheDocument();
-		});
-	});
-
-	describe('events', () => {
-		it('should emit click event', async () => {
-			const handleClick = vi.fn();
-			const wrapper = render(Button, {
-				props: { onClick: handleClick },
-				slots: { default: 'Button' },
-				global: { stubs },
-			});
-
-			await userEvent.click(wrapper.getByRole('button'));
-			expect(handleClick).toHaveBeenCalledOnce();
-		});
-
-		it('should not emit click when disabled', async () => {
-			const handleClick = vi.fn();
-			const wrapper = render(Button, {
-				props: {
-					disabled: true,
-					onClick: handleClick,
-				},
-				slots: { default: 'Button' },
-				global: { stubs },
-			});
-
-			await userEvent.click(wrapper.getByRole('button'));
-			expect(handleClick).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('accessibility', () => {
-		it('should be keyboard accessible', async () => {
-			const handleClick = vi.fn();
-			const wrapper = render(Button, {
-				props: { onClick: handleClick },
-				slots: { default: 'Button' },
-				global: { stubs },
-			});
-
-			const button = wrapper.getByRole('button');
-			button.focus();
-			expect(button).toHaveFocus();
-
-			await userEvent.keyboard('{Enter}');
-			expect(handleClick).toHaveBeenCalledOnce();
-		});
-
-		it('should be focusable', () => {
-			const wrapper = render(Button, {
-				slots: { default: 'Button' },
-				global: { stubs },
-			});
-			const button = wrapper.getByRole('button');
-			button.focus();
-			expect(button).toHaveFocus();
-		});
-
-		it('should warn about missing accessible label for icon-only buttons in dev mode', () => {
-			const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
-			render(Button, {
-				props: { icon: true },
-				slots: { default: '+' },
-				global: { stubs },
-			});
-
-			expect(consoleSpy).toHaveBeenCalledWith(
-				expect.stringContaining('Icon-only buttons should have an accessible label'),
-			);
-
-			consoleSpy.mockRestore();
-		});
-
-		it('should not warn when icon button has aria-label', () => {
-			const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
-			render(Button, {
-				props: {
-					icon: true,
-					'aria-label': 'Add item',
-				},
-				slots: { default: '+' },
-				global: { stubs },
-			});
-
-			expect(consoleSpy).not.toHaveBeenCalled();
-
-			consoleSpy.mockRestore();
-		});
-
-		it('should not warn when icon button has title', () => {
-			const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
-			render(Button, {
-				props: {
-					icon: true,
-					title: 'Add item',
-				},
-				slots: { default: '+' },
-				global: { stubs },
-			});
-
-			expect(consoleSpy).not.toHaveBeenCalled();
-
-			consoleSpy.mockRestore();
-		});
-	});
-
-	describe('button type attribute', () => {
-		it('should accept custom type attribute', () => {
-			const wrapper = render(Button, {
-				attrs: { type: 'submit' },
-				slots: { default: 'Submit' },
-				global: { stubs },
-			});
-			expect(wrapper.getByRole('button')).toHaveAttribute('type', 'submit');
-		});
-
-		it('should pass through additional attributes', () => {
-			const wrapper = render(Button, {
-				attrs: {
-					'data-test-id': 'custom-button',
-					'aria-describedby': 'help-text',
-				},
-				slots: { default: 'Button' },
-				global: { stubs },
-			});
-			const button = wrapper.getByRole('button');
-			expect(button).toHaveAttribute('data-test-id', 'custom-button');
-			expect(button).toHaveAttribute('aria-describedby', 'help-text');
-		});
-	});
-
-	describe('link button', () => {
-		it('should render link with proper security attributes', () => {
-			const wrapper = render(Button, {
-				props: { href: 'https://external.com' },
-				slots: { default: 'External Link' },
-				global: { stubs },
-			});
-			const link = wrapper.container.querySelector('a');
-			expect(link).toHaveAttribute('rel', 'nofollow noopener noreferrer');
-		});
-
-		it('should not have disabled attribute on links (uses aria-disabled)', () => {
-			const wrapper = render(Button, {
-				props: {
-					href: 'https://example.com',
-					disabled: true,
-				},
-				slots: { default: 'Disabled Link' },
-				global: { stubs },
-			});
-			const link = wrapper.container.querySelector('a');
-			// Links don't support disabled attribute, but should have aria-disabled
-			expect(link).toHaveAttribute('aria-disabled', 'true');
-		});
-	});
-});
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/Button/Button.vue b/packages/frontend/@n8n/design-system/src/v2/components/Button/Button.vue
deleted file mode 100644
index d0fefe38e13..00000000000
--- a/packages/frontend/@n8n/design-system/src/v2/components/Button/Button.vue
+++ /dev/null
@@ -1,365 +0,0 @@
-<script lang="ts" setup>
-import { computed, useAttrs, useCssModule, onMounted } from 'vue';
-import type { ButtonHTMLAttributes } from 'vue';
-
-import { N8nIcon } from '@n8n/design-system/components';
-import { cn } from '@n8n/design-system/utils/cn';
-
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {
-	/** Determines the type of button, typically the intent of the action */
-	variant?: 'solid' | 'subtle' | 'ghost' | 'outline' | 'destructive';
-	/** Determines the size of the button */
-	size?: 'xsmall' | 'small' | 'medium';
-	/** If passed, the button will be rendered as a link */
-	href?: string;
-	/** If passed, the button will be rendered as a loading state */
-	loading?: boolean;
-	/** If true, forces equal width and height (square button for icons) */
-	icon?: boolean;
-	/** If true, the button will be disabled */
-	disabled?: boolean;
-	/** Additional classes to apply to the button */
-	class?: string;
-}
-
-defineOptions({
-	inheritAttrs: false,
-});
-
-const props = withDefaults(defineProps<Props>(), {
-	variant: 'outline',
-	size: 'small',
-	href: undefined,
-	loading: false,
-	icon: false,
-	disabled: false,
-	class: undefined,
-});
-
-const $style = useCssModule();
-const attrs = useAttrs() as ButtonHTMLAttributes;
-
-onMounted(() => {
-	if (import.meta.env.DEV && props.icon) {
-		const hasAccessibleLabel = attrs['aria-label'] || attrs['aria-labelledby'] || attrs.title;
-		if (!hasAccessibleLabel) {
-			console.warn(
-				'[Button] Icon-only buttons should have an accessible label. ' +
-					'Add aria-label, aria-labelledby, or title attribute.',
-			);
-		}
-	}
-});
-
-const classes = computed(() =>
-	cn(
-		$style.button,
-		$style[props.variant],
-		$style[props.size],
-		props.loading && $style.loading,
-		props.icon && $style.icon,
-		props.disabled && $style.disabled,
-		props.class,
-	),
-);
-
-const componentTag = computed(() => (props.href ? 'a' : 'button'));
-
-const buttonType = computed(() => {
-	if (props.href) return undefined;
-	return (attrs.type as string) ?? 'button';
-});
-
-const handleClick = (event: MouseEvent) => {
-	if (props.href && props.disabled) {
-		event.preventDefault();
-	}
-};
-</script>
-
-<template>
-	<component
-		:is="componentTag"
-		:type="buttonType"
-		:href="href"
-		:rel="href ? 'nofollow noopener noreferrer' : undefined"
-		:disabled="disabled || loading || undefined"
-		:aria-disabled="disabled || loading || undefined"
-		:class="classes"
-		v-bind="attrs"
-		@click="handleClick"
-	>
-		<Transition name="n8n-button-fade">
-			<div v-if="loading" :class="$style['loading-container']">
-				<div :class="$style['loading-spinner']">
-					<N8nIcon icon="loader" size="large" transform-origin="center" />
-				</div>
-			</div>
-		</Transition>
-		<div :class="$style['button-inner']">
-			<slot />
-		</div>
-	</component>
-</template>
-
-<style lang="scss" module>
-@use '../../../css/mixins/focus';
-
-.button {
-	appearance: none;
-	touch-action: manipulation;
-	-webkit-tap-highlight-color: transparent;
-	user-select: none;
-	width: fit-content;
-	display: grid;
-	border: none;
-	font-weight: var(--font-weight--medium);
-	line-height: 1lh;
-	cursor: pointer;
-	text-decoration: none;
-
-	// Size variables
-	height: var(--button--height);
-	padding: var(--button--padding);
-	border-radius: var(--button--radius);
-	font-size: var(--button--font-size);
-
-	// Variant variables with defaults
-	--button--color--background: transparent;
-	--button--color--background-hover: transparent;
-	--button--color--background-active: transparent;
-	--button--color: light-dark(var(--color--neutral-900), var(--color--neutral-100));
-	--button--shadow: none;
-	--button--shadow--hover: none;
-	--button--shadow--active: none;
-
-	background-color: var(--button--color--background);
-	color: var(--button--color);
-	box-shadow: var(--button--shadow);
-
-	> * {
-		grid-area: 1 / 1;
-	}
-
-	&:hover {
-		background-color: var(--button--color--background-hover);
-		box-shadow: var(--button--shadow--hover);
-	}
-
-	&:active {
-		background-color: var(--button--color--background-active);
-		box-shadow: var(--button--shadow--active);
-	}
-
-	&:focus {
-		outline: none;
-	}
-
-	&:focus-visible {
-		@include focus.focus-ring;
-	}
-
-	// Size variants
-	&.xsmall {
-		--button--height: 1.5rem;
-		--button--padding: 0 var(--spacing--2xs);
-		--button--radius: var(--radius--2xs);
-		--button--font-size: var(--font-size--2xs);
-	}
-
-	&.small {
-		--button--height: 1.75rem;
-		--button--padding: 0 var(--spacing--xs);
-		--button--radius: var(--radius--2xs);
-		--button--font-size: var(--font-size--xs);
-	}
-
-	&.medium {
-		--button--height: 2.25rem;
-		--button--padding: 0 var(--spacing--xs);
-		--button--radius: var(--radius--xs);
-		--button--font-size: var(--font-size--sm);
-	}
-
-	// Style variants
-	&.solid {
-		--button--color--background: var(--color--orange-400);
-		--button--color--background-hover: var(--color--orange-500);
-		--button--color--background-active: var(--color--orange-600);
-		--button--color: var(--color--neutral-white);
-		--button--shadow:
-			0 1px 3px 0 light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200)),
-			0 0 0 1px var(--color--orange-400);
-		--button--shadow--hover:
-			0 1px 3px 0 light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200)),
-			0 0 0 1px var(--color--orange-500);
-		--button--shadow--active:
-			0 1px 3px 0 light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200)),
-			0 0 0 1px var(--color--orange-600);
-	}
-
-	&.subtle {
-		--button--color--background: light-dark(var(--color--neutral-white), var(--color--neutral-800));
-		--button--color--background-hover: light-dark(
-			var(--color--neutral-200),
-			var(--color--neutral-700)
-		);
-		--button--color--background-active: light-dark(
-			var(--color--neutral-250),
-			var(--color--neutral-600)
-		);
-		--button--shadow:
-			0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)),
-			0 0 0 1px light-dark(var(--color--black-alpha-100), var(--color--white-alpha-100)),
-			0 0 0 2px light-dark(transparent, var(--color--black-alpha-100));
-		--button--shadow--hover:
-			0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)),
-			0 0 0 1px light-dark(var(--color--black-alpha-200), var(--color--white-alpha-300)),
-			0 0 0 2px light-dark(transparent, var(--color--black-alpha-100));
-		--button--shadow--active:
-			0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)),
-			0 0 0 1px light-dark(var(--color--black-alpha-300), var(--color--white-alpha-300)),
-			0 0 0 2px light-dark(transparent, var(--color--black-alpha-100));
-	}
-
-	&.outline {
-		--button--color--background: transparent;
-		--button--color--background-hover: light-dark(
-			var(--color--black-alpha-200),
-			var(--color--white-alpha-100)
-		);
-		--button--color--background-active: light-dark(
-			var(--color--black-alpha-300),
-			var(--color--white-alpha-200)
-		);
-		--button--shadow: 0 0 0 1px
-			light-dark(var(--color--black-alpha-100), var(--color--white-alpha-100));
-		--button--shadow--hover: 0 0 0 1px
-			light-dark(var(--color--black-alpha-200), var(--color--white-alpha-200));
-		--button--shadow--active: 0 0 0 1px
-			light-dark(var(--color--black-alpha-300), var(--color--white-alpha-300));
-	}
-
-	&.ghost {
-		--button--color--background: transparent;
-		--button--color--background-hover: light-dark(
-			var(--color--black-alpha-200),
-			var(--color--white-alpha-100)
-		);
-		--button--color--background-active: light-dark(
-			var(--color--black-alpha-300),
-			var(--color--white-alpha-200)
-		);
-		--button--shadow: 0 0 0 0 transparent;
-		--button--shadow--hover: 0 0 0 1px
-			light-dark(var(--color--black-alpha-200), var(--color--white-alpha-100));
-		--button--shadow--active: 0 0 0 1px
-			light-dark(var(--color--black-alpha-200), var(--color--white-alpha-100));
-	}
-
-	&.destructive {
-		--button--color--background: light-dark(var(--color--red-500), var(--color--red-600));
-		--button--color--background-hover: light-dark(var(--color--red-600), var(--color--red-500));
-		--button--color--background-active: light-dark(var(--color--red-600), var(--color--red-400));
-		--button--color: var(--color--neutral-white);
-		--button--shadow:
-			light-dark(
-				0 1px 3px 0 var(--color--black-alpha-100),
-				0 1px 3px 0 var(--color--black-alpha-200)
-			),
-			0 0 0 1px light-dark(var(--color--red-500), var(--color--red-600));
-		--button--shadow--hover:
-			light-dark(
-				0 1px 3px 0 var(--color--black-alpha-100),
-				0 1px 3px 0 var(--color--black-alpha-200)
-			),
-			0 0 0 1px light-dark(var(--color--red-600), var(--color--red-500));
-		--button--shadow--active:
-			light-dark(
-				0 1px 3px 0 var(--color--black-alpha-100),
-				0 1px 3px 0 var(--color--black-alpha-200)
-			),
-			0 0 0 1px light-dark(var(--color--red-600), var(--color--red-400));
-	}
-
-	&.link {
-		cursor: pointer;
-	}
-
-	&.disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	&.loading {
-		pointer-events: none;
-	}
-
-	&.icon {
-		width: var(--button--height);
-		padding: 0;
-	}
-}
-
-.loading-container {
-	height: auto;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.button-inner {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--spacing--3xs);
-}
-
-.loading-container + .button-inner {
-	pointer-events: none;
-	opacity: 0;
-}
-
-.loading-spinner {
-	width: var(--spacing--sm);
-	height: var(--spacing--sm);
-	animation: spin 1s linear infinite;
-
-	@media (prefers-reduced-motion: reduce) {
-		animation: none;
-	}
-}
-
-/* TODO: Move to global animations css library */
-:global(.n8n-button-fade-enter-active),
-:global(.n8n-button-fade-leave-active) {
-	--easing--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
-	transition:
-		opacity 0.2s var(--easing--ease-out),
-		transform 0.2s var(--easing--ease-out);
-
-	@media (prefers-reduced-motion: reduce) {
-		transition: opacity 0.1s;
-	}
-}
-:global(.n8n-button-fade-enter-from),
-:global(.n8n-button-fade-leave-to) {
-	opacity: 0;
-	transform: translateY(4px);
-	filter: blur(2px);
-
-	@media (prefers-reduced-motion: reduce) {
-		transform: none;
-		filter: none;
-	}
-}
-
-@keyframes spin {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-</style>
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/Button/component-button.md b/packages/frontend/@n8n/design-system/src/v2/components/Button/component-button.md
deleted file mode 100644
index f8a0094ceba..00000000000
--- a/packages/frontend/@n8n/design-system/src/v2/components/Button/component-button.md
+++ /dev/null
@@ -1,190 +0,0 @@
-# Component specification
-
-- **Component Name:** N8nButton
-
-## Public API Definition
-
-**Props**
-
-| Prop       | Type                                                                   | Default     | Description                                              |
-| ---------- | ---------------------------------------------------------------------- | ----------- | -------------------------------------------------------- |
-| `variant`  | `'solid'` \| `'subtle'` \| `'outline'` \| `'ghost'` \| `'destructive'` | `'outline'` | Visual style of the button                               |
-| `size`     | `'xsmall'` \| `'small'` \| `'medium'`                                  | `'small'`   | Size of the button                                       |
-| `href`     | `string`                                                               | -           | When provided, renders as `<a>` instead of `<button>`    |
-| `loading`  | `boolean`                                                              | `false`     | Shows spinner and disables interaction                   |
-| `icon`     | `boolean`                                                              | `false`     | Forces equal width and height (square button for icons)  |
-| `disabled` | `boolean`                                                              | `false`     | Disables the button                                      |
-| `class`    | `string`                                                               | -           | Additional classes to apply to the button                |
-
-Extends `ButtonHTMLAttributes` for native button attributes (`type`, etc.)
-
-**Slots**
-
-| Slot      | Description                           |
-| --------- | ------------------------------------- |
-| `default` | Button content (text, icons, or both) |
-
-Icons are passed as slot content, allowing flexible positioning (leading, trailing, or both).
-
-**Accessibility**
-
-- Sets `aria-disabled="true"` when disabled
-- When `href` is provided, adds `target="_blank"` and `rel="nofollow noopener"`
-- Icon-only buttons (with `icon` prop) should include `aria-label`, `aria-labelledby`, or `title` attribute (warning shown in dev mode if missing)
-
----
-
-## Styling via Class Overrides
-
-For layout-specific styling (full-width, custom colors), use the `class` prop with scoped CSS rather than dedicated props. This keeps the API surface minimal.
-
-#### Full Width Button
-
-```vue
-<template>
-	<N8nButton variant="solid" :class="$style.fullWidth"> Save changes </N8nButton>
-</template>
-
-<style module lang="scss">
-.fullWidth {
-	width: 100%;
-}
-</style>
-```
-
-#### Square Icon-Only Button
-
-Use the `icon` prop for square icon buttons:
-
-```vue
-<template>
-	<N8nButton variant="ghost" icon aria-label="Add item">
-		<N8nIcon name="plus" size="small" />
-	</N8nButton>
-</template>
-```
-
----
-
-## Behavior
-
-**Loading state:**
-
-- Displays a spinner with fade transition
-- Button content is hidden (opacity: 0)
-- Button is non-interactive (`pointer-events: none`)
-
-**Disabled state:**
-
-- Button has reduced opacity (0.5)
-- Cursor changes to `not-allowed`
-- Sets `disabled` and `aria-disabled` attributes
-
-**Link buttons (`href`):**
-
-- Renders as `<a>` element
-- Automatically adds `target="_blank"` and `rel="nofollow noopener"`
-
-**Icon sizing:**
-
-- Icons passed via slots should use the appropriate size to match the button
-- The `icon` prop forces the button to be square (width equals height)
-
----
-
-## Template Usage Examples
-
-#### Basic Button
-
-```vue
-<N8nButton variant="solid">Save changes</N8nButton>
-```
-
-#### Button with Leading Icon
-
-```vue
-<N8nButton variant="solid">
-  <N8nIcon name="plus" size="xsmall" />
-  Add item
-</N8nButton>
-```
-
-#### Button with Trailing Icon
-
-```vue
-<N8nButton variant="outline">
-  Next step
-  <N8nIcon name="arrow-right" size="xsmall" />
-</N8nButton>
-```
-
-#### All Variants
-
-```vue
-<N8nButton variant="solid">Solid</N8nButton>
-<N8nButton variant="subtle">Subtle</N8nButton>
-<N8nButton variant="outline">Outline</N8nButton>
-<N8nButton variant="ghost">Ghost</N8nButton>
-<N8nButton variant="destructive">Delete</N8nButton>
-```
-
-#### Size Variants
-
-```vue
-<N8nButton variant="solid" size="xsmall">Extra small</N8nButton>
-<N8nButton variant="solid" size="small">Small</N8nButton>
-<N8nButton variant="solid" size="medium">Medium</N8nButton>
-```
-
-#### Loading State
-
-```vue
-<N8nButton variant="solid" loading>
-  Saving...
-</N8nButton>
-```
-
-#### Disabled State
-
-```vue
-<N8nButton variant="solid" disabled>
-  Cannot click
-</N8nButton>
-```
-
-#### Icon-Only Button
-
-```vue
-<N8nButton variant="ghost" icon aria-label="Add item">
-  <N8nIcon name="plus" size="small" />
-</N8nButton>
-```
-
-#### Link Button
-
-```vue
-<N8nButton variant="ghost" href="https://n8n.io">
-  Learn more
-  <N8nIcon name="external-link" size="xsmall" />
-</N8nButton>
-```
-
----
-
-## Migration from Legacy N8nButton
-
-| Legacy             | New                                              |
-| ------------------ | ------------------------------------------------ |
-| `type="primary"`   | `variant="solid"`                                |
-| `type="secondary"` | `variant="subtle"`                               |
-| `type="tertiary"`  | `variant="ghost"`                                |
-| `type="danger"`    | `variant="destructive"`                          |
-| `type="success"`   | `variant="solid"` + custom class (see overrides) |
-| `type="warning"`   | `variant="solid"` + custom class (see overrides) |
-| `outline`          | `variant="outline"`                              |
-| `text`             | `variant="ghost"`                                |
-| `block`            | Custom class with `width: 100%`                  |
-| `square`           | Use `icon` prop                                  |
-| `icon="name"`      | `<N8nIcon name="name" />` in slot                |
-| `label="text"`     | Pass text as slot content                        |
-| `element="a"`      | Use `href` prop                                  |
diff --git a/packages/frontend/editor-ui/src/app/components/Banner.vue b/packages/frontend/editor-ui/src/app/components/Banner.vue
index 427d5d36fb6..76949d0030c 100644
--- a/packages/frontend/editor-ui/src/app/components/Banner.vue
+++ b/packages/frontend/editor-ui/src/app/components/Banner.vue
@@ -60,13 +60,12 @@ const onClick = () => {
 
 			<slot v-if="$slots.button" name="button" />
 			<N8nButton
+				variant="outline"
 				v-else-if="buttonLabel"
 				:label="buttonLoading && buttonLoadingLabel ? buttonLoadingLabel : buttonLabel"
 				:title="buttonTitle"
-				:type="theme"
 				:loading="buttonLoading"
 				size="small"
-				outline
 				@click.stop="onClick"
 			/>
 		</div>
diff --git a/packages/frontend/editor-ui/src/app/components/CredentialResolverEditModal.vue b/packages/frontend/editor-ui/src/app/components/CredentialResolverEditModal.vue
index c76bf40ddbb..644c05f99ca 100644
--- a/packages/frontend/editor-ui/src/app/components/CredentialResolverEditModal.vue
+++ b/packages/frontend/editor-ui/src/app/components/CredentialResolverEditModal.vue
@@ -383,7 +383,7 @@ onMounted(async () => {
 			<div :class="$style.header">
 				<div :class="$style.resolverInfo">
 					<div :class="$style.resolverIcon">
-						<N8nIconButton icon="database" type="tertiary" size="large" :disabled="true" />
+						<N8nIconButton variant="subtle" icon="database" size="large" :disabled="true" />
 					</div>
 					<div :class="$style.resolverName">
 						<N8nInlineTextEdit
@@ -399,10 +399,10 @@ onMounted(async () => {
 				</div>
 				<div :class="$style.resolverActions">
 					<N8nIconButton
+						variant="subtle"
 						v-if="isEditMode"
 						:title="i18n.baseText('credentialResolverEdit.delete')"
 						icon="trash-2"
-						type="tertiary"
 						:disabled="isSaving"
 						:loading="isDeleting"
 						data-test-id="credential-resolver-delete-button"
diff --git a/packages/frontend/editor-ui/src/app/components/DuplicateWorkflowDialog.vue b/packages/frontend/editor-ui/src/app/components/DuplicateWorkflowDialog.vue
index cdd325a9206..dc3b28ebc63 100644
--- a/packages/frontend/editor-ui/src/app/components/DuplicateWorkflowDialog.vue
+++ b/packages/frontend/editor-ui/src/app/components/DuplicateWorkflowDialog.vue
@@ -198,7 +198,7 @@ onMounted(async () => {
 					@click="save"
 				/>
 				<N8nButton
-					type="secondary"
+					variant="subtle"
 					:disabled="isSaving"
 					:label="i18n.baseText('duplicateWorkflowDialog.cancel')"
 					float="right"
diff --git a/packages/frontend/editor-ui/src/app/components/FreeAiCreditsCallout.vue b/packages/frontend/editor-ui/src/app/components/FreeAiCreditsCallout.vue
index 26a9832b5bd..5b1a6cd0aba 100644
--- a/packages/frontend/editor-ui/src/app/components/FreeAiCreditsCallout.vue
+++ b/packages/frontend/editor-ui/src/app/components/FreeAiCreditsCallout.vue
@@ -68,7 +68,7 @@ const onClaimCreditsClicked = async () => {
 		}}
 		<template #trailingContent>
 			<N8nButton
-				type="tertiary"
+				variant="subtle"
 				size="small"
 				:label="i18n.baseText('freeAi.credits.callout.claim.button.label')"
 				:loading="claimingCredits"
diff --git a/packages/frontend/editor-ui/src/app/components/ImportWorkflowUrlModal.vue b/packages/frontend/editor-ui/src/app/components/ImportWorkflowUrlModal.vue
index 5a11d2a2c58..55b27a39dfb 100644
--- a/packages/frontend/editor-ui/src/app/components/ImportWorkflowUrlModal.vue
+++ b/packages/frontend/editor-ui/src/app/components/ImportWorkflowUrlModal.vue
@@ -60,7 +60,7 @@ const focusInput = async () => {
 		<template #footer>
 			<div :class="$style.footer">
 				<N8nButton
-					type="primary"
+					variant="solid"
 					float="right"
 					:disabled="!url || !isValid"
 					data-test-id="confirm-workflow-import-url-button"
@@ -69,7 +69,7 @@ const focusInput = async () => {
 					{{ i18n.baseText('mainSidebar.prompt.import') }}
 				</N8nButton>
 				<N8nButton
-					type="secondary"
+					variant="subtle"
 					float="right"
 					data-test-id="cancel-workflow-import-url-button"
 					@click="closeModal"
diff --git a/packages/frontend/editor-ui/src/app/components/MainHeader/WorkflowHeaderDraftPublishActions.vue b/packages/frontend/editor-ui/src/app/components/MainHeader/WorkflowHeaderDraftPublishActions.vue
index 2235c303367..0bb97f65864 100644
--- a/packages/frontend/editor-ui/src/app/components/MainHeader/WorkflowHeaderDraftPublishActions.vue
+++ b/packages/frontend/editor-ui/src/app/components/MainHeader/WorkflowHeaderDraftPublishActions.vue
@@ -518,7 +518,7 @@ defineExpose({
 						:class="$style.groupButtonLeft"
 						:loading="autoSaveForPublish"
 						:disabled="!publishButtonConfig.enabled || shouldDisablePublishButton"
-						type="secondary"
+						variant="subtle"
 						data-test-id="workflow-open-publish-modal-button"
 						@click="onPublishButtonClick"
 					>
@@ -552,7 +552,7 @@ defineExpose({
 					<template #activator>
 						<N8nIconButton
 							:class="$style.groupButtonRight"
-							type="secondary"
+							variant="subtle"
 							icon="chevron-down"
 							data-test-id="version-menu-button"
 						/>
diff --git a/packages/frontend/editor-ui/src/app/components/MainHeader/WorkflowPublishModal.vue b/packages/frontend/editor-ui/src/app/components/MainHeader/WorkflowPublishModal.vue
index 8ce3da82cd8..c365b1a9da5 100644
--- a/packages/frontend/editor-ui/src/app/components/MainHeader/WorkflowPublishModal.vue
+++ b/packages/frontend/editor-ui/src/app/components/MainHeader/WorkflowPublishModal.vue
@@ -265,8 +265,8 @@ async function handlePublish() {
 				/>
 				<div :class="$style.actions">
 					<N8nButton
+						variant="subtle"
 						:disabled="publishing"
-						type="secondary"
 						:label="i18n.baseText('generic.cancel')"
 						data-test-id="workflow-publish-cancel-button"
 						@click="modalBus.emit('close')"
diff --git a/packages/frontend/editor-ui/src/app/components/MainSidebarHeader.vue b/packages/frontend/editor-ui/src/app/components/MainSidebarHeader.vue
index 79d9454bfe2..d52c39171a0 100644
--- a/packages/frontend/editor-ui/src/app/components/MainSidebarHeader.vue
+++ b/packages/frontend/editor-ui/src/app/components/MainSidebarHeader.vue
@@ -107,8 +107,9 @@ const {
 			@select="handleMenuSelect"
 		>
 			<N8nIconButton
+				class="n8n-button--highlight"
+				variant="ghost"
 				size="small"
-				type="highlight"
 				icon="plus"
 				icon-size="large"
 				aria-label="Add new item"
@@ -151,10 +152,10 @@ const {
 						size="xsmall"
 					/>
 					<N8nButton
+						variant="subtle"
 						v-else
 						:size="'mini'"
 						:class="$style.upgradeButton"
-						type="tertiary"
 						@click="handleMenuSelect(item.id)"
 					>
 						{{ upgradeLabel }}
@@ -169,8 +170,9 @@ const {
 			:shortcut="{ keys: ['k'], metaKey: true }"
 		>
 			<N8nIconButton
+				class="n8n-button--highlight"
+				variant="ghost"
 				size="small"
-				type="highlight"
 				icon="search"
 				icon-size="large"
 				aria-label="Open command palette"
@@ -189,8 +191,9 @@ const {
 		>
 			<N8nIconButton
 				id="toggle-sidebar-button"
+				class="n8n-button--highlight"
+				variant="ghost"
 				size="small"
-				type="highlight"
 				icon="panel-left"
 				icon-size="large"
 				aria-label="Toggle sidebar"
diff --git a/packages/frontend/editor-ui/src/app/components/MainSidebarSourceControl.vue b/packages/frontend/editor-ui/src/app/components/MainSidebarSourceControl.vue
index 5d1e1ea7935..f5b1c0d882f 100644
--- a/packages/frontend/editor-ui/src/app/components/MainSidebarSourceControl.vue
+++ b/packages/frontend/editor-ui/src/app/components/MainSidebarSourceControl.vue
@@ -139,12 +139,11 @@ function pullWorkfolder() {
 						</div>
 					</template>
 					<N8nButton
+						variant="ghost"
 						:disabled="!hasPullPermission"
 						data-test-id="main-sidebar-source-control-pull"
 						icon="arrow-down"
-						type="tertiary"
 						:size="isCollapsed ? 'small' : 'mini'"
-						text
 						:square="isCollapsed"
 						:label="isCollapsed ? '' : i18n.baseText('settings.sourceControl.button.pull')"
 						@click="pullWorkfolder"
@@ -167,13 +166,12 @@ function pullWorkfolder() {
 						</div>
 					</template>
 					<N8nButton
+						variant="ghost"
 						:square="isCollapsed"
 						:label="isCollapsed ? '' : i18n.baseText('settings.sourceControl.button.push')"
 						:disabled="sourceControlStore.preferences.branchReadOnly || !hasPushPermission"
 						data-test-id="main-sidebar-source-control-push"
 						icon="arrow-up"
-						type="tertiary"
-						text
 						:size="isCollapsed ? 'small' : 'mini'"
 						@click="pushWorkfolder"
 					/>
diff --git a/packages/frontend/editor-ui/src/app/components/MainSidebarUserArea.vue b/packages/frontend/editor-ui/src/app/components/MainSidebarUserArea.vue
index dffe582327c..f0190008136 100644
--- a/packages/frontend/editor-ui/src/app/components/MainSidebarUserArea.vue
+++ b/packages/frontend/editor-ui/src/app/components/MainSidebarUserArea.vue
@@ -91,7 +91,7 @@ const onUserActionToggle = (action: string) => {
 						data-test-id="user-menu"
 						:class="{ [$style.userActions]: true, [$style.expanded]: fullyExpanded }"
 					>
-						<N8nIconButton icon="ellipsis" text square type="tertiary" />
+						<N8nIconButton variant="ghost" iconOnly icon="ellipsis" square />
 					</div>
 				</div>
 			</template>
diff --git a/packages/frontend/editor-ui/src/app/components/NodeExecuteButton.test.ts b/packages/frontend/editor-ui/src/app/components/NodeExecuteButton.test.ts
index 32303d63b66..1c515b623f5 100644
--- a/packages/frontend/editor-ui/src/app/components/NodeExecuteButton.test.ts
+++ b/packages/frontend/editor-ui/src/app/components/NodeExecuteButton.test.ts
@@ -225,7 +225,7 @@ describe('NodeExecuteButton', () => {
 		workflowsStore.isWorkflowRunning = true;
 
 		const { getByRole } = renderComponent();
-		expect(getByRole('button').querySelector('.n8n-spinner')).toBeVisible();
+		expect(getByRole('button')).toHaveAttribute('aria-busy', 'true');
 	});
 
 	it('should be disabled if the node is disabled and show tooltip', async () => {
diff --git a/packages/frontend/editor-ui/src/app/components/NodeExecuteButton.vue b/packages/frontend/editor-ui/src/app/components/NodeExecuteButton.vue
index 1d5df242e55..89caaab4173 100644
--- a/packages/frontend/editor-ui/src/app/components/NodeExecuteButton.vue
+++ b/packages/frontend/editor-ui/src/app/components/NodeExecuteButton.vue
@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useI18n } from '@n8n/i18n';
 import type { ButtonSize, IUpdateInformation } from '@/Interface';
-import type { ButtonType } from '@n8n/design-system';
+import type { ButtonVariant } from '@n8n/design-system';
 import { type IconName } from '@n8n/design-system/components/N8nIcon/icons';
 import { N8nButton, N8nTooltip } from '@n8n/design-system';
 import { useWorkflowsStore } from '@/app/stores/workflows.store';
@@ -19,7 +19,7 @@ const props = withDefaults(
 		telemetrySource: string;
 		disabled?: boolean;
 		label?: string;
-		type?: ButtonType;
+		variant?: ButtonVariant;
 		size?: ButtonSize;
 		icon?: IconName;
 		square?: boolean;
@@ -152,7 +152,7 @@ async function onClick() {
 			:loading="isExecuting && showLoadingSpinner"
 			:disabled="disabled || !!disabledHint || (isExecuting && !showLoadingSpinner)"
 			:label="buttonLabel"
-			:type="type"
+			:variant="variant"
 			:size="size"
 			:icon="buttonIcon"
 			:square="square"
diff --git a/packages/frontend/editor-ui/src/app/components/NpsSurvey.vue b/packages/frontend/editor-ui/src/app/components/NpsSurvey.vue
index 91462a44b05..1a1ba05f9bd 100644
--- a/packages/frontend/editor-ui/src/app/components/NpsSurvey.vue
+++ b/packages/frontend/editor-ui/src/app/components/NpsSurvey.vue
@@ -152,9 +152,9 @@ watch(
 					<div :class="$style.buttons" data-test-id="nps-survey-ratings">
 						<div v-for="value in 11" :key="value - 1" :class="$style.container">
 							<N8nButton
-								type="tertiary"
+								variant="subtle"
+								iconOnly
 								:label="(value - 1).toString()"
-								square
 								@click="selectSurveyValue((value - 1).toString())"
 							/>
 						</div>
diff --git a/packages/frontend/editor-ui/src/app/components/SaveButton.vue b/packages/frontend/editor-ui/src/app/components/SaveButton.vue
index f75f1cf00ce..84173bd3aea 100644
--- a/packages/frontend/editor-ui/src/app/components/SaveButton.vue
+++ b/packages/frontend/editor-ui/src/app/components/SaveButton.vue
@@ -2,7 +2,7 @@
 import KeyboardShortcutTooltip from '@/app/components/KeyboardShortcutTooltip.vue';
 import { useI18n } from '@n8n/i18n';
 import { computed } from 'vue';
-import type { ButtonType } from '@n8n/design-system';
+import type { ButtonVariant } from '@n8n/design-system';
 
 import { N8nButton } from '@n8n/design-system';
 
@@ -18,14 +18,14 @@ const props = withDefaults(
 		saved: boolean;
 		isSaving?: boolean;
 		disabled?: boolean;
-		type?: ButtonType;
+		variant?: ButtonVariant;
 		withShortcut?: boolean;
 		shortcutTooltip?: string;
 		savingLabel?: string;
 	}>(),
 	{
 		isSaving: false,
-		type: 'primary',
+		variant: 'solid',
 		withShortcut: false,
 		disabled: false,
 	},
@@ -61,7 +61,7 @@ const shortcutTooltipLabel = computed(() => {
 					:loading="isSaving"
 					:disabled="disabled"
 					:class="$style.button"
-					:type="type"
+					:variant="variant"
 					@click="emit('click')"
 				/>
 			</KeyboardShortcutTooltip>
@@ -71,7 +71,7 @@ const shortcutTooltipLabel = computed(() => {
 				:loading="isSaving"
 				:disabled="disabled"
 				:class="$style.button"
-				:type="type"
+				:variant="variant"
 				@click="emit('click')"
 			/>
 		</template>
diff --git a/packages/frontend/editor-ui/src/app/components/StopManyExecutionsModal.vue b/packages/frontend/editor-ui/src/app/components/StopManyExecutionsModal.vue
index 84f87dd13dd..293ee2cdf64 100644
--- a/packages/frontend/editor-ui/src/app/components/StopManyExecutionsModal.vue
+++ b/packages/frontend/editor-ui/src/app/components/StopManyExecutionsModal.vue
@@ -144,7 +144,7 @@ function closeModal() {
 		<template #footer>
 			<div :class="$style.footer">
 				<N8nButton
-					type="tertiary"
+					variant="subtle"
 					:label="i18n.baseText('executionStopManyModal.button.close')"
 					data-test-id="sme-close-button"
 					@click="closeModal"
diff --git a/packages/frontend/editor-ui/src/app/components/UpdatesPanel.vue b/packages/frontend/editor-ui/src/app/components/UpdatesPanel.vue
index e73d4c28e3a..0415d19355b 100644
--- a/packages/frontend/editor-ui/src/app/components/UpdatesPanel.vue
+++ b/packages/frontend/editor-ui/src/app/components/UpdatesPanel.vue
@@ -53,8 +53,7 @@ const i18n = useI18n();
 
 				<N8nButton
 					v-if="versionsStore.infoUrl"
-					:text="true"
-					type="primary"
+					variant="ghost"
 					size="large"
 					:class="$style['link']"
 					:bold="true"
diff --git a/packages/frontend/editor-ui/src/app/components/WorkflowDescriptionModal.vue b/packages/frontend/editor-ui/src/app/components/WorkflowDescriptionModal.vue
index 75d843d6558..167a2d5f4a1 100644
--- a/packages/frontend/editor-ui/src/app/components/WorkflowDescriptionModal.vue
+++ b/packages/frontend/editor-ui/src/app/components/WorkflowDescriptionModal.vue
@@ -136,18 +136,18 @@ onMounted(() => {
 		<template #footer>
 			<div :class="$style['popover-footer']">
 				<N8nButton
+					variant="subtle"
 					:label="i18n.baseText('generic.cancel')"
 					:size="'small'"
 					:disabled="isSaving"
-					type="tertiary"
 					data-test-id="workflow-description-cancel-button"
 					@click="cancel"
 				/>
 				<N8nButton
+					variant="solid"
 					:label="i18n.baseText('generic.unsavedWork.confirmMessage.confirmButtonText')"
 					:loading="isSaving"
 					:disabled="!canSave || isSaving"
-					type="primary"
 					data-test-id="workflow-description-save-button"
 					@click="save"
 				/>
diff --git a/packages/frontend/editor-ui/src/app/components/WorkflowExtractionNameModal.vue b/packages/frontend/editor-ui/src/app/components/WorkflowExtractionNameModal.vue
index 482fb2911b6..bb5976d2bc1 100644
--- a/packages/frontend/editor-ui/src/app/components/WorkflowExtractionNameModal.vue
+++ b/packages/frontend/editor-ui/src/app/components/WorkflowExtractionNameModal.vue
@@ -90,7 +90,7 @@ onMounted(() => {
 		<template #footer="{ close }">
 			<div :class="$style.footer">
 				<N8nButton
-					type="secondary"
+					variant="subtle"
 					:label="i18n.baseText('generic.cancel')"
 					float="right"
 					data-test-id="cancel-button"
diff --git a/packages/frontend/editor-ui/src/app/components/WorkflowSettings.vue b/packages/frontend/editor-ui/src/app/components/WorkflowSettings.vue
index b3a2e9b141a..9b63219edfb 100644
--- a/packages/frontend/editor-ui/src/app/components/WorkflowSettings.vue
+++ b/packages/frontend/editor-ui/src/app/components/WorkflowSettings.vue
@@ -850,9 +850,8 @@ onBeforeUnmount(() => {
 							</N8nSelect>
 							<N8nIconButton
 								v-if="workflowSettings.credentialResolverId"
+								variant="ghost"
 								icon="pen"
-								type="tertiary"
-								:text="true"
 								size="small"
 								:disabled="readOnlyEnv || !workflowPermissions.update"
 								:title="i18n.baseText('workflowSettings.credentialResolver.edit')"
diff --git a/packages/frontend/editor-ui/src/app/components/WorkflowShareModal.ee.vue b/packages/frontend/editor-ui/src/app/components/WorkflowShareModal.ee.vue
index e727eae609a..2b7fd9398cb 100644
--- a/packages/frontend/editor-ui/src/app/components/WorkflowShareModal.ee.vue
+++ b/packages/frontend/editor-ui/src/app/components/WorkflowShareModal.ee.vue
@@ -344,7 +344,7 @@ watch(
 				<N8nText v-show="isDirty" color="text-light" size="small" class="mr-xs">
 					{{ i18n.baseText('workflows.shareModal.changesHint') }}
 				</N8nText>
-				<N8nButton v-if="isHomeTeamProject" type="secondary" @click="modalBus.emit('close')">
+				<N8nButton variant="subtle" v-if="isHomeTeamProject" @click="modalBus.emit('close')">
 					{{ i18n.baseText('generic.close') }}
 				</N8nButton>
 				<N8nButton
diff --git a/packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.vue b/packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.vue
index ec669cfc221..ca82b3f4627 100644
--- a/packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.vue
+++ b/packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.vue
@@ -44,14 +44,14 @@ const handleClearSelection = () => {
 			{{ getSelectedText() }}
 		</span>
 		<N8nButton
-			type="tertiary"
+			variant="subtle"
 			data-test-id="delete-selected-button"
 			:label="i18n.baseText('generic.delete')"
 			:class="$style.button"
 			@click="handleDeleteSelected"
 		/>
 		<N8nButton
-			type="tertiary"
+			variant="subtle"
 			data-test-id="clear-selection-button"
 			:label="getClearSelectionText()"
 			:class="$style.button"
diff --git a/packages/frontend/editor-ui/src/app/components/forms/ResourceFiltersDropdown.vue b/packages/frontend/editor-ui/src/app/components/forms/ResourceFiltersDropdown.vue
index 12adf01d9c0..eed70f6c61a 100644
--- a/packages/frontend/editor-ui/src/app/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/frontend/editor-ui/src/app/components/forms/ResourceFiltersDropdown.vue
@@ -113,8 +113,8 @@ onBeforeMount(async () => {
 	<N8nPopover width="304px" :content-class="$style['popover-content']">
 		<template #trigger>
 			<N8nButton
+				variant="subtle"
 				icon="funnel"
-				type="tertiary"
 				size="small"
 				:active="hasFilters"
 				:class="{
diff --git a/packages/frontend/editor-ui/src/app/components/layouts/EmptyStateLayout.vue b/packages/frontend/editor-ui/src/app/components/layouts/EmptyStateLayout.vue
index 42ef30b4286..26183a01e04 100644
--- a/packages/frontend/editor-ui/src/app/components/layouts/EmptyStateLayout.vue
+++ b/packages/frontend/editor-ui/src/app/components/layouts/EmptyStateLayout.vue
@@ -122,7 +122,7 @@ const handleBuilderPromptSubmit = async (prompt: string) => {
 					<div :class="$style.actionButtons">
 						<ReadyToRunButton type="secondary" size="large" />
 						<N8nButton
-							type="secondary"
+							variant="subtle"
 							icon="file"
 							size="large"
 							data-test-id="start-from-scratch-button"
diff --git a/packages/frontend/editor-ui/src/app/views/EntityNotFound.vue b/packages/frontend/editor-ui/src/app/views/EntityNotFound.vue
index 0182b9ef90e..5418c85b739 100644
--- a/packages/frontend/editor-ui/src/app/views/EntityNotFound.vue
+++ b/packages/frontend/editor-ui/src/app/views/EntityNotFound.vue
@@ -58,7 +58,7 @@ const locale = useI18n();
 					})
 				}}
 			</N8nText>
-			<N8nButton href="/" element="a" type="secondary">
+			<N8nButton variant="subtle" href="/">
 				{{ locale.baseText('error.entityNotFound.action') }}
 			</N8nButton>
 		</N8nCard>
diff --git a/packages/frontend/editor-ui/src/app/views/NodeView.vue b/packages/frontend/editor-ui/src/app/views/NodeView.vue
index a3b769a79fb..6888ad0087b 100644
--- a/packages/frontend/editor-ui/src/app/views/NodeView.vue
+++ b/packages/frontend/editor-ui/src/app/views/NodeView.vue
@@ -1958,7 +1958,7 @@ onBeforeUnmount(() => {
 				<template v-if="containsChatTriggerNodes">
 					<CanvasChatButton
 						v-if="isLogsPanelOpen"
-						type="tertiary"
+						variant="ghost"
 						:label="i18n.baseText('chat.hide')"
 						:class="$style.chatButton"
 						@click="logsStore.toggleOpen(false)"
@@ -1969,7 +1969,7 @@ onBeforeUnmount(() => {
 						:shortcut="{ keys: ['c'] }"
 					>
 						<CanvasChatButton
-							:type="isRunWorkflowButtonVisible ? 'secondary' : 'primary'"
+							:variant="isRunWorkflowButtonVisible ? 'outline' : 'solid'"
 							:label="i18n.baseText('chat.open')"
 							:class="$style.chatButton"
 							@click="onOpenChat"
diff --git a/packages/frontend/editor-ui/src/app/views/OAuthConsentView.vue b/packages/frontend/editor-ui/src/app/views/OAuthConsentView.vue
index 55d30121b3b..4f32c9ed6a9 100644
--- a/packages/frontend/editor-ui/src/app/views/OAuthConsentView.vue
+++ b/packages/frontend/editor-ui/src/app/views/OAuthConsentView.vue
@@ -132,7 +132,7 @@ onMounted(async () => {
 				></N8nNotice>
 				<div :class="$style['button-group']">
 					<N8nButton
-						type="tertiary"
+						variant="subtle"
 						:data-test-id="'consent-deny-button'"
 						:size="'large'"
 						:loading="loading"
@@ -142,7 +142,7 @@ onMounted(async () => {
 						{{ i18n.baseText('generic.deny') }}
 					</N8nButton>
 					<N8nButton
-						type="primary"
+						variant="solid"
 						:data-test-id="'consent-allow-button'"
 						:size="'large'"
 						:loading="loading"
diff --git a/packages/frontend/editor-ui/src/app/views/WorkflowsView.vue b/packages/frontend/editor-ui/src/app/views/WorkflowsView.vue
index ec6e7690da2..5a42d9f5b3b 100644
--- a/packages/frontend/editor-ui/src/app/views/WorkflowsView.vue
+++ b/packages/frontend/editor-ui/src/app/views/WorkflowsView.vue
@@ -1807,9 +1807,9 @@ const onNameSubmit = async (name: string) => {
 					</span>
 				</template>
 				<N8nButton
+					variant="subtle"
 					size="small"
 					icon="folder-plus"
-					type="tertiary"
 					data-test-id="add-folder-button"
 					:class="$style['add-folder-button']"
 					:disabled="!showRegisteredCommunityCTA && (readOnlyEnv || !hasPermissionToCreateFolders)"
@@ -1828,9 +1828,9 @@ const onNameSubmit = async (name: string) => {
 				<template #trailingContent>
 					<div :class="$style['callout-trailing-content']">
 						<N8nButton
+							variant="subtle"
 							data-test-id="easy-ai-button"
 							size="small"
-							type="secondary"
 							@click="createAIStarterWorkflows('callout')"
 						>
 							{{ i18n.baseText('generic.startNow') }}
@@ -1866,9 +1866,9 @@ const onNameSubmit = async (name: string) => {
 				<template #trailingContent>
 					<div :class="$style['callout-trailing-content']">
 						<N8nButton
+							variant="subtle"
 							data-test-id="easy-ai-button"
 							size="small"
-							type="secondary"
 							@click="handleCreateReadyToRunWorkflows('callout')"
 						>
 							{{ i18n.baseText('generic.startNow') }}
diff --git a/packages/frontend/editor-ui/src/experiments/emptyStateBuilderPrompt/components/EmptyStateBuilderPrompt.vue b/packages/frontend/editor-ui/src/experiments/emptyStateBuilderPrompt/components/EmptyStateBuilderPrompt.vue
index 210c6092cbb..a7b07e751a8 100644
--- a/packages/frontend/editor-ui/src/experiments/emptyStateBuilderPrompt/components/EmptyStateBuilderPrompt.vue
+++ b/packages/frontend/editor-ui/src/experiments/emptyStateBuilderPrompt/components/EmptyStateBuilderPrompt.vue
@@ -132,17 +132,17 @@ function handleFileImport() {
 					i18n.baseText('emptyStateBuilderPrompt.orStartWith')
 				}}</span>
 				<N8nTooltip :content="i18n.baseText('emptyStateBuilderPrompt.fromScratchTooltip')">
-					<N8nButton type="secondary" size="small" icon="play" @click="onFromScratch">
+					<N8nButton variant="subtle" size="small" icon="play" @click="onFromScratch">
 						{{ i18n.baseText('emptyStateBuilderPrompt.fromScratch') }}
 					</N8nButton>
 				</N8nTooltip>
 				<N8nTooltip :content="i18n.baseText('emptyStateBuilderPrompt.templateTooltip')">
-					<N8nButton type="secondary" size="small" icon="layout-template" @click="onTemplate">
+					<N8nButton variant="subtle" size="small" icon="layout-template" @click="onTemplate">
 						{{ i18n.baseText('emptyStateBuilderPrompt.template') }}
 					</N8nButton>
 				</N8nTooltip>
 				<N8nTooltip :content="i18n.baseText('emptyStateBuilderPrompt.importFromFileTooltip')">
-					<N8nButton type="secondary" size="small" icon="upload" @click="onImportFromFile">
+					<N8nButton variant="subtle" size="small" icon="upload" @click="onImportFromFile">
 						{{ i18n.baseText('emptyStateBuilderPrompt.importFromFile') }}
 					</N8nButton>
 				</N8nTooltip>
diff --git a/packages/frontend/editor-ui/src/experiments/resourceCenter/components/FeaturedSandboxCard.vue b/packages/frontend/editor-ui/src/experiments/resourceCenter/components/FeaturedSandboxCard.vue
index 6c3fc8d5752..26e858cbe5f 100644
--- a/packages/frontend/editor-ui/src/experiments/resourceCenter/components/FeaturedSandboxCard.vue
+++ b/packages/frontend/editor-ui/src/experiments/resourceCenter/components/FeaturedSandboxCard.vue
@@ -73,8 +73,8 @@ const handleClick = () => {
 			</div>
 			<div :class="$style.actions">
 				<N8nButton
+					variant="subtle"
 					:label="i18n.baseText('experiments.resourceCenter.sandbox.tryItNow')"
-					type="secondary"
 					size="small"
 					@click.stop="handleClick"
 				/>
diff --git a/packages/frontend/editor-ui/src/experiments/resourceCenter/components/QuickStartCard.vue b/packages/frontend/editor-ui/src/experiments/resourceCenter/components/QuickStartCard.vue
index cb8110e67a2..93d9b0de87f 100644
--- a/packages/frontend/editor-ui/src/experiments/resourceCenter/components/QuickStartCard.vue
+++ b/packages/frontend/editor-ui/src/experiments/resourceCenter/components/QuickStartCard.vue
@@ -43,9 +43,9 @@ const handleClick = () => {
 		</div>
 		<div :class="[$style.actions, 'mt-m']">
 			<N8nButton
+				variant="subtle"
 				:label="i18n.baseText('experiments.resourceCenter.templateCard.useNow')"
-				type="secondary"
-				size="mini"
+				size="xsmall"
 				@click.stop="handleClick"
 			/>
 		</div>
diff --git a/packages/frontend/editor-ui/src/experiments/templateRecoV2/components/TemplateCard.vue b/packages/frontend/editor-ui/src/experiments/templateRecoV2/components/TemplateCard.vue
index fccd6c873cf..e65f5732eb7 100644
--- a/packages/frontend/editor-ui/src/experiments/templateRecoV2/components/TemplateCard.vue
+++ b/packages/frontend/editor-ui/src/experiments/templateRecoV2/components/TemplateCard.vue
@@ -66,9 +66,9 @@ const handleUseTemplate = async () => {
 		</div>
 		<div :class="[$style.actions, 'mt-m']">
 			<N8nButton
+				variant="subtle"
 				:label="locale.baseText('workflows.templateRecoV2.useTemplate')"
-				type="secondary"
-				size="mini"
+				size="xsmall"
 				@click="handleUseTemplate"
 			/>
 		</div>
diff --git a/packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/NotificationPermissionBanner.vue b/packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/NotificationPermissionBanner.vue
index 570a161580c..c070058cb10 100644
--- a/packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/NotificationPermissionBanner.vue
+++ b/packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/NotificationPermissionBanner.vue
@@ -31,8 +31,8 @@ function onDismissClick() {
 			{{ i18n.baseText('aiAssistant.builder.notificationBanner.text') }}
 		</span>
 		<N8nButton
-			type="primary"
-			size="mini"
+			variant="solid"
+			size="xsmall"
 			data-test-id="notification-banner-notify"
 			@click="onNotifyClick"
 		>
diff --git a/packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/PlanQuestionsMessage.vue b/packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/PlanQuestionsMessage.vue
index dd02192606d..5fda29cf864 100644
--- a/packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/PlanQuestionsMessage.vue
+++ b/packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/PlanQuestionsMessage.vue
@@ -275,7 +275,7 @@ function submitAnswers() {
 				<div :class="$style.navigation">
 					<N8nButton
 						v-if="!isFirstQuestion"
-						type="secondary"
+						variant="subtle"
 						size="small"
 						:disabled="disabled"
 						@click="goToPrevious"
diff --git a/packages/frontend/editor-ui/src/features/ai/assistant/components/Chat/NewAssistantSessionModal.vue b/packages/frontend/editor-ui/src/features/ai/assistant/components/Chat/NewAssistantSessionModal.vue
index eb07ffdfa3a..8c4dc296df8 100644
--- a/packages/frontend/editor-ui/src/features/ai/assistant/components/Chat/NewAssistantSessionModal.vue
+++ b/packages/frontend/editor-ui/src/features/ai/assistant/components/Chat/NewAssistantSessionModal.vue
@@ -68,7 +68,7 @@ const startNewSession = async () => {
 		</template>
 		<template #footer>
 			<div :class="$style.footer">
-				<N8nButton :label="i18n.baseText('generic.cancel')" type="secondary" @click="close" />
+				<N8nButton variant="subtle" :label="i18n.baseText('generic.cancel')" @click="close" />
 				<N8nButton
 					:label="i18n.baseText('aiAssistant.newSessionModal.confirm')"
 					@click="startNewSession"
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/ChatPersonalAgentsView.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/ChatPersonalAgentsView.vue
index 485675c96a5..64eb607b6c0 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/ChatPersonalAgentsView.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/ChatPersonalAgentsView.vue
@@ -101,7 +101,7 @@ watch(
 						{{ i18n.baseText('chatHub.personalAgents.description') }}
 					</N8nText>
 				</div>
-				<N8nButton icon="plus" type="primary" size="medium" @click="handleCreateAgent">
+				<N8nButton variant="solid" icon="plus" size="medium" @click="handleCreateAgent">
 					{{ i18n.baseText('chatHub.agents.button.newAgent') }}
 				</N8nButton>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/ChatView.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/ChatView.vue
index c04171a201a..8d17a74e5dd 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/ChatView.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/ChatView.vue
@@ -821,7 +821,7 @@ function onFilesDropped(files: File[]) {
 						<div v-if="!showWelcomeScreen" :class="$style.promptContainer">
 							<N8nIconButton
 								v-if="!arrivedState.bottom && !isNewSession"
-								type="secondary"
+								variant="subtle"
 								icon="arrow-down"
 								:class="$style.scrollToBottomButton"
 								:title="i18n.baseText('chatHub.chat.scrollToBottom')"
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/AgentEditorModal.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/AgentEditorModal.vue
index 0eb66ee2b35..e85245f7815 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/AgentEditorModal.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/AgentEditorModal.vue
@@ -280,8 +280,8 @@ function onSelectTools() {
 			<div :class="$style.header">
 				<N8nHeading tag="h2" size="large">{{ title }}</N8nHeading>
 				<N8nButton
+					variant="subtle"
 					v-if="isEditMode"
-					type="secondary"
 					icon="trash-2"
 					:disabled="isDeleting"
 					:loading="isDeleting"
@@ -386,10 +386,10 @@ function onSelectTools() {
 		</template>
 		<template #footer>
 			<div :class="$style.footer">
-				<N8nButton type="secondary" @click="modalBus.emit('close')">{{
+				<N8nButton variant="subtle" @click="modalBus.emit('close')">{{
 					i18n.baseText('chatHub.tools.editor.cancel')
 				}}</N8nButton>
-				<N8nButton type="primary" :disabled="!isValid || isSaving" @click="onSave">
+				<N8nButton variant="solid" :disabled="!isValid || isSaving" @click="onSave">
 					{{ saveButtonLabel }}
 				</N8nButton>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatAgentCard.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatAgentCard.vue
index f3a400ad142..2c34a3535cb 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatAgentCard.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatAgentCard.vue
@@ -59,9 +59,9 @@ function handleSelectMenu(action: MenuAction) {
 
 		<div :class="$style.actions">
 			<N8nIconButton
+				variant="subtle"
 				v-if="canEdit"
 				icon="pen"
-				type="tertiary"
 				size="medium"
 				:title="i18n.baseText('chatHub.agent.card.button.edit')"
 				@click.prevent="emit('edit')"
@@ -75,11 +75,10 @@ function handleSelectMenu(action: MenuAction) {
 			>
 				<template #activator>
 					<N8nIconButton
+						variant="ghost"
 						icon="ellipsis-vertical"
-						type="tertiary"
 						size="medium"
 						:title="i18n.baseText('chatHub.agent.card.button.moreOptions')"
-						text
 						:class="$style.actionDropdownTrigger"
 					/>
 				</template>
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatConversationHeader.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatConversationHeader.vue
index 69767e5a22f..bbfe4818597 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatConversationHeader.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatConversationHeader.vue
@@ -96,25 +96,24 @@ defineExpose({
 		</div>
 		<N8nButton
 			v-if="showArtifactIcon"
-			type="secondary"
+			variant="subtle"
 			size="medium"
 			icon="notebook-pen"
-			text
 			@click="emit('reopenArtifact')"
 		/>
 		<N8nButton
+			variant="subtle"
 			v-if="selectedModel?.model.provider === 'custom-agent'"
 			:class="$style.editAgent"
-			type="secondary"
 			size="small"
 			icon="settings"
 			:label="i18n.baseText('chatHub.chat.header.button.editAgent')"
 			@click="emit('editCustomAgent', selectedModel.model.agentId)"
 		/>
 		<N8nButton
+			variant="subtle"
 			v-if="showOpenWorkflow"
 			:class="$style.editAgent"
-			type="secondary"
 			size="small"
 			icon="settings"
 			:label="i18n.baseText('chatHub.chat.header.button.openWorkflow')"
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatMessage.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatMessage.vue
index 17830f06cb1..44b5f2079fe 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatMessage.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatMessage.vue
@@ -356,18 +356,16 @@ onBeforeMount(() => {
 				<div :class="$style.editFooter">
 					<N8nIconButton
 						v-if="message.type === 'human'"
-						native-type="button"
-						type="secondary"
+						variant="ghost"
 						icon="paperclip"
-						text
 						@click.stop="handleAttachClick"
 					/>
 					<div :class="$style.editActions">
-						<N8nButton type="secondary" size="small" @click="handleCancelEdit">
+						<N8nButton variant="subtle" size="small" @click="handleCancelEdit">
 							{{ i18n.baseText('chatHub.message.edit.cancel') }}
 						</N8nButton>
 						<N8nButton
-							type="primary"
+							variant="solid"
 							size="small"
 							:disabled="!editedText.trim() || isEditSubmitting"
 							:loading="isEditSubmitting"
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatMessageActions.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatMessageActions.vue
index 6c4dc00be90..b38fb77d413 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatMessageActions.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatMessageActions.vue
@@ -74,10 +74,9 @@ function handleReadAloud() {
 			:show-after="300"
 		>
 			<N8nIconButton
+				variant="ghost"
 				:icon="isSpeaking ? 'volume-x' : 'volume-2'"
-				type="tertiary"
 				size="medium"
-				text
 				@click="handleReadAloud"
 			/>
 			<template #content>{{
@@ -88,10 +87,9 @@ function handleReadAloud() {
 		</N8nTooltip>
 		<N8nTooltip v-if="canEdit" placement="bottom" :show-after="300">
 			<N8nIconButton
+				variant="ghost"
 				icon="pen"
-				type="tertiary"
 				size="medium"
-				text
 				data-test-id="chat-message-edit"
 				:disabled="hasSessionStreaming"
 				@click="handleEdit"
@@ -100,10 +98,9 @@ function handleReadAloud() {
 		</N8nTooltip>
 		<N8nTooltip v-if="canRegenerate" placement="bottom" :show-after="300">
 			<N8nIconButton
+				variant="ghost"
 				icon="refresh-cw"
-				type="tertiary"
 				size="medium"
-				text
 				data-test-id="chat-message-regenerate"
 				:disabled="hasSessionStreaming"
 				@click="handleRegenerate"
@@ -111,13 +108,7 @@ function handleReadAloud() {
 			<template #content>{{ i18n.baseText('chatHub.message.actions.regenerate') }}</template>
 		</N8nTooltip>
 		<N8nTooltip v-if="executionUrl" placement="bottom" :show-after="300">
-			<N8nIconButton
-				icon="info"
-				type="tertiary"
-				size="medium"
-				text
-				data-test-id="chat-message-info"
-			/>
+			<N8nIconButton variant="ghost" icon="info" size="medium" data-test-id="chat-message-info" />
 			<template #content>
 				{{ i18n.baseText('chatHub.message.actions.executionId') }}:
 				<N8nLink :to="executionUrl" :new-window="true">
@@ -127,10 +118,9 @@ function handleReadAloud() {
 		</N8nTooltip>
 		<template v-if="message.alternatives.length > 1">
 			<N8nIconButton
+				variant="ghost"
 				icon="chevron-left"
-				type="tertiary"
 				size="medium"
-				text
 				:disabled="hasSessionStreaming || currentAlternativeIndex === 0"
 				data-test-id="chat-message-prev-alternative"
 				@click="$emit('switchAlternative', message.alternatives[currentAlternativeIndex - 1])"
@@ -139,10 +129,9 @@ function handleReadAloud() {
 				{{ `${currentAlternativeIndex + 1}/${message.alternatives.length}` }}
 			</N8nText>
 			<N8nIconButton
+				variant="ghost"
 				icon="chevron-right"
-				type="tertiary"
 				size="medium"
-				text
 				:disabled="
 					hasSessionStreaming || currentAlternativeIndex === message.alternatives.length - 1
 				"
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatPrompt.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatPrompt.vue
index b1da3188cda..1c621ca746f 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatPrompt.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatPrompt.vue
@@ -366,24 +366,21 @@ defineExpose({
 							placement="top"
 						>
 							<N8nIconButton
-								native-type="button"
-								type="secondary"
+								variant="ghost"
 								:disabled="messagingState !== 'idle' || !canUploadFiles"
 								icon="paperclip"
 								icon-size="large"
-								text
 								@click.stop="onAttach"
 							/>
 						</N8nTooltip>
 						<N8nIconButton
 							v-if="speechInput.isSupported"
-							native-type="button"
+							variant="outline"
 							:title="
 								speechInput.isListening.value
 									? i18n.baseText('chatHub.chat.prompt.button.stopRecording')
 									: i18n.baseText('chatHub.chat.prompt.button.voiceInput')
 							"
-							type="secondary"
 							:disabled="messagingState !== 'idle'"
 							:icon="speechInput.isListening.value ? 'square' : 'mic'"
 							:class="{ [$style.recording]: speechInput.isListening.value }"
@@ -392,7 +389,7 @@ defineExpose({
 						/>
 						<N8nIconButton
 							v-if="messagingState !== 'receiving'"
-							native-type="submit"
+							type="submit"
 							:disabled="messagingState !== 'idle' || !message.trim()"
 							:title="i18n.baseText('chatHub.chat.prompt.button.send')"
 							:loading="messagingState === 'waitingFirstChunk'"
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatProvidersTable.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatProvidersTable.vue
index 4773dea2b41..dbe1c7be279 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatProvidersTable.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatProvidersTable.vue
@@ -138,10 +138,10 @@ const onTableAction = (action: string, settings: ChatProviderSettingsDto) => {
 				<div :class="$style.actions">
 					<N8nTooltip :content="i18n.baseText('settings.chatHub.providers.table.refresh.tooltip')">
 						<N8nButton
+							variant="subtle"
+							iconOnly
 							size="small"
-							type="tertiary"
 							icon="refresh-cw"
-							:square="true"
 							@click="$emit('refresh')"
 						/>
 					</N8nTooltip>
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatSidebarLink.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatSidebarLink.vue
index e9c7f995b5b..840473b7316 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatSidebarLink.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatSidebarLink.vue
@@ -61,9 +61,8 @@ defineSlots<{
 			>
 				<template #activator>
 					<N8nIconButton
+						variant="ghost"
 						icon="ellipsis-vertical"
-						type="tertiary"
-						text
 						:class="$style.actionDropdownTrigger"
 					/>
 				</template>
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatStarter.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatStarter.vue
index 45b99bdbd8f..74a480a6e20 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatStarter.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ChatStarter.vue
@@ -125,7 +125,7 @@ function handleUpgradeClick() {
 
 			<div :class="$style.buttonGroup">
 				<N8nButton
-					type="primary"
+					variant="solid"
 					size="medium"
 					icon="plus"
 					data-test-id="welcome-start-new-chat"
@@ -150,7 +150,7 @@ function handleUpgradeClick() {
 						</I18nT>
 					</template>
 					<N8nButton
-						type="secondary"
+						variant="subtle"
 						size="medium"
 						icon="users"
 						:disabled="isInviteDisabled"
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/CopyButton.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/CopyButton.vue
index 7d55705a588..988d0ea5f4e 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/CopyButton.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/CopyButton.vue
@@ -25,10 +25,9 @@ async function handleCopy() {
 <template>
 	<N8nTooltip placement="bottom" :show-after="300">
 		<N8nIconButton
+			variant="ghost"
 			:icon="justCopied ? 'check' : 'copy'"
-			type="tertiary"
 			size="medium"
-			text
 			:class="$style.button"
 			tabindex="0"
 			:aria-label="copyTooltip"
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/CredentialSelectorModal.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/CredentialSelectorModal.vue
index c1517b1be4d..fced85db5d5 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/CredentialSelectorModal.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/CredentialSelectorModal.vue
@@ -124,10 +124,10 @@ function onCancel() {
 		</template>
 		<template #footer>
 			<div :class="$style.footer">
-				<N8nButton type="tertiary" @click="onCancel">
+				<N8nButton variant="subtle" @click="onCancel">
 					{{ i18n.baseText('chatHub.credentials.selector.cancel') }}
 				</N8nButton>
-				<N8nButton type="primary" :disabled="!selectedCredentialId" @click="onConfirm">
+				<N8nButton variant="solid" :disabled="!selectedCredentialId" @click="onConfirm">
 					{{ i18n.baseText('chatHub.credentials.selector.confirm') }}
 				</N8nButton>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ModelByIdSelectorModal.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ModelByIdSelectorModal.vue
index 69c366a6893..9a684ea454b 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ModelByIdSelectorModal.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ModelByIdSelectorModal.vue
@@ -91,10 +91,10 @@ function onCancel() {
 		</template>
 		<template #footer>
 			<div :class="$style.footer">
-				<N8nButton type="tertiary" @click="onCancel">
+				<N8nButton variant="subtle" @click="onCancel">
 					{{ i18n.baseText('chatHub.models.byIdSelector.cancel') }}
 				</N8nButton>
-				<N8nButton type="primary" :disabled="!modelId" @click="onConfirm">
+				<N8nButton variant="solid" :disabled="!modelId" @click="onConfirm">
 					{{ i18n.baseText('chatHub.models.byIdSelector.confirm') }}
 				</N8nButton>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ModelSelector.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ModelSelector.vue
index ea03cf8e603..0fb5259a994 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ModelSelector.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ModelSelector.vue
@@ -196,8 +196,8 @@ defineExpose({
 	>
 		<template #trigger>
 			<N8nButton
+				variant="ghost"
 				:class="$style.dropdownButton"
-				type="secondary"
 				:text="text"
 				data-test-id="chat-model-selector"
 			>
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ProviderSettingsModal.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ProviderSettingsModal.vue
index 8f365fd5d76..ef452360417 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ProviderSettingsModal.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ProviderSettingsModal.vue
@@ -276,11 +276,11 @@ watch(
 						/>
 						<N8nIconButton
 							v-if="settings.credentialId"
-							native-type="button"
+							type="button"
+							variant="outline"
 							:title="i18n.baseText('settings.chatHub.providers.modal.edit.credential.clearButton')"
 							icon="x"
 							icon-size="large"
-							type="secondary"
 							@click="onCredentialDeselect"
 						/>
 					</div>
@@ -340,10 +340,10 @@ watch(
 		<template #footer>
 			<div :class="$style.footer">
 				<div :class="$style.footerRight">
-					<N8nButton type="tertiary" @click="onCancel">
+					<N8nButton variant="subtle" @click="onCancel">
 						{{ i18n.baseText('settings.chatHub.providers.modal.edit.cancel') }}
 					</N8nButton>
-					<N8nButton type="primary" @click="onConfirm" :disabled="isConfirmDisabled">
+					<N8nButton variant="solid" @click="onConfirm" :disabled="isConfirmDisabled">
 						{{ i18n.baseText('settings.chatHub.providers.modal.edit.confirm') }}
 					</N8nButton>
 				</div>
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ToolsSelector.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ToolsSelector.vue
index b8a80acfb0a..2f35d03e001 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ToolsSelector.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ToolsSelector.vue
@@ -48,7 +48,7 @@ onMounted(async () => {
 <template>
 	<N8nTooltip :content="disabledTooltip" :disabled="!disabledTooltip" placement="top">
 		<N8nButton
-			type="secondary"
+			variant="subtle"
 			native-type="button"
 			:class="[$style.toolsButton, { [$style.transparentBg]: transparentBg }]"
 			:disabled="disabled"
diff --git a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ToolsSelectorModal.vue b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ToolsSelectorModal.vue
index 2c38036c13e..46b5a3f95b4 100644
--- a/packages/frontend/editor-ui/src/features/ai/chatHub/components/ToolsSelectorModal.vue
+++ b/packages/frontend/editor-ui/src/features/ai/chatHub/components/ToolsSelectorModal.vue
@@ -291,8 +291,8 @@ onMounted(async () => {
 								"
 							>
 								<N8nButton
+									variant="subtle"
 									size="medium"
-									type="secondary"
 									:disabled="!canCreateCredentials"
 									@click="onCreateNewCredential(key)"
 								>
@@ -337,10 +337,10 @@ onMounted(async () => {
 					}}
 				</N8nText>
 				<div :class="$style.footerRight">
-					<N8nButton type="tertiary" @click="onCancel">{{
+					<N8nButton variant="subtle" @click="onCancel">{{
 						i18n.baseText('chatHub.tools.editor.cancel')
 					}}</N8nButton>
-					<N8nButton type="primary" :disabled="isMissingCredentials" @click="handleConfirm">{{
+					<N8nButton variant="solid" :disabled="isMissingCredentials" @click="handleConfirm">{{
 						i18n.baseText('chatHub.tools.editor.confirm')
 					}}</N8nButton>
 				</div>
diff --git a/packages/frontend/editor-ui/src/features/ai/evaluation.ee/components/SetupWizard/SetupWizard.vue b/packages/frontend/editor-ui/src/features/ai/evaluation.ee/components/SetupWizard/SetupWizard.vue
index 7a609f212a9..ca0cec47271 100644
--- a/packages/frontend/editor-ui/src/features/ai/evaluation.ee/components/SetupWizard/SetupWizard.vue
+++ b/packages/frontend/editor-ui/src/features/ai/evaluation.ee/components/SetupWizard/SetupWizard.vue
@@ -116,8 +116,8 @@ function onSeePlans() {
 
 					<div :class="$style.actionButton">
 						<N8nButton
+							variant="subtle"
 							size="small"
-							type="secondary"
 							@click="navigateToWorkflow('addEvaluationTrigger')"
 						>
 							{{ locale.baseText('evaluations.setupWizard.step1.button') }}
@@ -145,8 +145,8 @@ function onSeePlans() {
 					</ul>
 					<div :class="$style.actionButton">
 						<N8nButton
+							variant="subtle"
 							size="small"
-							type="secondary"
 							@click="navigateToWorkflow('addEvaluationNode')"
 						>
 							{{ locale.baseText('evaluations.setupWizard.step2.button') }}
@@ -183,9 +183,9 @@ function onSeePlans() {
 					</N8nCallout>
 					<div :class="$style.actionButton">
 						<N8nButton
+							variant="subtle"
 							v-if="!evaluationsQuotaExceeded"
 							size="small"
-							type="secondary"
 							@click="navigateToWorkflow('addEvaluationNode')"
 						>
 							{{ locale.baseText('evaluations.setupWizard.step3.button') }}
@@ -194,8 +194,8 @@ function onSeePlans() {
 							{{ locale.baseText('generic.seePlans') }}
 						</N8nButton>
 						<N8nButton
+							variant="ghost"
 							size="small"
-							text
 							style="color: var(--color--text--tint-1)"
 							@click="toggleStep(3)"
 						>
@@ -230,9 +230,9 @@ function onSeePlans() {
 				>
 					<div :class="[$style.actionButton, $style.actionButtonInline]">
 						<N8nButton
+							variant="subtle"
 							v-if="evaluationStore.evaluationSetMetricsNodeExist && !evaluationsQuotaExceeded"
 							size="medium"
-							type="secondary"
 							:disabled="
 								!evaluationStore.evaluationTriggerExists ||
 								(!evaluationStore.evaluationSetOutputsNodeExist &&
@@ -243,9 +243,9 @@ function onSeePlans() {
 							{{ locale.baseText('evaluations.setupWizard.step4.button') }}
 						</N8nButton>
 						<N8nButton
+							variant="subtle"
 							v-else
 							size="medium"
-							type="secondary"
 							:disabled="
 								!evaluationStore.evaluationTriggerExists ||
 								(!evaluationStore.evaluationSetOutputsNodeExist &&
diff --git a/packages/frontend/editor-ui/src/features/ai/evaluation.ee/views/EvaluationsView.vue b/packages/frontend/editor-ui/src/features/ai/evaluation.ee/views/EvaluationsView.vue
index deffc84f3cd..6a2b920e4d0 100644
--- a/packages/frontend/editor-ui/src/features/ai/evaluation.ee/views/EvaluationsView.vue
+++ b/packages/frontend/editor-ui/src/features/ai/evaluation.ee/views/EvaluationsView.vue
@@ -75,22 +75,22 @@ watch(runningTestRun, (run) => {
 	<div :class="$style.evaluationsView">
 		<div :class="$style.header">
 			<N8nButton
+				variant="subtle"
 				v-if="runningTestRun"
 				:disabled="cancellingTestRun"
 				:class="$style.runOrStopTestButton"
 				size="small"
 				data-test-id="stop-test-button"
 				:label="locale.baseText('evaluation.stopTest')"
-				type="secondary"
 				@click="stopTest"
 			/>
 			<N8nButton
+				variant="solid"
 				v-else
 				:class="$style.runOrStopTestButton"
 				size="small"
 				data-test-id="run-test-button"
 				:label="locale.baseText('evaluation.runTest')"
-				type="primary"
 				@click="runTest"
 			/>
 		</div>
diff --git a/packages/frontend/editor-ui/src/features/ai/evaluation.ee/views/TestRunDetailView.vue b/packages/frontend/editor-ui/src/features/ai/evaluation.ee/views/TestRunDetailView.vue
index d66ef651abb..2ae21931b4a 100644
--- a/packages/frontend/editor-ui/src/features/ai/evaluation.ee/views/TestRunDetailView.vue
+++ b/packages/frontend/editor-ui/src/features/ai/evaluation.ee/views/TestRunDetailView.vue
@@ -318,8 +318,8 @@ onMounted(async () => {
 			</div>
 			<div :class="$style.runsHeaderButtons">
 				<N8nIconButton
+					variant="subtle"
 					:icon="isAllExpanded ? 'chevrons-down-up' : 'chevrons-up-down'"
-					type="secondary"
 					size="medium"
 					@click="toggleAllExpansion"
 				/>
diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/SettingsMCPView.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/SettingsMCPView.vue
index 5346a6835f6..a3a3826a50d 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/SettingsMCPView.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/SettingsMCPView.vue
@@ -244,20 +244,20 @@ onMounted(async () => {
 				<N8nTabs :model-value="selectedTab" :options="tabs" @update:model-value="onTabSelected" />
 				<div :class="$style.actions">
 					<N8nButton
+						variant="solid"
 						v-if="showConnectWorkflowsButton"
 						:label="i18n.baseText('settings.mcp.connectWorkflows')"
 						data-test-id="mcp-connect-workflows-header-button"
 						size="small"
-						type="primary"
 						@click="openConnectWorkflowsModal"
 					/>
 					<N8nTooltip :content="i18n.baseText('settings.mcp.refresh.tooltip')">
 						<N8nButton
+							variant="subtle"
+							iconOnly
 							data-test-id="mcp-workflows-refresh-button"
 							size="small"
-							type="tertiary"
 							icon="refresh-cw"
-							:square="true"
 							@click="onTableRefresh"
 						/>
 					</N8nTooltip>
diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/MCPEmptyState.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/MCPEmptyState.vue
index e015c8cdf17..a00b213cecd 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/MCPEmptyState.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/MCPEmptyState.vue
@@ -29,7 +29,7 @@ const i18n = useI18n();
 			:description="i18n.baseText('settings.mcp.description')"
 			:button-text="i18n.baseText('settings.mcp.actionBox.button.label')"
 			:button-disabled="props.disabled || props.loading"
-			button-variant="primary"
+			button-variant="solid"
 			data-test-id="enable-mcp-access-button"
 			@click:button="emit('turnOnMcp')"
 		>
diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/ConnectionParameter.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/ConnectionParameter.vue
index ad429e18c46..7a0c0afa4d5 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/ConnectionParameter.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/ConnectionParameter.vue
@@ -71,10 +71,10 @@ const handleCopy = async (value: string) => {
 					placement="bottom"
 				>
 					<N8nButton
+						variant="subtle"
+						iconOnly
 						v-if="props.allowCopy && isSupported"
-						type="tertiary"
 						:icon="copied ? 'check' : 'copy'"
-						:square="true"
 						:class="$style['copy-button']"
 						:disabled="props.valueLoading"
 						@click="handleCopy(props.value)"
diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/MCPAccessTokenPopoverTab.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/MCPAccessTokenPopoverTab.vue
index a51d4d08702..8bca294f997 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/MCPAccessTokenPopoverTab.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/MCPAccessTokenPopoverTab.vue
@@ -147,9 +147,9 @@ onMounted(async () => {
 						:show-after="MCP_TOOLTIP_DELAY"
 					>
 						<N8nButton
-							type="tertiary"
+							variant="subtle"
+							iconOnly
 							icon="refresh-cw"
-							:square="true"
 							:disabled="keyRotating"
 							@click="rotateKey"
 						/>
@@ -171,9 +171,9 @@ onMounted(async () => {
 				>
 					<N8nButton
 						v-if="isSupported && !loadingApiKey && !keyRotating"
-						type="tertiary"
+						variant="subtle"
+						iconOnly
 						:icon="copied ? 'check' : 'copy'"
-						:square="true"
 						:class="$style['copy-json-button']"
 						data-test-id="mcp-json-copy-button"
 						@click="handleConnectionStringCopy"
diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/McpConnectPopover.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/McpConnectPopover.vue
index 5478fed4a08..554aa7b9f69 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/McpConnectPopover.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/header/connectPopover/McpConnectPopover.vue
@@ -87,8 +87,8 @@ watch(
 		>
 			<template #trigger>
 				<N8nButton
+					variant="subtle"
 					data-test-id="mcp-connect-popover-trigger-button"
-					type="tertiary"
 					:disabled="disabled"
 				>
 					{{ i18n.baseText('settings.mcp.connectPopover.triggerLabel') }}
diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/OAuthClientsTable.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/OAuthClientsTable.vue
index 8e8b0ff97c8..798bd4b9827 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/OAuthClientsTable.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/OAuthClientsTable.vue
@@ -99,8 +99,8 @@ const onTableAction = (action: string, item: OAuthClientResponseDto) => {
 							{{ i18n.baseText('settings.mcp.oauth.table.empty.description') }}
 						</N8nText>
 						<N8nButton
+							variant="solid"
 							data-test-id="mcp-oauth-create-client-button"
-							variant="primary"
 							@click="mcpStore.openConnectPopover()"
 						>
 							{{ i18n.baseText('settings.mcp.oauth.table.empty.button') }}
diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue
index 3937d023219..0491decb874 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue
@@ -136,8 +136,8 @@ const onConnectClick = () => {
 							{{ i18n.baseText('settings.mcp.workflows.table.empty.description') }}
 						</N8nText>
 						<N8nButton
+							variant="solid"
 							data-test-id="mcp-workflow-table-empty-state-button"
-							type="primary"
 							:label="i18n.baseText('settings.mcp.connectWorkflows')"
 							@click="onConnectClick"
 						/>
diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/modals/MCPConnectWorkflowsModal.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/modals/MCPConnectWorkflowsModal.vue
index d6757fd5de5..9c5f654141e 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/modals/MCPConnectWorkflowsModal.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/modals/MCPConnectWorkflowsModal.vue
@@ -110,18 +110,18 @@ onBeforeUnmount(() => {
 		<template #footer="{ close }">
 			<div :class="$style.footer">
 				<N8nButton
+					variant="subtle"
 					:label="i18n.baseText('generic.cancel')"
 					:size="'small'"
 					:disabled="isSaving"
-					type="tertiary"
 					data-test-id="mcp-connect-workflows-cancel-button"
 					@click="cancel(close)"
 				/>
 				<N8nButton
+					variant="solid"
 					:label="i18n.baseText('settings.mcp.connectWorkflows.confirm.label')"
 					:loading="isSaving"
 					:disabled="!canSave || isSaving"
-					type="primary"
 					data-test-id="mcp-connect-workflows-save-button"
 					@click="save(close)"
 				/>
diff --git a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectCreateResource.vue b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectCreateResource.vue
index 388a3f53724..201dec8a2cb 100644
--- a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectCreateResource.vue
+++ b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectCreateResource.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ButtonType, UserAction } from '@n8n/design-system';
+import type { ButtonVariant, UserAction } from '@n8n/design-system';
 import type { IUser } from 'n8n-workflow';
 import { useTemplateRef } from 'vue';
 
@@ -7,7 +7,7 @@ import { N8nActionToggle, N8nIconButton } from '@n8n/design-system';
 defineProps<{
 	actions: Array<UserAction<IUser>>;
 	disabled?: boolean;
-	type?: ButtonType;
+	variant?: ButtonVariant;
 }>();
 
 const emit = defineEmits<{
@@ -36,7 +36,7 @@ defineExpose({
 				:disabled="disabled"
 				:class="[$style.buttonGroupDropdown]"
 				icon="chevron-down"
-				:type="type ?? 'primary'"
+				:variant="variant ?? 'solid'"
 			/>
 		</N8nActionToggle>
 	</div>
diff --git a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectDeleteDialog.vue b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectDeleteDialog.vue
index 2b4239d8fc1..9692f18feb8 100644
--- a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectDeleteDialog.vue
+++ b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectDeleteDialog.vue
@@ -116,8 +116,8 @@ const onDelete = () => {
 		</div>
 		<template #footer>
 			<N8nButton
-				type="danger"
-				native-type="button"
+				variant="destructive"
+				type="button"
 				:disabled="!isValid"
 				data-test-id="project-settings-delete-confirm-button"
 				@click.stop.prevent="onDelete"
diff --git a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectHeader.vue b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectHeader.vue
index b8b89a82326..f51331a66c1 100644
--- a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectHeader.vue
+++ b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectHeader.vue
@@ -453,6 +453,7 @@ const onSelect = (action: string) => {
 							<N8nButton
 								:data-test-id="`add-resource-${selectedMainButtonType}`"
 								v-bind="mainButtonConfig"
+								size="medium"
 								@click="onSelect(selectedMainButtonType)"
 							/>
 						</ProjectCreateResource>
diff --git a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectMoveResourceModal.vue b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectMoveResourceModal.vue
index 80f24b4b00d..cf1cb1a899e 100644
--- a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectMoveResourceModal.vue
+++ b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectMoveResourceModal.vue
@@ -358,13 +358,13 @@ onMounted(async () => {
 		</template>
 		<template #footer>
 			<div :class="$style.buttons">
-				<N8nButton type="secondary" text class="mr-2xs" :disabled="loading" @click="closeModal">
+				<N8nButton variant="ghost" class="mr-2xs" :disabled="loading" @click="closeModal">
 					{{ i18n.baseText('generic.cancel') }}
 				</N8nButton>
 				<N8nButton
+					variant="solid"
 					:loading="loading"
 					:disabled="!projectId || loading"
-					type="primary"
 					data-test-id="project-move-resource-modal-button"
 					@click="moveResource"
 				>
diff --git a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectRoleUpgradeDialog.vue b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectRoleUpgradeDialog.vue
index cb82d7cd28b..ab32a4f05de 100644
--- a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectRoleUpgradeDialog.vue
+++ b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectRoleUpgradeDialog.vue
@@ -40,10 +40,10 @@ const goToUpgrade = async () => {
 			</I18nT>
 		</div>
 		<template #footer>
-			<N8nButton type="secondary" native-type="button" @click="visible = false">{{
+			<N8nButton variant="subtle" native-type="button" @click="visible = false">{{
 				locale.baseText('generic.cancel')
 			}}</N8nButton>
-			<N8nButton type="primary" native-type="button" @click="goToUpgrade">{{
+			<N8nButton variant="solid" native-type="button" @click="goToUpgrade">{{
 				locale.baseText('projects.create.limitReached.link')
 			}}</N8nButton>
 		</template>
diff --git a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectSharing.vue b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectSharing.vue
index d65801ab525..12fad04a179 100644
--- a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectSharing.vue
+++ b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectSharing.vue
@@ -224,10 +224,10 @@ watch(
 					/>
 				</N8nSelect>
 				<N8nButton
+					variant="subtle"
+					iconOnly
 					v-if="!props.static && !(project.id === GLOBAL_GROUP.id && !canShareGlobally)"
-					type="tertiary"
 					native-type="button"
-					square
 					icon="trash-2"
 					:disabled="props.readonly"
 					data-test-id="project-sharing-remove"
diff --git a/packages/frontend/editor-ui/src/features/collaboration/projects/views/ProjectSettings.vue b/packages/frontend/editor-ui/src/features/collaboration/projects/views/ProjectSettings.vue
index bc1f5f58718..3efe170d137 100644
--- a/packages/frontend/editor-ui/src/features/collaboration/projects/views/ProjectSettings.vue
+++ b/packages/frontend/editor-ui/src/features/collaboration/projects/views/ProjectSettings.vue
@@ -550,7 +550,7 @@ onMounted(async () => {
 				</N8nText>
 				<div :class="$style.headerButtons">
 					<N8nButton
-						type="secondary"
+						variant="subtle"
 						native-type="button"
 						:disabled="!isDirty"
 						class="mr-2xs"
@@ -560,7 +560,7 @@ onMounted(async () => {
 					>
 					<N8nButton
 						:disabled="!isValid || !isDirty"
-						type="primary"
+						variant="solid"
 						data-test-id="project-settings-save-button"
 						@click.stop.prevent="onSubmit"
 						>{{ i18n.baseText('projects.settings.button.save') }}</N8nButton
@@ -681,7 +681,7 @@ onMounted(async () => {
 					i18n.baseText('projects.settings.danger.message')
 				}}</small>
 				<N8nButton
-					type="tertiary"
+					variant="subtle"
 					size="large"
 					native-type="button"
 					data-test-id="project-settings-delete-button"
diff --git a/packages/frontend/editor-ui/src/features/collaboration/projects/views/ProjectVariables.vue b/packages/frontend/editor-ui/src/features/collaboration/projects/views/ProjectVariables.vue
index bc7277a2819..3b6aff365fa 100644
--- a/packages/frontend/editor-ui/src/features/collaboration/projects/views/ProjectVariables.vue
+++ b/packages/frontend/editor-ui/src/features/collaboration/projects/views/ProjectVariables.vue
@@ -426,8 +426,8 @@ onMounted(() => {
 							placement="top"
 						>
 							<N8nButton
+								variant="subtle"
 								data-test-id="variable-row-edit-button"
-								type="tertiary"
 								class="mr-xs"
 								:disabled="!(globalPermissions.update ?? projectPermissions.update)"
 								@click="openEditVariableModal(data)"
@@ -443,8 +443,8 @@ onMounted(() => {
 							placement="top"
 						>
 							<N8nButton
+								variant="subtle"
 								data-test-id="variable-row-delete-button"
-								type="tertiary"
 								:disabled="!(globalPermissions.delete ?? projectPermissions.delete)"
 								@click="handleDeleteVariable(data)"
 							>
diff --git a/packages/frontend/editor-ui/src/features/core/auth/components/MfaSetupModal.vue b/packages/frontend/editor-ui/src/features/core/auth/components/MfaSetupModal.vue
index a162259fce5..cc69a468ecd 100644
--- a/packages/frontend/editor-ui/src/features/core/auth/components/MfaSetupModal.vue
+++ b/packages/frontend/editor-ui/src/features/core/auth/components/MfaSetupModal.vue
@@ -250,7 +250,7 @@ onMounted(async () => {
 				</N8nInfoTip>
 				<div>
 					<N8nButton
-						type="primary"
+						variant="solid"
 						icon="hard-drive-download"
 						float="right"
 						:label="i18n.baseText('mfa.setup.step2.button.download')"
diff --git a/packages/frontend/editor-ui/src/features/core/auth/views/MfaView.vue b/packages/frontend/editor-ui/src/features/core/auth/views/MfaView.vue
index 3487d43e052..b2da86cf096 100644
--- a/packages/frontend/editor-ui/src/features/core/auth/views/MfaView.vue
+++ b/packages/frontend/editor-ui/src/features/core/auth/views/MfaView.vue
@@ -253,10 +253,10 @@ onMounted(() => {
 					@click="onSaveClick"
 				/>
 				<N8nButton
+					variant="subtle"
 					float="left"
 					:label="i18.baseText('mfa.button.back')"
 					size="large"
-					type="tertiary"
 					@click="onBackClick"
 				/>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/core/auth/views/SettingsPersonalView.vue b/packages/frontend/editor-ui/src/features/core/auth/views/SettingsPersonalView.vue
index ad8b0a96465..c27fc3aa3fc 100644
--- a/packages/frontend/editor-ui/src/features/core/auth/views/SettingsPersonalView.vue
+++ b/packages/frontend/editor-ui/src/features/core/auth/views/SettingsPersonalView.vue
@@ -410,17 +410,17 @@ onBeforeUnmount(() => {
 				/>
 
 				<N8nButton
+					variant="subtle"
 					v-if="mfaDisabled"
 					:class="$style.button"
-					type="tertiary"
 					:label="i18n.baseText('settings.personal.mfa.button.enabled')"
 					data-test-id="enable-mfa-button"
 					@click="onMfaEnableClick"
 				/>
 				<N8nButton
+					variant="subtle"
 					v-else
 					:class="$style.disableMfaButton"
-					type="tertiary"
 					:label="i18n.baseText('settings.personal.mfa.button.disabled')"
 					data-test-id="disable-mfa-button"
 					@click="onMfaDisableClick"
diff --git a/packages/frontend/editor-ui/src/features/core/dataTable/components/AddDataTableModal.vue b/packages/frontend/editor-ui/src/features/core/dataTable/components/AddDataTableModal.vue
index 779d85ff193..e2da47f56ca 100644
--- a/packages/frontend/editor-ui/src/features/core/dataTable/components/AddDataTableModal.vue
+++ b/packages/frontend/editor-ui/src/features/core/dataTable/components/AddDataTableModal.vue
@@ -424,8 +424,8 @@ const redirectToDataTables = () => {
 		<template #footer>
 			<div :class="$style.footer">
 				<N8nButton
+					variant="subtle"
 					v-if="creationMode === 'select'"
-					type="secondary"
 					size="large"
 					:label="i18n.baseText('generic.cancel')"
 					data-test-id="cancel-select-button"
@@ -444,8 +444,8 @@ const redirectToDataTables = () => {
 				/>
 
 				<N8nButton
+					variant="subtle"
 					v-if="creationMode === 'import'"
-					type="secondary"
 					size="large"
 					:label="i18n.baseText('generic.back')"
 					data-test-id="back-button"
diff --git a/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/AddColumnButton.vue b/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/AddColumnButton.vue
index f8ef10d2779..e72f3cf1d67 100644
--- a/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/AddColumnButton.vue
+++ b/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/AddColumnButton.vue
@@ -154,8 +154,8 @@ const onInput = debounce(validateName, { debounceTime: 100 });
 				<template #trigger>
 					<template v-if="props.useTextTrigger">
 						<N8nButton
+							variant="subtle"
 							data-test-id="data-table-add-column-trigger-button"
-							type="tertiary"
 							:disabled="isDisabled"
 						>
 							{{ i18n.baseText('dataTable.addColumn.label') }}
@@ -163,10 +163,9 @@ const onInput = debounce(validateName, { debounceTime: 100 });
 					</template>
 					<template v-else>
 						<N8nIconButton
+							variant="ghost"
 							data-test-id="data-table-add-column-trigger-button"
-							text
 							icon="plus"
-							type="tertiary"
 							:disabled="isDisabled"
 						/>
 					</template>
@@ -234,8 +233,8 @@ const onInput = debounce(validateName, { debounceTime: 100 });
 								</N8nSelect>
 							</N8nInputLabel>
 							<N8nButton
+								variant="solid"
 								data-test-id="data-table-add-column-submit-button"
-								type="primary"
 								class="mt-m"
 								size="large"
 								:disabled="!columnName || !columnType || !!error"
diff --git a/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/AddRowButton.vue b/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/AddRowButton.vue
index d439afd00f0..8d349bfc668 100644
--- a/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/AddRowButton.vue
+++ b/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/AddRowButton.vue
@@ -15,8 +15,7 @@ const props = defineProps<{
 <template>
 	<N8nTooltip :content="i18n.baseText('dataTable.addRow.label')">
 		<N8nIconButton
-			text
-			type="tertiary"
+			variant="ghost"
 			icon="plus"
 			:disabled="props.params.disabled"
 			@click="props.params.onClick"
diff --git a/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/ColumnHeader.vue b/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/ColumnHeader.vue
index 350c31fce23..c30633dc7b7 100644
--- a/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/ColumnHeader.vue
+++ b/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/ColumnHeader.vue
@@ -233,11 +233,10 @@ onUnmounted(() => {
 		</div>
 
 		<N8nIconButton
+			variant="ghost"
 			v-show="isFilterButtonVisible"
 			data-test-id="data-table-column-header-filter-button"
 			icon="funnel"
-			type="tertiary"
-			text
 			:class="{ 'filter-highlighted': hasActiveFilter }"
 			@click="onShowFilter"
 		/>
diff --git a/packages/frontend/editor-ui/src/features/core/folders/components/MoveToFolderModal.vue b/packages/frontend/editor-ui/src/features/core/folders/components/MoveToFolderModal.vue
index b3e85beeec1..3d2a8d644f8 100644
--- a/packages/frontend/editor-ui/src/features/core/folders/components/MoveToFolderModal.vue
+++ b/packages/frontend/editor-ui/src/features/core/folders/components/MoveToFolderModal.vue
@@ -552,7 +552,7 @@ onMounted(async () => {
 		<template #footer="{ close }">
 			<div :class="$style.footer">
 				<N8nButton
-					type="secondary"
+					variant="subtle"
 					:label="i18n.baseText('generic.cancel')"
 					:disabled="loading"
 					float="right"
diff --git a/packages/frontend/editor-ui/src/features/credentials/components/CredentialEdit/CredentialEdit.vue b/packages/frontend/editor-ui/src/features/credentials/components/CredentialEdit/CredentialEdit.vue
index 3dd0367033d..aaa623265fb 100644
--- a/packages/frontend/editor-ui/src/features/credentials/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/frontend/editor-ui/src/features/credentials/components/CredentialEdit/CredentialEdit.vue
@@ -1251,10 +1251,10 @@ const { width } = useElementSize(credNameRef);
 				</div>
 				<div :class="$style.credActions">
 					<N8nIconButton
+						variant="subtle"
 						v-if="currentCredential && credentialPermissions.delete"
 						:title="i18n.baseText('credentialEdit.credentialEdit.delete')"
 						icon="trash-2"
-						type="tertiary"
 						:disabled="isSaving"
 						:loading="isDeleting"
 						data-test-id="credential-delete-button"
diff --git a/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialPicker.vue b/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialPicker.vue
index da8d8d5dcf8..3ecd32f8a78 100644
--- a/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialPicker.vue
+++ b/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialPicker.vue
@@ -8,7 +8,7 @@ import { useI18n } from '@n8n/i18n';
 import { CREDENTIAL_EDIT_MODAL_KEY } from '../../credentials.constants';
 
 import { N8nButton, N8nIconButton, N8nTooltip } from '@n8n/design-system';
-import type { IconButtonProps } from '@n8n/design-system';
+import type { ButtonProps } from '@n8n/design-system';
 import { getResourcePermissions } from '@n8n/permissions';
 import { useProjectsStore } from '@/features/collaboration/projects/projects.store';
 import { useToast } from '@/app/composables/useToast';
@@ -23,7 +23,7 @@ const props = defineProps<{
 	personalOnly?: boolean;
 	showDelete?: boolean;
 	hideCreateNew?: boolean;
-	createButtonType?: IconButtonProps['type'];
+	createButtonVariant?: ButtonProps['variant'];
 }>();
 
 const emit = defineEmits<{
@@ -221,8 +221,8 @@ watch(
 				:placement="'top'"
 			>
 				<N8nIconButton
+					variant="subtle"
 					icon="pen"
-					type="secondary"
 					:class="{
 						[$style.edit]: true,
 					}"
@@ -245,7 +245,7 @@ watch(
 					:title="i18n.baseText('nodeCredentials.deleteCredential')"
 					icon="trash-2"
 					icon-size="large"
-					type="secondary"
+					variant="outline"
 					:disabled="!credentialPermissions.delete"
 					@click="deleteCredential()"
 				/>
@@ -257,7 +257,7 @@ watch(
 			:label="`Create new ${props.appName} credential`"
 			:class="$style.createButton"
 			data-test-id="create-credential"
-			:type="props.createButtonType || 'primary'"
+			:variant="props.createButtonVariant || 'solid'"
 			:disabled="!credentialPermissions.create"
 			@click="createNewCredential"
 		/>
diff --git a/packages/frontend/editor-ui/src/features/execution/executions/components/ExecutionsFilter.vue b/packages/frontend/editor-ui/src/features/execution/executions/components/ExecutionsFilter.vue
index 64e7d25c7b4..f47c9cf0301 100644
--- a/packages/frontend/editor-ui/src/features/execution/executions/components/ExecutionsFilter.vue
+++ b/packages/frontend/editor-ui/src/features/execution/executions/components/ExecutionsFilter.vue
@@ -181,10 +181,10 @@ onBeforeMount(() => {
 	>
 		<template #trigger>
 			<N8nButton
+				variant="subtle"
+				iconOnly
 				icon="funnel"
-				type="tertiary"
 				size="medium"
-				square
 				:active="!!countSelectedFilterProps"
 				data-test-id="executions-filter-button"
 				:class="$style.filterButton"
@@ -402,10 +402,10 @@ onBeforeMount(() => {
 					</div>
 				</div>
 				<N8nButton
+					variant="ghost"
 					v-if="!!countSelectedFilterProps"
 					:class="$style.resetBtn"
 					size="large"
-					text
 					data-test-id="executions-filter-reset-button"
 					@click="onFilterReset"
 				>
diff --git a/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsListItem.vue b/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsListItem.vue
index 13e88439b58..9f2248a3e63 100644
--- a/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsListItem.vue
+++ b/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsListItem.vue
@@ -272,9 +272,9 @@ async function handleActionItemClick(commandData: Command) {
 		</td>
 		<td>
 			<N8nButton
+				variant="ghost"
 				v-if="!execution.stoppedAt || execution.waitTill"
 				data-test-id="stop-execution-button"
-				type="secondary"
 				:loading="isStopping"
 				:disabled="isStopping"
 				@click.stop="onStopExecution"
@@ -284,7 +284,7 @@ async function handleActionItemClick(commandData: Command) {
 		</td>
 		<td>
 			<ElDropdown v-if="!isRunning" trigger="click" @command="handleActionItemClick">
-				<N8nIconButton text type="tertiary" icon="ellipsis-vertical" />
+				<N8nIconButton variant="subtle" icon="ellipsis-vertical" />
 				<template #dropdown>
 					<ElDropdownMenu
 						:class="{
diff --git a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/VoteButtons.vue b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/VoteButtons.vue
index ee1eb15c4d1..70f748f5162 100644
--- a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/VoteButtons.vue
+++ b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/VoteButtons.vue
@@ -18,17 +18,15 @@ const onVoteClick = (vote: AnnotationVote) => {
 <template>
 	<div :class="$style.ratingIcon">
 		<N8nIconButton
+			variant="ghost"
 			:class="[$style.icon, vote === 'up' && $style.up]"
-			type="tertiary"
-			text
 			size="small"
 			icon="thumbs-up"
 			@click="onVoteClick('up')"
 		/>
 		<N8nIconButton
+			variant="ghost"
 			:class="[$style.icon, vote === 'down' && $style.down]"
-			type="tertiary"
-			text
 			size="small"
 			icon="thumbs-down"
 			@click="onVoteClick('down')"
diff --git a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionAnnotationPanel.ee.vue b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionAnnotationPanel.ee.vue
index c4cc42b236c..517bae6ae1a 100644
--- a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionAnnotationPanel.ee.vue
+++ b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionAnnotationPanel.ee.vue
@@ -51,6 +51,7 @@ function onDropdownVisibleChange(visible: boolean) {
 		@visible-change="onDropdownVisibleChange"
 	>
 		<N8nButton
+			variant="subtle"
 			:title="i18n.baseText('executionDetails.additionalActions')"
 			:disabled="!workflowPermissions.update"
 			icon="list-checks"
@@ -60,7 +61,6 @@ function onDropdownVisibleChange(visible: boolean) {
 				[$style.highlightDataButtonOpen]: isDropdownVisible,
 			}"
 			size="small"
-			type="secondary"
 			data-test-id="execution-preview-ellipsis-button"
 			@blur="onEllipsisButtonBlur"
 		>
diff --git a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionAnnotationTags.ee.vue b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionAnnotationTags.ee.vue
index 095df830382..45d4b65e88d 100644
--- a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionAnnotationTags.ee.vue
+++ b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionAnnotationTags.ee.vue
@@ -99,12 +99,11 @@ const onTagsEditEsc = () => {
 			/>
 			<div v-else-if="tagIds.length === 0">
 				<N8nButton
+					variant="ghost"
 					:class="[$style.addTagButton, 'clickable']"
 					:label="locale.baseText('executionAnnotationView.addTag')"
-					type="secondary"
-					size="mini"
+					size="xsmall"
 					:outline="false"
-					:text="true"
 					data-test-id="new-tag-link"
 					icon="plus"
 					@click="onTagsEditEnable"
@@ -127,11 +126,10 @@ const onTagsEditEsc = () => {
 				</span>
 				<span :class="$style.addTagWrapper">
 					<N8nButton
+						variant="ghost"
 						:class="[$style.addTagButton, $style.addTagButtonIconOnly, 'clickable']"
-						type="secondary"
-						size="mini"
+						size="xsmall"
 						:outline="false"
-						:text="true"
 						data-test-id="new-tag-link"
 						icon="plus"
 						@click="onTagsEditEnable"
diff --git a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsLandingPage.vue b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsLandingPage.vue
index 3db0fbfb184..92ca325f159 100644
--- a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsLandingPage.vue
+++ b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsLandingPage.vue
@@ -41,7 +41,7 @@ function onSetupFirstStep(): void {
 				<N8nText size="medium">
 					{{ locale.baseText('executionsLandingPage.emptyState.message') }}
 				</N8nText>
-				<N8nButton class="mt-l" type="tertiary" size="large" @click="onSetupFirstStep">
+				<N8nButton variant="subtle" class="mt-l" size="large" @click="onSetupFirstStep">
 					{{ locale.baseText('executionsLandingPage.emptyState.noTrigger.buttonText') }}
 				</N8nButton>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsPreview.vue b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsPreview.vue
index 87f6268019b..3dfd2ea8e1a 100644
--- a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsPreview.vue
+++ b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsPreview.vue
@@ -151,7 +151,7 @@ const onVoteClick = async (voteValue: AnnotationVote) => {
 		<N8nText :class="$style.newMessage" color="text-light">
 			{{ locale.baseText('executionDetails.newMessage') }}
 		</N8nText>
-		<N8nButton class="mt-l" type="tertiary" @click="handleStopClick">
+		<N8nButton variant="subtle" class="mt-l" @click="handleStopClick">
 			{{ locale.baseText('executionsList.stopExecution') }}
 		</N8nButton>
 	</div>
@@ -163,9 +163,9 @@ const onVoteClick = async (voteValue: AnnotationVote) => {
 			{{ locale.baseText('executionDetails.runningMessage') }}
 		</N8nText>
 		<N8nButton
+			variant="subtle"
 			data-test-id="stop-execution"
 			class="mt-l"
-			type="tertiary"
 			:disabled="!workflowPermissions.execute"
 			@click="handleStopClick"
 		>
@@ -272,8 +272,8 @@ const onVoteClick = async (voteValue: AnnotationVote) => {
 					}"
 				>
 					<N8nButton
+						variant="ghost"
 						size="medium"
-						:type="debugButtonData.type"
 						:class="$style.debugLink"
 						:disabled="!workflowPermissions.update"
 					>
@@ -293,8 +293,8 @@ const onVoteClick = async (voteValue: AnnotationVote) => {
 				>
 					<span class="retry-button">
 						<N8nIconButton
+							variant="subtle"
 							size="medium"
-							type="tertiary"
 							:title="locale.baseText('executionsList.retryExecution')"
 							:disabled="!workflowPermissions.update"
 							icon="redo-2"
@@ -320,11 +320,11 @@ const onVoteClick = async (voteValue: AnnotationVote) => {
 				/>
 
 				<N8nIconButton
+					variant="subtle"
 					:title="locale.baseText('executionDetails.deleteExecution')"
 					:disabled="!workflowPermissions.update"
 					icon="trash-2"
 					size="medium"
-					type="tertiary"
 					data-test-id="execution-preview-delete-button"
 					@click="onDeleteExecution"
 				/>
diff --git a/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDashboard.test.ts b/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDashboard.test.ts
index b57d2320b41..5df96d9567f 100644
--- a/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDashboard.test.ts
+++ b/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDashboard.test.ts
@@ -226,11 +226,7 @@ const DEFAULT_TABLE_PARAMS = {
 };
 
 // Helper functions
-const expectStoreExecutions = (params: {
-	summary?: object;
-	charts?: object;
-	table?: object;
-}) => {
+const expectStoreExecutions = (params: { summary?: object; charts?: object; table?: object }) => {
 	if (params.summary) {
 		expect(insightsStore.summary.execute).toHaveBeenCalledWith(0, params.summary);
 	}
@@ -242,8 +238,8 @@ const expectStoreExecutions = (params: {
 	}
 };
 
-const openDatePicker = async (getByText: (text: string, options?: object) => HTMLElement) => {
-	const trigger = getByText('12 Dec - 19 Dec, 2000', { selector: 'button' });
+const openDatePicker = async (getByRole: (role: string, options?: object) => HTMLElement) => {
+	const trigger = getByRole('button', { name: '12 Dec - 19 Dec, 2000' });
 	expect(trigger).toBeInTheDocument();
 	await userEvent.click(trigger);
 
@@ -387,11 +383,11 @@ describe('InsightsDashboard', () => {
 
 	describe('Date Range Selection', () => {
 		it('should update the selected time range', async () => {
-			const { getByText } = renderComponent({
+			const { getByRole } = renderComponent({
 				props: { insightType: INSIGHT_TYPES.TOTAL },
 			});
 
-			const picker = await openDatePicker(getByText);
+			const picker = await openDatePicker(getByRole);
 			const dayOption = within(picker).getByText('Last 24 hours');
 			await userEvent.click(dayOption);
 
@@ -414,11 +410,11 @@ describe('InsightsDashboard', () => {
 		});
 
 		it('should show upgrade modal when unlicensed time range selected ', async () => {
-			const { getByText } = renderComponent({
+			const { getByRole } = renderComponent({
 				props: { insightType: INSIGHT_TYPES.TOTAL },
 			});
 
-			const picker = await openDatePicker(getByText);
+			const picker = await openDatePicker(getByRole);
 			const dayOption = within(picker).getByText('Last 90 days');
 			await userEvent.click(dayOption);
 
@@ -433,13 +429,13 @@ describe('InsightsDashboard', () => {
 			const currentTime = new Date('2000-12-19T14:30:45.000Z');
 			vi.setSystemTime(currentTime);
 
-			const { getByText } = renderComponent({
+			const { getByRole } = renderComponent({
 				props: { insightType: INSIGHT_TYPES.TOTAL },
 			});
 
 			vi.clearAllMocks();
 
-			const picker = await openDatePicker(getByText);
+			const picker = await openDatePicker(getByRole);
 			// Select month option to get a multi-day range
 			const monthOption = within(picker).getByText('Last 30 days');
 			await userEvent.click(monthOption);
@@ -648,14 +644,14 @@ describe('InsightsDashboard', () => {
 		});
 
 		it('should combine project filter with date range changes', async () => {
-			const { getByText } = renderComponent({
+			const { getByRole } = renderComponent({
 				props: { insightType: INSIGHT_TYPES.TOTAL },
 			});
 
 			await selectProject(teamProjects[0].name);
 			vi.clearAllMocks();
 
-			const picker = await openDatePicker(getByText);
+			const picker = await openDatePicker(getByRole);
 			const dayOption = within(picker).getByText('Last 24 hours');
 			await userEvent.click(dayOption);
 
diff --git a/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDataRangePicker.vue b/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDataRangePicker.vue
index 9039d71d808..5e537764517 100644
--- a/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDataRangePicker.vue
+++ b/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDataRangePicker.vue
@@ -163,14 +163,14 @@ function isActiveRange(presetValue: number) {
 	<!-- eslint-disable vue/no-multiple-template-root -->
 	<N8nDateRangePicker v-model="range" v-model:open="open" :max-value :min-value>
 		<template #trigger>
-			<N8nButton icon="calendar" type="secondary">{{ formattedRange }}</N8nButton>
+			<N8nButton variant="subtle" icon="calendar">{{ formattedRange }}</N8nButton>
 		</template>
 		<template #presets>
 			<N8nButton
 				v-for="preset in presets"
 				:key="preset.value"
 				:class="$style.PresetButton"
-				:type="isActiveRange(preset.value) ? 'primary' : 'secondary'"
+				:variant="isActiveRange(preset.value) ? 'solid' : 'outline'"
 				size="small"
 				@click="preset.disabled ? showUpgradeModal() : setPresetRange(preset.value)"
 			>
diff --git a/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsPaywall.vue b/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsPaywall.vue
index b9d16a8d770..3d6b31aec23 100644
--- a/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsPaywall.vue
+++ b/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsPaywall.vue
@@ -20,7 +20,7 @@ const goToUpgrade = async () => {
 		<N8nText>
 			{{ i18n.baseText('insights.dashboard.paywall.description') }}
 		</N8nText>
-		<N8nButton type="primary" native-type="button" size="large" @click="goToUpgrade">
+		<N8nButton variant="solid" native-type="button" size="large" @click="goToUpgrade">
 			{{ i18n.baseText('generic.upgrade') }}
 		</N8nButton>
 	</div>
diff --git a/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsUpgradeModal.vue b/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsUpgradeModal.vue
index baec0a410a8..950cd9c579c 100644
--- a/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsUpgradeModal.vue
+++ b/packages/frontend/editor-ui/src/features/execution/insights/components/InsightsUpgradeModal.vue
@@ -41,10 +41,10 @@ const perks = computed(() =>
 		</div>
 		<template #footer>
 			<div>
-				<N8nButton type="secondary" @click="model = false">
+				<N8nButton variant="subtle" @click="model = false">
 					{{ i18n.baseText('insights.upgradeModal.button.dismiss') }}
 				</N8nButton>
-				<N8nButton type="primary" @click="goToUpgrade">
+				<N8nButton variant="solid" @click="goToUpgrade">
 					{{ i18n.baseText('generic.upgrade') }}
 				</N8nButton>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/execution/logs/components/ChatMessagesPanel.vue b/packages/frontend/editor-ui/src/features/execution/logs/components/ChatMessagesPanel.vue
index 8541914c4c0..47039c1c5fb 100644
--- a/packages/frontend/editor-ui/src/features/execution/logs/components/ChatMessagesPanel.vue
+++ b/packages/frontend/editor-ui/src/features/execution/logs/components/ChatMessagesPanel.vue
@@ -184,9 +184,9 @@ async function copySessionId() {
 						{{ locale.baseText('chat.window.session.id.copy') }}
 					</template>
 					<N8nButton
+						variant="outline"
 						data-test-id="chat-session-id"
-						type="secondary"
-						size="mini"
+						size="xsmall"
 						:class="$style.newHeaderButton"
 						@click.stop="copySessionId"
 						>{{ sessionIdText }}</N8nButton
@@ -197,10 +197,9 @@ async function copySessionId() {
 					:content="locale.baseText('chat.window.session.resetSession')"
 				>
 					<N8nIconButton
+						variant="subtle"
 						:class="$style.newHeaderButton"
 						data-test-id="refresh-session-button"
-						outline
-						type="secondary"
 						size="small"
 						icon-size="medium"
 						icon="undo-2"
@@ -257,20 +256,18 @@ async function copySessionId() {
 				<template v-if="pastChatMessages.length > 0" #leftPanel>
 					<div :class="$style.messagesHistory">
 						<N8nButton
+							variant="ghost"
 							title="Navigate to previous message"
 							icon="chevron-up"
-							type="tertiary"
-							text
-							size="mini"
+							size="xsmall"
 							:disabled="previousMessageIndex === 0"
 							@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowUp' })"
 						/>
 						<N8nButton
+							variant="ghost"
 							title="Navigate to next message"
 							icon="chevron-down"
-							type="tertiary"
-							text
-							size="mini"
+							size="xsmall"
 							:disabled="previousMessageIndex === -1"
 							@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowDown' })"
 						/>
diff --git a/packages/frontend/editor-ui/src/features/execution/logs/components/LogDetailsPanel.vue b/packages/frontend/editor-ui/src/features/execution/logs/components/LogDetailsPanel.vue
index 73e4c932248..83dc754bb63 100644
--- a/packages/frontend/editor-ui/src/features/execution/logs/components/LogDetailsPanel.vue
+++ b/packages/frontend/editor-ui/src/features/execution/logs/components/LogDetailsPanel.vue
@@ -126,8 +126,8 @@ function handleResizeEnd() {
 						:shortcut="{ keys: ['i'] }"
 					>
 						<N8nButton
-							size="mini"
-							type="secondary"
+							variant="subtle"
+							size="xsmall"
 							:class="panels === LOG_DETAILS_PANEL_STATE.OUTPUT ? '' : $style.pressed"
 							@click.stop="emit('toggleInputOpen')"
 						>
@@ -139,8 +139,8 @@ function handleResizeEnd() {
 						:shortcut="{ keys: ['o'] }"
 					>
 						<N8nButton
-							size="mini"
-							type="secondary"
+							variant="subtle"
+							size="xsmall"
 							:class="panels === LOG_DETAILS_PANEL_STATE.INPUT ? '' : $style.pressed"
 							@click.stop="emit('toggleOutputOpen')"
 						>
diff --git a/packages/frontend/editor-ui/src/features/execution/logs/components/LogsOverviewPanel.vue b/packages/frontend/editor-ui/src/features/execution/logs/components/LogsOverviewPanel.vue
index d02177b8728..e4ffc433856 100644
--- a/packages/frontend/editor-ui/src/features/execution/logs/components/LogsOverviewPanel.vue
+++ b/packages/frontend/editor-ui/src/features/execution/logs/components/LogsOverviewPanel.vue
@@ -97,8 +97,8 @@ function handleSwitchView(value: 'overview' | 'details') {
 					:content="locale.baseText('logs.overview.header.actions.clearExecution.tooltip')"
 				>
 					<N8nButton
-						size="mini"
-						type="secondary"
+						variant="subtle"
+						size="xsmall"
 						icon="trash-2"
 						icon-size="medium"
 						data-test-id="clear-execution-data-button"
diff --git a/packages/frontend/editor-ui/src/features/execution/logs/components/LogsOverviewRow.vue b/packages/frontend/editor-ui/src/features/execution/logs/components/LogsOverviewRow.vue
index 8a8a748fd80..674bd355a15 100644
--- a/packages/frontend/editor-ui/src/features/execution/logs/components/LogsOverviewRow.vue
+++ b/packages/frontend/editor-ui/src/features/execution/logs/components/LogsOverviewRow.vue
@@ -193,13 +193,13 @@ watch(
 			:class="$style.compactErrorIcon"
 		/>
 		<N8nIconButton
+			variant="subtle"
 			v-if="canOpenNdv && (!isCompact || !props.latestInfo?.deleted)"
-			type="secondary"
 			size="small"
 			icon="square-pen"
 			icon-size="medium"
 			:style="{
-				visibility: props.data.isSubExecution ? 'hidden' : '',
+				visibility: props.data.isSubExecution ? 'hidden' : undefined,
 			}"
 			:disabled="props.latestInfo?.deleted"
 			:class="$style.openNdvButton"
@@ -207,11 +207,11 @@ watch(
 			@click.stop="emit('openNdv')"
 		/>
 		<N8nIconButton
+			variant="subtle"
 			v-if="
 				!isCompact ||
 				(!props.isReadOnly && !props.latestInfo?.deleted && !props.latestInfo?.disabled)
 			"
-			type="secondary"
 			size="small"
 			icon="play"
 			:aria-label="locale.baseText('logs.overview.body.run')"
@@ -225,13 +225,13 @@ watch(
 		</template>
 		<N8nButton
 			v-if="!isCompact || hasChildren"
-			type="secondary"
+			variant="subtle"
+			iconOnly
 			size="small"
 			:icon="props.expanded ? 'chevron-down' : 'chevron-up'"
 			icon-size="medium"
-			:square="true"
 			:style="{
-				visibility: hasChildren ? '' : 'hidden',
+				visibility: hasChildren ? undefined : 'hidden',
 			}"
 			:class="$style.toggleButton"
 			:aria-label="locale.baseText('logs.overview.body.toggleRow')"
diff --git a/packages/frontend/editor-ui/src/features/execution/logs/components/LogsPanelActions.vue b/packages/frontend/editor-ui/src/features/execution/logs/components/LogsPanelActions.vue
index c5361bf69d9..ef604087c76 100644
--- a/packages/frontend/editor-ui/src/features/execution/logs/components/LogsPanelActions.vue
+++ b/packages/frontend/editor-ui/src/features/execution/logs/components/LogsPanelActions.vue
@@ -49,9 +49,8 @@ function handleSelectMenuItem(selected: string) {
 	<div :class="$style.container">
 		<N8nTooltip v-if="!isOpen && showPopOutButton" :content="popOutButtonText">
 			<N8nIconButton
+				variant="ghost"
 				icon="pop-out"
-				type="tertiary"
-				text
 				size="small"
 				icon-size="medium"
 				:aria-label="popOutButtonText"
@@ -75,8 +74,7 @@ function handleSelectMenuItem(selected: string) {
 			:shortcut="{ keys: ['l'] }"
 		>
 			<N8nIconButton
-				type="tertiary"
-				text
+				variant="ghost"
 				size="small"
 				icon-size="medium"
 				:icon="isOpen ? 'chevron-down' : 'chevron-up'"
diff --git a/packages/frontend/editor-ui/src/features/integrations/externalSecrets.ee/components/ExternalSecretsProviderCard.ee.vue b/packages/frontend/editor-ui/src/features/integrations/externalSecrets.ee/components/ExternalSecretsProviderCard.ee.vue
index a60581bd433..295cbd8f30b 100644
--- a/packages/frontend/editor-ui/src/features/integrations/externalSecrets.ee/components/ExternalSecretsProviderCard.ee.vue
+++ b/packages/frontend/editor-ui/src/features/integrations/externalSecrets.ee/components/ExternalSecretsProviderCard.ee.vue
@@ -160,7 +160,7 @@ async function onActionDropdownClick(id: string) {
 					@action="onActionDropdownClick"
 				/>
 			</div>
-			<N8nButton v-else type="tertiary" @click="openExternalSecretProvider()">
+			<N8nButton variant="subtle" v-else @click="openExternalSecretProvider()">
 				{{ i18n.baseText('settings.externalSecrets.card.setUp') }}
 			</N8nButton>
 		</div>
diff --git a/packages/frontend/editor-ui/src/features/integrations/externalSecrets.ee/components/ExternalSecretsProviderModal.ee.vue b/packages/frontend/editor-ui/src/features/integrations/externalSecrets.ee/components/ExternalSecretsProviderModal.ee.vue
index 3153988f485..4b7b94b901d 100644
--- a/packages/frontend/editor-ui/src/features/integrations/externalSecrets.ee/components/ExternalSecretsProviderModal.ee.vue
+++ b/packages/frontend/editor-ui/src/features/integrations/externalSecrets.ee/components/ExternalSecretsProviderModal.ee.vue
@@ -189,7 +189,12 @@ async function onConnectionStateChange() {
 						:provider="provider"
 						@change="onConnectionStateChange"
 					/>
-					<N8nButton type="primary" :loading="saving" :disabled="!canSave && !saving" @click="save">
+					<N8nButton
+						variant="solid"
+						:loading="saving"
+						:disabled="!canSave && !saving"
+						@click="save"
+					>
 						{{
 							i18n.baseText(
 								`settings.externalSecrets.provider.buttons.${saving ? 'saving' : 'save'}`,
diff --git a/packages/frontend/editor-ui/src/features/integrations/logStreaming.ee/components/EventDestinationSettingsModal.vue b/packages/frontend/editor-ui/src/features/integrations/logStreaming.ee/components/EventDestinationSettingsModal.vue
index f1acf08b79e..949476b2b9b 100644
--- a/packages/frontend/editor-ui/src/features/integrations/logStreaming.ee/components/EventDestinationSettingsModal.vue
+++ b/packages/frontend/editor-ui/src/features/integrations/logStreaming.ee/components/EventDestinationSettingsModal.vue
@@ -435,6 +435,7 @@ const { width } = useElementSize(defNameRef);
 					</div>
 					<div :class="$style.destinationActions">
 						<N8nButton
+							variant="subtle"
 							v-if="nodeParameters && hasOnceBeenSaved && unchanged"
 							:icon="testMessageSent ? (testMessageResult ? 'check' : 'triangle-alert') : undefined"
 							:title="
@@ -442,7 +443,6 @@ const { width } = useElementSize(defNameRef);
 									? 'Event sent and returned OK'
 									: 'Event returned with error'
 							"
-							type="tertiary"
 							label="Send Test-Event"
 							:disabled="!hasOnceBeenSaved || !unchanged"
 							data-test-id="destination-test-button"
@@ -450,10 +450,10 @@ const { width } = useElementSize(defNameRef);
 						/>
 						<template v-if="canManageLogStreaming">
 							<N8nIconButton
+								variant="subtle"
 								v-if="nodeParameters && hasOnceBeenSaved"
 								:title="i18n.baseText('settings.log-streaming.delete')"
 								icon="trash-2"
-								type="tertiary"
 								:disabled="isSaving"
 								:loading="isDeleting"
 								data-test-id="destination-delete-button"
diff --git a/packages/frontend/editor-ui/src/features/integrations/secretsProviders.ee/components/SecretsProvidersEmptyState.ee.vue b/packages/frontend/editor-ui/src/features/integrations/secretsProviders.ee/components/SecretsProvidersEmptyState.ee.vue
index 79ea4058c4a..dc5b463bdf7 100644
--- a/packages/frontend/editor-ui/src/features/integrations/secretsProviders.ee/components/SecretsProvidersEmptyState.ee.vue
+++ b/packages/frontend/editor-ui/src/features/integrations/secretsProviders.ee/components/SecretsProvidersEmptyState.ee.vue
@@ -100,16 +100,15 @@ function onAddSecretsStore() {
 		</template>
 		<template #additionalContent>
 			<N8nButton
-				type="highlight"
-				class="mr-2xs"
-				element="a"
+				variant="ghost"
+				class="mr-2xs n8n-button--highlight"
 				:href="i18n.baseText('settings.externalSecrets.docs')"
 				target="_blank"
 				data-test-id="secrets-provider-connections-learn-more"
 			>
 				{{ i18n.baseText('generic.learnMore') }} <N8nIcon icon="arrow-up-right" />
 			</N8nButton>
-			<N8nButton v-if="canCreate" type="primary" @click="onAddSecretsStore">
+			<N8nButton v-if="canCreate" variant="solid" @click="onAddSecretsStore">
 				{{ i18n.baseText('settings.secretsProviderConnections.buttons.addSecretsStore') }}
 			</N8nButton>
 		</template>
diff --git a/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/components/SourceControlPullModal.vue b/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/components/SourceControlPullModal.vue
index a71c4aa9318..5d5c22129ec 100644
--- a/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/components/SourceControlPullModal.vue
+++ b/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/components/SourceControlPullModal.vue
@@ -587,8 +587,8 @@ onMounted(() => {
 															placement="top"
 														>
 															<N8nIconButton
+																variant="subtle"
 																icon="file-diff"
-																type="secondary"
 																@click="openDiffModal(file.id)"
 															/>
 														</N8nTooltip>
@@ -625,10 +625,10 @@ onMounted(() => {
 				</div>
 			</N8nCallout>
 			<div :class="$style.footer">
-				<N8nButton type="tertiary" class="mr-2xs" @click="close">
+				<N8nButton variant="subtle" class="mr-2xs" @click="close">
 					{{ i18n.baseText('settings.sourceControl.modals.pull.buttons.cancel') }}
 				</N8nButton>
-				<N8nButton type="primary" data-test-id="force-pull" @click="pullWorkfolder">
+				<N8nButton variant="solid" data-test-id="force-pull" @click="pullWorkfolder">
 					{{
 						hasModifiedWorkflows
 							? i18n.baseText('settings.sourceControl.modals.pull.buttons.save')
diff --git a/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/components/SourceControlPushModal.vue b/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/components/SourceControlPushModal.vue
index 05429acff6a..aaf047cdba8 100644
--- a/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/components/SourceControlPushModal.vue
+++ b/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/components/SourceControlPushModal.vue
@@ -823,8 +823,8 @@ onMounted(async () => {
 					>
 						<template #trigger>
 							<N8nButton
+								variant="subtle"
 								icon="funnel"
-								type="tertiary"
 								style="height: 100%"
 								:active="Boolean(filterCount)"
 								data-test-id="source-control-filter-dropdown"
@@ -1037,9 +1037,9 @@ onMounted(async () => {
 																placement="top"
 															>
 																<N8nIconButton
+																	variant="subtle"
 																	data-test-id="source-control-workflow-diff-button"
 																	icon="file-diff"
-																	type="secondary"
 																	@click="openDiffModal(file.id, file.status)"
 																/>
 															</N8nTooltip>
@@ -1094,8 +1094,8 @@ onMounted(async () => {
 					@keydown.enter.stop="onCommitKeyDownEnter"
 				/>
 				<N8nButton
+					variant="solid"
 					data-test-id="source-control-push-modal-submit"
-					type="primary"
 					:disabled="isSubmitDisabled"
 					size="large"
 					@click="commitAndPush"
diff --git a/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/views/SettingsSourceControl.vue b/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/views/SettingsSourceControl.vue
index 752c01fbe4a..9b01a28752d 100644
--- a/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/views/SettingsSourceControl.vue
+++ b/packages/frontend/editor-ui/src/features/integrations/sourceControl.ee/views/SettingsSourceControl.vue
@@ -326,9 +326,9 @@ watch(connectionType, () => {
 						@validate="(value: boolean) => onValidate('repoUrl', value)"
 					/>
 					<N8nButton
+						variant="subtle"
 						v-if="isConnected"
 						:class="$style.disconnectButton"
-						type="tertiary"
 						size="large"
 						icon="trash-2"
 						data-test-id="source-control-disconnect-button"
@@ -424,9 +424,9 @@ watch(connectionType, () => {
 						:copy-button-text="locale.baseText('generic.clickToCopy')"
 					/>
 					<N8nButton
+						variant="subtle"
 						v-if="!isConnected"
 						size="large"
-						type="tertiary"
 						icon="refresh-cw"
 						data-test-id="source-control-refresh-ssh-key-button"
 						@click="refreshSshKey"
@@ -485,10 +485,10 @@ watch(connectionType, () => {
 								</span>
 							</template>
 							<N8nButton
+								variant="subtle"
+								iconOnly
 								size="small"
-								type="tertiary"
 								icon="refresh-cw"
-								square
 								:class="$style.refreshBranches"
 								data-test-id="source-control-refresh-branches-button"
 								@click="refreshBranches"
diff --git a/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVHeader.vue b/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVHeader.vue
index 87542fb7130..16ec5af7d14 100644
--- a/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVHeader.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVHeader.vue
@@ -65,9 +65,8 @@ function onRename(newNodeName: string) {
 					{{ i18n.baseText('ndv.close.tooltip') }}
 				</template>
 				<N8nIconButton
+					variant="ghost"
 					icon="x"
-					type="tertiary"
-					text
 					data-test-id="ndv-close-button"
 					@click="emit('close')"
 				/>
diff --git a/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVSubConnections.vue b/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVSubConnections.vue
index d1bc210e141..e03dc11c903 100644
--- a/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVSubConnections.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVSubConnections.vue
@@ -322,9 +322,9 @@ defineExpose({
 										</template>
 									</template>
 									<N8nIconButton
+										variant="subtle"
 										size="medium"
 										icon="plus"
-										type="tertiary"
 										:data-test-id="`add-subnode-${getConnectionKey(connection, index)}`"
 									/>
 								</N8nTooltip>
diff --git a/packages/frontend/editor-ui/src/features/ndv/panel/components/__snapshots__/InputPanel.test.ts.snap b/packages/frontend/editor-ui/src/features/ndv/panel/components/__snapshots__/InputPanel.test.ts.snap
index 3b20b9bf7bc..a941ec81a80 100644
--- a/packages/frontend/editor-ui/src/features/ndv/panel/components/__snapshots__/InputPanel.test.ts.snap
+++ b/packages/frontend/editor-ui/src/features/ndv/panel/components/__snapshots__/InputPanel.test.ts.snap
@@ -138,23 +138,53 @@ exports[`InputPanel > should render 1`] = `
         >
           <button
             aria-live="polite"
-            class="button button tertiary medium"
+            class="button button subtle medium"
             data-v-5b5900d0=""
+            type="button"
           >
-            <!--v-if-->
-            <span>
-              Cancel
-            </span>
+            <transition-stub
+              appear="false"
+              css="true"
+              name="n8n-button-fade"
+              persisted="false"
+            >
+              <!--v-if-->
+            </transition-stub>
+            <div
+              class="button-inner"
+            >
+              
+              <!--v-if-->
+              
+              <span>
+                Cancel
+              </span>
+            </div>
           </button>
           <button
             aria-live="polite"
-            class="button button primary medium ml-2xs ml-2xs"
+            class="button button solid medium ml-2xs"
             data-v-5b5900d0=""
+            type="button"
           >
-            <!--v-if-->
-            <span>
-              Save
-            </span>
+            <transition-stub
+              appear="false"
+              css="true"
+              name="n8n-button-fade"
+              persisted="false"
+            >
+              <!--v-if-->
+            </transition-stub>
+            <div
+              class="button-inner"
+            >
+              
+              <!--v-if-->
+              
+              <span>
+                Save
+              </span>
+            </div>
           </button>
         </div>
       </div>
diff --git a/packages/frontend/editor-ui/src/features/ndv/panel/components/__snapshots__/NDVSubConnections.test.ts.snap b/packages/frontend/editor-ui/src/features/ndv/panel/components/__snapshots__/NDVSubConnections.test.ts.snap
index a52f9299b17..22b4ecebb4c 100644
--- a/packages/frontend/editor-ui/src/features/ndv/panel/components/__snapshots__/NDVSubConnections.test.ts.snap
+++ b/packages/frontend/editor-ui/src/features/ndv/panel/components/__snapshots__/NDVSubConnections.test.ts.snap
@@ -7,7 +7,7 @@ exports[`NDVSubConnections > should render container if possible connections 1`]
       <div class="connectionType"><span class="connectionLabel">Tools</span>
         <div>
           <div class="connectedNodesWrapper" style="--nodes-length: 0;">
-            <div class="plusButton"><span class="" data-state="closed" data-grace-area-trigger=""><n8n-button-stub icon="plus" block="false" element="button" label="" square="true" active="false" disabled="false" loading="false" outline="false" size="medium" text="false" type="tertiary" data-test-id="add-subnode-ai_tool-0"></n8n-button-stub></span>
+            <div class="plusButton"><span class="" data-state="closed" data-grace-area-trigger=""><n8n-button-stub icon="plus" variant="subtle" size="medium" loading="false" icononly="true" disabled="false" class="" data-test-id="add-subnode-ai_tool-0"></n8n-button-stub></span>
               <!--teleport start-->
               <!--teleport end-->
             </div>
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/AssignmentCollection/Assignment.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/AssignmentCollection/Assignment.vue
index 7833a68c68a..d627378f990 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/AssignmentCollection/Assignment.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/AssignmentCollection/Assignment.vue
@@ -159,17 +159,15 @@ const onValueDrop = async (droppedExpression: string) => {
 		data-test-id="assignment"
 	>
 		<N8nIconButton
+			variant="ghost"
 			v-if="!isReadOnly"
-			type="tertiary"
-			text
 			size="small"
 			icon="grip-vertical"
 			:class="[$style.iconButton, $style.defaultTopPadding, 'drag-handle']"
 		/>
 		<N8nIconButton
+			variant="ghost"
 			v-if="!isReadOnly"
-			type="tertiary"
-			text
 			size="small"
 			icon="trash-2"
 			data-test-id="assignment-remove"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ButtonParameter/ButtonParameter.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ButtonParameter/ButtonParameter.vue
index 7bbec343f9f..d2357318acf 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ButtonParameter/ButtonParameter.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ButtonParameter/ButtonParameter.vue
@@ -246,10 +246,10 @@ async function updateCursorPositionOnMouseMove(event: MouseEvent, activeDrop: bo
 			<N8nTooltip :disabled="isSubmitEnabled">
 				<div>
 					<N8nButton
+						variant="subtle"
 						:disabled="!isSubmitEnabled"
 						size="small"
 						:loading="isLoading"
-						type="secondary"
 						@click="onSubmit"
 					>
 						{{ buttonLabel }}
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/Collection/CollectionParameterLegacy.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/Collection/CollectionParameterLegacy.vue
index ee6834e9324..5f51d7cc429 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/Collection/CollectionParameterLegacy.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/Collection/CollectionParameterLegacy.vue
@@ -221,17 +221,17 @@ function valueChanged(parameterData: IUpdateInformation) {
 
 			<div v-if="!isReadOnly" :class="$style.paramOptions">
 				<N8nButton
+					style="width: 100%"
+					variant="subtle"
 					v-if="parameterOptions.length === 1"
-					type="tertiary"
-					block
 					:label="getPlaceholderText"
 					data-test-id="collection-parameter-add"
 					@click="optionSelected(parameterOptions[0].name)"
 				/>
 				<N8nButton
+					style="width: 100%"
+					variant="subtle"
 					v-else-if="(parameter.options ?? []).length === 1"
-					type="tertiary"
-					block
 					:label="getPlaceholderText"
 					:disabled="true"
 					data-test-id="collection-parameter-add"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/Collection/CollectionParameterNew.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/Collection/CollectionParameterNew.vue
index 1c861dc3a66..50e06acfbbe 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/Collection/CollectionParameterNew.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/Collection/CollectionParameterNew.vue
@@ -307,7 +307,12 @@ function valueChanged(parameterData: IUpdateInformation) {
 					@select="optionSelected"
 				>
 					<template #trigger>
-						<N8nButton type="highlightFill" icon="plus" :label="placeholder" />
+						<N8nButton
+							class="n8n-button--highlightFill"
+							variant="subtle"
+							icon="plus"
+							:label="placeholder"
+						/>
 					</template>
 				</N8nDropdown>
 			</div>
@@ -369,7 +374,12 @@ function valueChanged(parameterData: IUpdateInformation) {
 					@select="optionSelected"
 				>
 					<template #trigger>
-						<N8nButton type="highlightFill" icon="plus" :label="placeholder" />
+						<N8nButton
+							class="n8n-button--highlightFill"
+							variant="subtle"
+							icon="plus"
+							:label="placeholder"
+						/>
 					</template>
 				</N8nDropdown>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionParameterInput.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionParameterInput.vue
index 80ddf78b1c7..f1b32b9820c 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionParameterInput.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionParameterInput.vue
@@ -218,12 +218,11 @@ defineExpose({ focus, select });
 				</template>
 			</DraggableTarget>
 			<N8nButton
+				variant="outline"
+				iconOnly
 				v-if="!isDragging"
-				square
-				outline
-				type="tertiary"
 				icon="external-link"
-				size="mini"
+				size="xsmall"
 				:class="$style['expression-editor-modal-opener']"
 				data-test-id="expander"
 				@click="emit('modal-opener-click')"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/Condition.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/Condition.vue
index 4c8c20cddbb..e74bdee60b6 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/Condition.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/Condition.vue
@@ -226,18 +226,16 @@ watch(
 		data-test-id="filter-condition"
 	>
 		<N8nIconButton
+			variant="ghost"
 			v-if="canDrag && !readOnly"
-			type="tertiary"
-			text
 			size="small"
 			icon="grip-vertical"
 			:title="i18n.baseText('filter.dragCondition')"
 			:class="[$style.iconButton, $style.defaultTopPadding, 'drag-handle']"
 		/>
 		<N8nIconButton
+			variant="ghost"
 			v-if="canRemove && !readOnly"
-			type="tertiary"
-			text
 			size="small"
 			icon="trash-2"
 			data-test-id="filter-remove-condition"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/FilterConditions.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/FilterConditions.vue
index dccadac4df3..6e8f9302e93 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/FilterConditions.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/FilterConditions.vue
@@ -233,7 +233,8 @@ function getIssues(index: number): string[] {
 			</div>
 			<div v-if="!singleCondition && !readOnly" :class="$style.addConditionWrapper">
 				<N8nButton
-					type="highlightFill"
+					class="n8n-button--highlightFill"
+					variant="subtle"
 					icon="plus"
 					:label="i18n.baseText('filter.addCondition')"
 					:title="maxConditionsReached ? i18n.baseText('filter.maxConditions') : ''"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionItem.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionItem.vue
index 59f739fc57d..b574903fbd8 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionItem.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionItem.vue
@@ -137,7 +137,12 @@ const handleValueChanged = (parameterData: IUpdateInformation) =>
 		>
 			<N8nActionDropdown :items="pickerDropdownItems" @select="emit('toggleOptionalValue', $event)">
 				<template #activator>
-					<N8nButton type="highlightFill" icon="plus" :label="addOptionalFieldButtonText" />
+					<N8nButton
+						class="n8n-button--highlightFill"
+						variant="subtle"
+						icon="plus"
+						:label="addOptionalFieldButtonText"
+					/>
 				</template>
 			</N8nActionDropdown>
 		</div>
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionParameterLegacy.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionParameterLegacy.vue
index a502ee33bea..46658ebc754 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionParameterLegacy.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionParameterLegacy.vue
@@ -463,9 +463,8 @@ function getItemKey(_item: INodeParameters, index: number) {
 							<div :class="[$style.parameterItemWrapper, { [$style.borderTopDashed]: index }]">
 								<div v-if="!isReadOnly" :class="[$style.iconButton, $style.defaultTopPadding]">
 									<N8nIconButton
+										variant="ghost"
 										v-if="sortable"
-										type="tertiary"
-										text
 										size="small"
 										icon="grip-vertical"
 										:title="locale.baseText('fixedCollectionParameter.dragItem')"
@@ -474,8 +473,7 @@ function getItemKey(_item: INodeParameters, index: number) {
 								</div>
 								<div v-if="!isReadOnly" :class="[$style.iconButton, $style.extraTopPadding]">
 									<N8nIconButton
-										type="tertiary"
-										text
+										variant="ghost"
 										size="small"
 										icon="trash-2"
 										data-test-id="fixed-collection-delete"
@@ -536,8 +534,7 @@ function getItemKey(_item: INodeParameters, index: number) {
 				<div :class="$style.parameterItemWrapper">
 					<div v-if="!isReadOnly" :class="$style.iconButton">
 						<N8nIconButton
-							type="tertiary"
-							text
+							variant="ghost"
 							size="small"
 							icon="trash-2"
 							data-test-id="fixed-collection-delete"
@@ -591,9 +588,9 @@ function getItemKey(_item: INodeParameters, index: number) {
 
 		<div v-if="parameterOptions.length > 0 && !isReadOnly" :class="$style.controls">
 			<N8nButton
+				style="width: 100%"
+				variant="subtle"
 				v-if="parameter.options && parameter.options.length === 1"
-				type="tertiary"
-				block
 				data-test-id="fixed-collection-add"
 				:label="getPlaceholderText"
 				@click="onAddButtonClick(parameter.options[0].name)"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionParameterNew.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionParameterNew.vue
index 27f16228ae5..aa4004986ec 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionParameterNew.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollection/FixedCollectionParameterNew.vue
@@ -666,8 +666,9 @@ const onAddButtonClick = () => {
 
 			<div v-if="shouldShowAddAtBottom" :class="$style.controls">
 				<N8nButton
+					class="n8n-button--highlightFill"
+					variant="subtle"
 					v-if="hasSingleOption"
-					type="highlightFill"
 					icon="plus"
 					:data-test-id="`fixed-collection-add-top-level-button`"
 					:label="placeholder"
@@ -684,7 +685,8 @@ const onAddButtonClick = () => {
 				>
 					<template #trigger>
 						<N8nButton
-							type="highlightFill"
+							class="n8n-button--highlightFill"
+							variant="subtle"
 							icon="plus"
 							:label="placeholder"
 							:disabled="isAddDisabled"
@@ -763,8 +765,9 @@ const onAddButtonClick = () => {
 
 					<div v-if="shouldShowAddAtBottom" :class="$style.controls">
 						<N8nButton
+							class="n8n-button--highlightFill"
+							variant="subtle"
 							v-if="hasSingleOption"
-							type="highlightFill"
 							icon="plus"
 							:data-test-id="`fixed-collection-add-nested-button`"
 							:label="placeholder"
@@ -778,7 +781,12 @@ const onAddButtonClick = () => {
 							@select="optionSelected"
 						>
 							<template #trigger>
-								<N8nButton type="highlightFill" icon="plus" :label="placeholder" />
+								<N8nButton
+									class="n8n-button--highlightFill"
+									variant="subtle"
+									icon="plus"
+									:label="placeholder"
+								/>
 							</template>
 						</N8nDropdown>
 					</div>
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ImportCurlParameter.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ImportCurlParameter.vue
index e605c68b265..f48ca6aab61 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ImportCurlParameter.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ImportCurlParameter.vue
@@ -19,10 +19,10 @@ function onImportCurlClicked() {
 <template>
 	<div :class="$style.importSection">
 		<N8nButton
-			type="secondary"
+			variant="subtle"
 			:label="i18n.baseText('importCurlParameter.label')"
 			:disabled="isReadOnly"
-			size="mini"
+			size="xsmall"
 			@click="onImportCurlClicked"
 		/>
 	</div>
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/MultipleParameter.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/MultipleParameter.vue
index c2823a0a79e..b728bddf8c8 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/MultipleParameter.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/MultipleParameter.vue
@@ -184,9 +184,9 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 				}}</N8nText>
 			</div>
 			<N8nButton
+				style="width: 100%"
+				variant="subtle"
 				v-if="!isReadOnly"
-				type="tertiary"
-				block
 				:label="addButtonText"
 				@click="addItem()"
 			/>
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputList.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputList.vue
index b8387eb8926..a99f1d92526 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputList.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputList.vue
@@ -760,14 +760,13 @@ watch(
 					{{ i18n.baseText('parameterInputList.loadingError') }}
 				</N8nText>
 				<N8nIconButton
+					variant="ghost"
 					v-if="
 						hideDelete !== true &&
 						!isReadOnly &&
 						!item.parameter.isNodeSetting &&
 						!isCollectionOverhaulEnabled
 					"
-					type="tertiary"
-					text
 					size="small"
 					icon="trash-2"
 					class="icon-button"
@@ -811,14 +810,13 @@ watch(
 			/>
 			<div v-else-if="credentialsParameterIndex !== index" class="parameter-item">
 				<N8nIconButton
+					variant="ghost"
 					v-if="
 						hideDelete !== true &&
 						!isReadOnly &&
 						!item.parameter.isNodeSetting &&
 						!isCollectionOverhaulEnabled
 					"
-					type="tertiary"
-					text
 					size="small"
 					icon="trash-2"
 					class="icon-button"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/FromAiOverrideButton.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/FromAiOverrideButton.vue
index 4a6bde1b0af..aae08c78778 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/FromAiOverrideButton.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/FromAiOverrideButton.vue
@@ -17,8 +17,8 @@ const emit = defineEmits<{
 		</template>
 
 		<N8nButton
+			variant="subtle"
 			:class="[$style.overrideButton]"
-			type="tertiary"
 			data-test-id="from-ai-override-button"
 			@click="emit('click')"
 		>
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/FromAiOverrideField.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/FromAiOverrideField.vue
index 7cb7521927d..647b24bab44 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/FromAiOverrideField.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/FromAiOverrideField.vue
@@ -25,8 +25,8 @@ const emit = defineEmits<{
 			/>
 		</div>
 		<N8nIconButton
+			variant="subtle"
 			v-if="!isReadOnly"
-			type="tertiary"
 			:class="['n8n-input', $style.overrideCloseButton]"
 			:outline="false"
 			icon="x"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterOptions.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterOptions.vue
index ddf9780c7a1..903e97325c1 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterOptions.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterOptions.vue
@@ -181,9 +181,8 @@ const onViewSelected = (selected: string) => {
 		</div>
 		<div v-else :class="$style.controlsContainer">
 			<N8nIconButton
+				variant="ghost"
 				v-if="canBeOpenedInFocusPanel"
-				type="tertiary"
-				text
 				size="small"
 				icon-size="large"
 				icon="panel-right"
@@ -221,9 +220,8 @@ const onViewSelected = (selected: string) => {
 			/>
 
 			<N8nIconButton
+				variant="ghost"
 				v-if="showDelete && onDelete"
-				type="tertiary"
-				text
 				size="small"
 				icon-size="large"
 				icon="trash-2"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceMapper/MappingFields.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceMapper/MappingFields.vue
index fb323d60268..6bf4fc1a224 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceMapper/MappingFields.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceMapper/MappingFields.vue
@@ -328,10 +328,9 @@ defineExpose({
 						<N8nIcon icon="triangle-alert" size="small" color="warning" />
 					</N8nTooltip>
 					<N8nIconButton
+						variant="ghost"
 						icon="refresh-cw"
-						type="tertiary"
 						size="small"
-						:text="true"
 						:title="locale.baseText('generic.refresh')"
 						:disabled="props.refreshInProgress"
 						@click="onParameterActionSelected('refreshFieldList')"
@@ -388,8 +387,7 @@ defineExpose({
 				:class="['delete-option', 'mt-5xs']"
 			>
 				<N8nIconButton
-					type="tertiary"
-					text
+					variant="ghost"
 					size="small"
 					icon="trash-2"
 					:data-test-id="`remove-field-button-${getParsedFieldName(field.name)}`"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceMapper/ResourceMapper.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceMapper/ResourceMapper.vue
index f1108d9f5ef..a9ccc3ff9f5 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceMapper/ResourceMapper.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceMapper/ResourceMapper.vue
@@ -659,9 +659,9 @@ defineExpose({
 			{{ locale.baseText('resourceMapper.staleDataWarning.notice') }}
 			<template #trailingContent>
 				<N8nButton
-					size="mini"
+					variant="subtle"
+					size="xsmall"
 					icon="refresh-cw"
-					type="secondary"
 					:loading="state.refreshInProgress"
 					@click="initFetching(true)"
 				>
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/__snapshots__/MultipleParameter.test.ts.snap b/packages/frontend/editor-ui/src/features/ndv/parameters/components/__snapshots__/MultipleParameter.test.ts.snap
index 4e913d24a3a..be4f3a07705 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/__snapshots__/MultipleParameter.test.ts.snap
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/__snapshots__/MultipleParameter.test.ts.snap
@@ -18,8 +18,13 @@ exports[`MultipleParameter > should render correctly 1`] = `
     </div>
   </div>
   <div data-v-e2d23dd5="" class="add-item-wrapper">
-    <div data-v-e2d23dd5="" class="no-items-exist"><span data-v-e2d23dd5="" class="n8n-text size-small regular">Currently no items exist</span></div><button data-v-e2d23dd5="" class="button button tertiary medium block" aria-live="polite">
-      <!--v-if--><span>Add item</span>
+    <div data-v-e2d23dd5="" class="no-items-exist"><span data-v-e2d23dd5="" class="n8n-text size-small regular">Currently no items exist</span></div><button data-v-e2d23dd5="" style="width: 100%;" type="button" class="button button subtle medium" aria-live="polite">
+      <transition-stub name="n8n-button-fade" appear="false" persisted="false" css="true">
+        <!--v-if-->
+      </transition-stub>
+      <div class="button-inner">
+        <!--v-if--><span>Add item</span>
+      </div>
     </button>
   </div>
 </div>"
diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.vue b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.vue
index dad8e8f877b..4179a9daa8c 100644
--- a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.vue
@@ -1500,12 +1500,11 @@ defineExpose({ enterEditMode });
 				</Suspense>
 
 				<N8nIconButton
+					variant="ghost"
 					v-if="displayMode === 'table' && collapsingTableColumnName !== null"
 					:class="$style.resetCollapseButton"
-					text
 					icon="chevrons-up-down"
-					size="xmini"
-					type="tertiary"
+					size="xsmall"
 					@click="emit('collapsingTableColumnChanged', null)"
 				/>
 
@@ -1522,13 +1521,13 @@ defineExpose({ enterEditMode });
 				/>
 
 				<N8nIconButton
+					variant="subtle"
 					v-if="!props.disableEdit && canPinData && !isReadOnlyRoute && !readOnlyEnv"
 					v-show="!editMode.enabled"
 					:title="i18n.baseText('runData.editOutput')"
 					:circle="false"
 					:disabled="node?.disabled"
 					icon="pencil"
-					type="tertiary"
 					data-test-id="ndv-edit-pinned-data"
 					@click="enterEditMode({ origin: 'editIconButton' })"
 				/>
@@ -1548,13 +1547,13 @@ defineExpose({ enterEditMode });
 
 				<div v-if="!props.disableEdit" v-show="editMode.enabled" :class="$style.editModeActions">
 					<N8nButton
-						type="tertiary"
+						variant="subtle"
 						:label="i18n.baseText('runData.editor.cancel')"
 						@click="onClickCancelEdit"
 					/>
 					<N8nButton
+						variant="solid"
 						class="ml-2xs"
-						type="primary"
 						:label="i18n.baseText('runData.editor.save')"
 						@click="onClickSaveEdit"
 					/>
@@ -1601,10 +1600,9 @@ defineExpose({ enterEditMode });
 							{{ i18n.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
 						</template>
 						<N8nIconButton
+							variant="ghost"
 							:icon="linkedRuns ? 'unlink' : 'link'"
 							:class="['linkRun', linkedRuns ? 'linked' : '']"
-							text
-							type="tertiary"
 							size="small"
 							data-test-id="link-run"
 							@click="toggleLinkRuns"
@@ -1830,7 +1828,7 @@ defineExpose({ enterEditMode });
 
 					<div :class="$style.warningActions">
 						<N8nButton
-							outline
+							variant="outline"
 							size="small"
 							:label="i18n.baseText('runData.downloadBinaryData')"
 							@click="downloadJsonData()"
diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataBinary.vue b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataBinary.vue
index 121ba28555d..e70477a58a4 100644
--- a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataBinary.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataBinary.vue
@@ -140,9 +140,9 @@ function openWorkflowSettings() {
 								@click="emit('preview', index, key)"
 							/>
 							<N8nButton
+								variant="subtle"
 								v-if="isDownloadable(index, key)"
 								size="small"
-								type="secondary"
 								:label="i18n.baseText('runData.downloadBinaryData')"
 								data-test-id="ndv-download-binary-data"
 								@click="downloadBinaryData(index, key)"
diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataJsonActions.vue b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataJsonActions.vue
index 870d707dea4..953be55533a 100644
--- a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataJsonActions.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataJsonActions.vue
@@ -196,10 +196,10 @@ function handleCopyClick(commandData: { command: string }) {
 <template>
 	<div :class="$style.actionsGroup" data-test-id="ndv-json-actions">
 		<N8nIconButton
+			variant="subtle"
 			v-if="noSelection"
 			:title="i18n.baseText('runData.copyToClipboard')"
 			icon="files"
-			type="tertiary"
 			:circle="false"
 			@click="handleCopyClick({ command: 'value' })"
 		/>
@@ -213,9 +213,9 @@ function handleCopyClick(commandData: { command: string }) {
 		>
 			<span class="el-dropdown-link">
 				<N8nIconButton
+					variant="subtle"
 					:title="i18n.baseText('runData.copyToClipboard')"
 					icon="files"
-					type="tertiary"
 					:circle="false"
 				/>
 			</span>
diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataParsedAiContent.vue b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataParsedAiContent.vue
index f4b425799cc..19b8e62cb88 100644
--- a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataParsedAiContent.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataParsedAiContent.vue
@@ -135,9 +135,9 @@ function onCopyToClipboard(object: IDataObject | IDataObject[]) {
 			<!-- We weren't able to parse text or raw switch -->
 			<div v-else :class="$style.rawContent">
 				<N8nIconButton
+					variant="subtle"
 					size="small"
 					:class="$style.copyToClipboard"
-					type="secondary"
 					:title="i18n.baseText('nodeErrorView.copyToClipboard')"
 					icon="files"
 					@click="onCopyToClipboard(raw)"
diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.vue b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.vue
index c236a9a4e1d..4ec0ba32a78 100644
--- a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.vue
@@ -52,8 +52,8 @@ const visible = computed(() =>
 			</div>
 		</template>
 		<N8nIconButton
+			variant="subtle"
 			:class="$style.pinDataButton"
-			type="tertiary"
 			:active="props.pinnedData.hasData.value"
 			icon="pin"
 			:disabled="props.disabled"
diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataTable.vue b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataTable.vue
index 7f34b091907..bd1060999c3 100644
--- a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataTable.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataTable.vue
@@ -533,12 +533,11 @@ watch(
 							:hide-after="0"
 						>
 							<N8nIconButton
+								variant="subtle"
 								v-show="showExecutionLink(index1)"
-								element="a"
-								type="secondary"
 								icon="external-link"
 								data-test-id="debug-sub-execution"
-								size="mini"
+								size="xsmall"
 								target="_blank"
 								:href="resolveRelatedExecutionUrl(tableData.metadata.data[index1])"
 								@click="trackOpeningRelatedExecution(tableData.metadata.data[index1], 'table')"
@@ -612,10 +611,9 @@ watch(
 											:disabled="mappingEnabled || collapsingColumnIndex === i"
 										>
 											<N8nIconButton
+												variant="ghost"
 												:class="$style.collapseColumnButton"
-												type="tertiary"
-												size="xmini"
-												text
+												size="xsmall"
 												:icon="
 													collapsingColumnIndex === i ? 'chevrons-up-down' : 'chevrons-down-up'
 												"
@@ -699,12 +697,11 @@ watch(
 							:hide-after="0"
 						>
 							<N8nIconButton
+								variant="subtle"
 								v-show="showExecutionLink(index1)"
-								element="a"
-								type="secondary"
 								icon="external-link"
 								data-test-id="debug-sub-execution"
-								size="mini"
+								size="xsmall"
 								target="_blank"
 								:href="resolveRelatedExecutionUrl(tableData.metadata.data[index1])"
 								@click="trackOpeningRelatedExecution(tableData.metadata.data[index1], 'table')"
diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/ai/AiRunContentBlock.vue b/packages/frontend/editor-ui/src/features/ndv/runData/components/ai/AiRunContentBlock.vue
index d9577fd8f8f..93d8a75d6ae 100644
--- a/packages/frontend/editor-ui/src/features/ndv/runData/components/ai/AiRunContentBlock.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/ai/AiRunContentBlock.vue
@@ -140,7 +140,7 @@ watch(
 				</NDVEmptyState>
 				<div :class="$style.warningActions">
 					<N8nButton
-						outline
+						variant="outline"
 						size="small"
 						:label="i18n.baseText('runData.downloadBinaryData')"
 						@click.stop="downloadJsonData"
diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/error/NodeErrorView.vue b/packages/frontend/editor-ui/src/features/ndv/runData/components/error/NodeErrorView.vue
index 1b3f9e48582..ea40d5a19f0 100644
--- a/packages/frontend/editor-ui/src/features/ndv/runData/components/error/NodeErrorView.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/error/NodeErrorView.vue
@@ -473,8 +473,8 @@ async function onAskAssistantClick() {
 
 			<div v-if="isSubNodeError">
 				<N8nButton
+					variant="subtle"
 					icon="arrow-right"
-					type="secondary"
 					:label="i18n.baseText('pushConnection.executionError.openNode')"
 					class="node-error-view__button"
 					data-test-id="node-error-view-open-node-button"
@@ -501,14 +501,7 @@ async function onAskAssistantClick() {
 					placement="left"
 				>
 					<div class="copy-button">
-						<N8nIconButton
-							icon="files"
-							type="secondary"
-							size="small"
-							:text="true"
-							transparent-background="transparent"
-							@click="copyErrorDetails"
-						/>
+						<N8nIconButton variant="ghost" icon="files" size="small" @click="copyErrorDetails" />
 					</div>
 				</N8nTooltip>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/ndv/settings/components/NodeSettingsInvalidNodeWarning.vue b/packages/frontend/editor-ui/src/features/ndv/settings/components/NodeSettingsInvalidNodeWarning.vue
index 7fc919cb1c6..2a34cbca566 100644
--- a/packages/frontend/editor-ui/src/features/ndv/settings/components/NodeSettingsInvalidNodeWarning.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/settings/components/NodeSettingsInvalidNodeWarning.vue
@@ -115,9 +115,9 @@ watch(isNodeDefined, () => {
 			</I18nT>
 			<div v-if="isOwner" :class="$style.communityNodeActionsContainer">
 				<N8nButton
+					variant="solid"
 					v-if="isOwner"
 					icon="hard-drive-download"
-					type="primary"
 					data-test-id="install-community-node-button"
 					:loading="loading"
 					:disabled="loading"
@@ -126,8 +126,8 @@ watch(isNodeDefined, () => {
 					{{ i18n.baseText('nodeSettings.communityNodeUnknown.installButton.label') }}
 				</N8nButton>
 				<N8nButton
+					variant="subtle"
 					icon="external-link"
-					type="secondary"
 					@click="onViewDetailsClick"
 					data-test-id="view-details-button"
 				>
diff --git a/packages/frontend/editor-ui/src/features/project-roles/ProjectRoleView.test.ts b/packages/frontend/editor-ui/src/features/project-roles/ProjectRoleView.test.ts
index 1f8622f4f72..2839fd9b54f 100644
--- a/packages/frontend/editor-ui/src/features/project-roles/ProjectRoleView.test.ts
+++ b/packages/frontend/editor-ui/src/features/project-roles/ProjectRoleView.test.ts
@@ -118,12 +118,12 @@ const fillForm = async (container: Element, name: string, description = '') => {
 };
 
 const waitForEditButtonsToBe = async (
-	getByText: RenderResult['getByText'],
+	getByRole: RenderResult['getByRole'],
 	state: 'enabled' | 'disabled',
 ) =>
 	await waitFor(() => {
-		const discardButton = getByText('Discard changes');
-		const saveButton = getByText('Save', { selector: 'button' });
+		const discardButton = getByRole('button', { name: 'Discard changes' });
+		const saveButton = getByRole('button', { name: 'Save' });
 
 		if (state === 'disabled') {
 			expect(saveButton).toBeDisabled();
@@ -161,10 +161,10 @@ describe('ProjectRoleView', () => {
 
 	describe('New Role Creation', () => {
 		it('should render new role form when no roleSlug prop provided', () => {
-			const { getByText, getByPlaceholderText } = renderComponent();
+			const { getByText, getByPlaceholderText, getByRole } = renderComponent();
 
 			expect(getByText('New Role')).toBeInTheDocument();
-			expect(getByText('Create', { selector: 'button' })).toBeInTheDocument();
+			expect(getByRole('button', { name: 'Create' })).toBeInTheDocument();
 			expect(getByText('Role name')).toBeInTheDocument();
 			expect(getByText('Description')).toBeInTheDocument();
 			expect(getByPlaceholderText('Optional')).toBeInTheDocument();
@@ -193,10 +193,10 @@ describe('ProjectRoleView', () => {
 			const mockCreatedRole = { ...mockExistingRole, slug: 'new-role-slug' };
 			rolesStore.createProjectRole.mockResolvedValueOnce(mockCreatedRole);
 
-			const { container, getByText } = renderComponent();
+			const { container, getByRole } = renderComponent();
 
 			await fillForm(container, 'New Test Role', 'A new test role');
-			await userEvent.click(getByText('Create', { selector: 'button' }));
+			await userEvent.click(getByRole('button', { name: 'Create' }));
 
 			await waitFor(() => {
 				expect(rolesStore.createProjectRole).toHaveBeenCalledWith({
@@ -221,10 +221,10 @@ describe('ProjectRoleView', () => {
 			const error = new Error('Creation failed');
 			rolesStore.createProjectRole.mockRejectedValueOnce(error);
 
-			const { container, getByText } = renderComponent();
+			const { container, getByRole } = renderComponent();
 
 			await fillForm(container, 'Test Role');
-			await userEvent.click(getByText('Create', { selector: 'button' }));
+			await userEvent.click(getByRole('button', { name: 'Create' }));
 
 			await waitFor(() => {
 				expect(mockShowError).toHaveBeenCalledWith(error, 'Error creating role');
@@ -236,7 +236,7 @@ describe('ProjectRoleView', () => {
 		it('should fetch and display existing role when roleSlug is provided', async () => {
 			setupEditingRole();
 
-			const { getByText, getByDisplayValue } = await setupEditingRoleComponent();
+			const { getByText, getByDisplayValue, getByRole } = await setupEditingRoleComponent();
 
 			await waitFor(() => {
 				expect(rolesStore.fetchRoleBySlug).toHaveBeenCalledWith({ slug: 'test-role' });
@@ -244,7 +244,7 @@ describe('ProjectRoleView', () => {
 
 			await waitFor(() => {
 				expect(getByText('Role "Test Role"')).toBeInTheDocument();
-				expect(getByText('Save', { selector: 'button' })).toBeInTheDocument();
+				expect(getByRole('button', { name: 'Save' })).toBeInTheDocument();
 				expect(getByDisplayValue('Test Role')).toBeInTheDocument();
 				expect(getByDisplayValue('A test role for testing')).toBeInTheDocument();
 			});
@@ -266,13 +266,13 @@ describe('ProjectRoleView', () => {
 			setupEditingRole();
 			rolesStore.updateProjectRole.mockResolvedValueOnce(updatedRole);
 
-			const { container, getByText } = await setupEditingRoleComponent();
+			const { container, getByRole } = await setupEditingRoleComponent();
 
 			await waitFor(() => expect(rolesStore.fetchRoleBySlug).toHaveBeenCalled());
 			await waitForFormPopulation(container, 'Test Role');
 
 			await fillForm(container, 'Updated Role');
-			await userEvent.click(getByText('Save', { selector: 'button' }));
+			await userEvent.click(getByRole('button', { name: 'Save' }));
 
 			await waitFor(() => {
 				expect(rolesStore.updateProjectRole).toHaveBeenCalledWith('test-role', {
@@ -293,13 +293,13 @@ describe('ProjectRoleView', () => {
 			setupEditingRole();
 			rolesStore.updateProjectRole.mockRejectedValueOnce(error);
 
-			const { getByText, container } = await setupEditingRoleComponent();
+			const { getByRole, container } = await setupEditingRoleComponent();
 
 			await waitFor(() => expect(rolesStore.fetchRoleBySlug).toHaveBeenCalled());
 			await waitForFormPopulation(container, 'Test Role');
 
 			await fillForm(container, 'Updated Role');
-			await userEvent.click(getByText('Save', { selector: 'button' }));
+			await userEvent.click(getByRole('button', { name: 'Save' }));
 
 			await waitFor(() => {
 				expect(mockShowError).toHaveBeenCalledWith(error, 'Error updating role');
@@ -367,33 +367,33 @@ describe('ProjectRoleView', () => {
 	describe('Action Buttons', () => {
 		describe('Editing Mode (initialState exists)', () => {
 			it('should render discard changes and save buttons when editing existing role', async () => {
-				const { getByText } = await setupEditingRoleComponent();
+				const { getByRole } = await setupEditingRoleComponent();
 
 				await waitFor(() => {
-					expect(getByText('Discard changes')).toBeInTheDocument();
-					expect(getByText('Save', { selector: 'button' })).toBeInTheDocument();
+					expect(getByRole('button', { name: 'Discard changes' })).toBeInTheDocument();
+					expect(getByRole('button', { name: 'Save' })).toBeInTheDocument();
 				});
 			});
 
 			it('should disable discard changes and save buttons when no unsaved changes', async () => {
-				const { getByText } = await setupEditingRoleComponent();
-				await waitForEditButtonsToBe(getByText, 'disabled');
+				const { getByRole } = await setupEditingRoleComponent();
+				await waitForEditButtonsToBe(getByRole, 'disabled');
 			});
 
 			it('should enable discard changes and save buttons when there are unsaved changes', async () => {
-				const { container, getByText } = await setupEditingRoleComponent();
+				const { container, getByRole } = await setupEditingRoleComponent();
 				await waitForFormPopulation(container, 'Test Role');
 
 				await fillForm(container, 'Modified Role');
-				await waitForEditButtonsToBe(getByText, 'enabled');
+				await waitForEditButtonsToBe(getByRole, 'enabled');
 			});
 
 			it('should reset form to initial state when discard changes is clicked', async () => {
-				const { container, getByText } = await setupEditingRoleComponent();
+				const { container, getByRole } = await setupEditingRoleComponent();
 				await waitForFormPopulation(container, 'Test Role');
 
 				await fillForm(container, 'Modified Role');
-				await userEvent.click(getByText('Discard changes'));
+				await userEvent.click(getByRole('button', { name: 'Discard changes' }));
 
 				const { nameInput } = getFormElements(container);
 				await waitFor(() => {
@@ -405,11 +405,11 @@ describe('ProjectRoleView', () => {
 				const updatedRole = { ...mockExistingRole, displayName: 'Updated Role' };
 				rolesStore.updateProjectRole.mockResolvedValueOnce(updatedRole);
 
-				const { container, getByText } = await setupEditingRoleComponent();
+				const { container, getByRole } = await setupEditingRoleComponent();
 				await waitForFormPopulation(container, 'Test Role');
 
 				await fillForm(container, 'Updated Role');
-				await userEvent.click(getByText('Save', { selector: 'button' }));
+				await userEvent.click(getByRole('button', { name: 'Save' }));
 
 				await waitFor(() => {
 					expect(rolesStore.updateProjectRole).toHaveBeenCalledWith('test-role', {
@@ -423,21 +423,21 @@ describe('ProjectRoleView', () => {
 
 		describe('Creation Mode (no initialState)', () => {
 			it('should render only create button when creating new role', () => {
-				const { getByText, queryByText } = renderComponent();
+				const { getByRole, queryByRole } = renderComponent();
 
-				expect(getByText('Create', { selector: 'button' })).toBeInTheDocument();
-				expect(queryByText('Discard changes')).not.toBeInTheDocument();
-				expect(queryByText('Save', { selector: 'button' })).not.toBeInTheDocument();
+				expect(getByRole('button', { name: 'Create' })).toBeInTheDocument();
+				expect(queryByRole('button', { name: 'Discard changes' })).not.toBeInTheDocument();
+				expect(queryByRole('button', { name: 'Save' })).not.toBeInTheDocument();
 			});
 
 			it('should call handleSubmit when create button is clicked', async () => {
 				const mockCreatedRole = { ...mockExistingRole, slug: 'new-role-slug' };
 				rolesStore.createProjectRole.mockResolvedValueOnce(mockCreatedRole);
 
-				const { container, getByText } = renderComponent();
+				const { container, getByRole } = renderComponent();
 
 				await fillForm(container, 'New Test Role');
-				await userEvent.click(getByText('Create', { selector: 'button' }));
+				await userEvent.click(getByRole('button', { name: 'Create' }));
 
 				await waitFor(() => {
 					expect(rolesStore.createProjectRole).toHaveBeenCalledWith({
@@ -453,40 +453,40 @@ describe('ProjectRoleView', () => {
 
 	describe('Form states', () => {
 		it('should disable buttons when form matches initial state', async () => {
-			const { getByText } = await setupEditingRoleComponent();
-			await waitForEditButtonsToBe(getByText, 'disabled');
+			const { getByRole } = await setupEditingRoleComponent();
+			await waitForEditButtonsToBe(getByRole, 'disabled');
 		});
 
 		it('should enable buttons when displayName is changed', async () => {
-			const { container, getByText } = await setupEditingRoleComponent();
+			const { container, getByRole } = await setupEditingRoleComponent();
 			await waitForFormPopulation(container, 'Test Role');
 
 			await fillForm(container, 'Changed Name');
-			await waitForEditButtonsToBe(getByText, 'enabled');
+			await waitForEditButtonsToBe(getByRole, 'enabled');
 		});
 
 		it('should enable buttons when description is changed', async () => {
-			const { container, getByText } = await setupEditingRoleComponent();
+			const { container, getByRole } = await setupEditingRoleComponent();
 			await waitFor(() => {
 				const { descriptionInput } = getFormElements(container);
 				expect(descriptionInput?.value).toBe('A test role for testing');
 			});
 
 			await fillForm(container, 'Test Role', 'Changed description');
-			await waitForEditButtonsToBe(getByText, 'enabled');
+			await waitForEditButtonsToBe(getByRole, 'enabled');
 		});
 
 		it('should enable buttons when scopes are changed', async () => {
-			const { getByText, getByTestId } = await setupEditingRoleComponent();
+			const { getByRole, getByTestId } = await setupEditingRoleComponent();
 			await waitFor(() => {
-				const discardButton = getByText('Discard changes');
+				const discardButton = getByRole('button', { name: 'Discard changes' });
 				expect(discardButton).toBeDisabled();
 			});
 
 			const scopeCheckbox = getByTestId('scope-checkbox-project:update');
 
 			await userEvent.click(scopeCheckbox);
-			await waitForEditButtonsToBe(getByText, 'enabled');
+			await waitForEditButtonsToBe(getByRole, 'enabled');
 		});
 	});
 
@@ -494,10 +494,10 @@ describe('ProjectRoleView', () => {
 		it('should handle empty description', async () => {
 			rolesStore.createProjectRole.mockResolvedValue({ ...mockExistingRole, slug: 'new-slug' });
 
-			const { container, getByText } = renderComponent();
+			const { container, getByRole } = renderComponent();
 
 			await fillForm(container, 'Test Role');
-			await userEvent.click(getByText('Create', { selector: 'button' }));
+			await userEvent.click(getByRole('button', { name: 'Create' }));
 
 			await waitFor(() => {
 				expect(rolesStore.createProjectRole).toHaveBeenCalledWith({
@@ -513,10 +513,10 @@ describe('ProjectRoleView', () => {
 			const mockCreatedRole = { ...mockExistingRole, slug: 'new-role' };
 			rolesStore.createProjectRole.mockResolvedValueOnce(mockCreatedRole);
 
-			const { container, getByText } = renderComponent();
+			const { container, getByRole } = renderComponent();
 
 			await fillForm(container, 'New Role');
-			await userEvent.click(getByText('Create', { selector: 'button' }));
+			await userEvent.click(getByRole('button', { name: 'Create' }));
 
 			await waitFor(() => {
 				expect(rolesStore.createProjectRole).toHaveBeenCalled();
diff --git a/packages/frontend/editor-ui/src/features/project-roles/ProjectRoleView.vue b/packages/frontend/editor-ui/src/features/project-roles/ProjectRoleView.vue
index 244e2276b87..34c67343298 100644
--- a/packages/frontend/editor-ui/src/features/project-roles/ProjectRoleView.vue
+++ b/packages/frontend/editor-ui/src/features/project-roles/ProjectRoleView.vue
@@ -322,10 +322,9 @@ const displayNameValidationRules = [
 <template>
 	<div class="pb-xl" :class="$style.container">
 		<N8nButton
+			variant="ghost"
 			icon="arrow-left"
-			type="secondary"
 			:class="$style.backButton"
-			text
 			@click="() => router.back()"
 		>
 			{{ i18n.baseText('projectRoles.backToRoleList') }}
@@ -336,7 +335,7 @@ const displayNameValidationRules = [
 			</N8nHeading>
 			<div v-if="initialState && !isReadOnly">
 				<N8nButton
-					type="secondary"
+					variant="subtle"
 					:disabled="!hasUnsavedChanges"
 					class="mr-xs"
 					@click="resetForm(initialState)"
@@ -384,13 +383,13 @@ const displayNameValidationRules = [
 			</N8nText>
 
 			<div class="mb-s" :class="$style.presetsContainer">
-				<N8nButton type="secondary" @click="setPreset('project:admin')">
+				<N8nButton variant="subtle" @click="setPreset('project:admin')">
 					{{ i18n.baseText('projectRoles.admin') }}
 				</N8nButton>
-				<N8nButton type="secondary" @click="setPreset('project:editor')">
+				<N8nButton variant="subtle" @click="setPreset('project:editor')">
 					{{ i18n.baseText('projectRoles.editor') }}
 				</N8nButton>
-				<N8nButton type="secondary" @click="setPreset('project:viewer')">
+				<N8nButton variant="subtle" @click="setPreset('project:viewer')">
 					{{ i18n.baseText('projectRoles.viewer') }}
 				</N8nButton>
 			</div>
@@ -444,7 +443,11 @@ const displayNameValidationRules = [
 				</template>
 				<template v-else> {{ i18n.baseText('projectRoles.action.delete.warning') }}</template>
 			</N8nText>
-			<N8nButton type="danger" :disabled="Boolean(initialState?.usedByUsers)" @click="deleteRole">
+			<N8nButton
+				variant="destructive"
+				:disabled="Boolean(initialState?.usedByUsers)"
+				@click="deleteRole"
+			>
 				{{ i18n.baseText('projectRoles.action.delete.button') }}
 			</N8nButton>
 		</div>
diff --git a/packages/frontend/editor-ui/src/features/project-roles/ProjectRolesView.vue b/packages/frontend/editor-ui/src/features/project-roles/ProjectRolesView.vue
index 6b1b1061dde..1ca9a12f4e2 100644
--- a/packages/frontend/editor-ui/src/features/project-roles/ProjectRolesView.vue
+++ b/packages/frontend/editor-ui/src/features/project-roles/ProjectRolesView.vue
@@ -220,7 +220,7 @@ function addRole() {
 				</N8nHeading>
 				<N8nTag :clickable="false" text="Beta" />
 			</div>
-			<N8nButton v-if="settingsStore.isCustomRolesFeatureEnabled" type="secondary" @click="addRole">
+			<N8nButton variant="subtle" v-if="settingsStore.isCustomRolesFeatureEnabled" @click="addRole">
 				{{ i18n.baseText('projectRoles.addRole') }}
 			</N8nButton>
 		</div>
diff --git a/packages/frontend/editor-ui/src/features/resolvers/ResolversView.vue b/packages/frontend/editor-ui/src/features/resolvers/ResolversView.vue
index d31d0168768..5f4e353f9d6 100644
--- a/packages/frontend/editor-ui/src/features/resolvers/ResolversView.vue
+++ b/packages/frontend/editor-ui/src/features/resolvers/ResolversView.vue
@@ -124,10 +124,15 @@ async function onAction(action: string, resolver: CredentialResolver) {
 					</div>
 				</template>
 				<template #additionalContent>
-					<N8nButton type="highlight" class="mr-2xs" element="a" :href="docsUrl" target="_blank">
+					<N8nButton
+						variant="ghost"
+						class="mr-2xs n8n-button--highlight"
+						:href="docsUrl"
+						target="_blank"
+					>
 						Learn more <N8nIcon icon="arrow-up-right" />
 					</N8nButton>
-					<N8nButton type="primary" @click="createResolver">
+					<N8nButton variant="solid" @click="createResolver">
 						{{ i18n.baseText('credentialResolver.addNew') }}
 					</N8nButton>
 				</template>
@@ -135,7 +140,7 @@ async function onAction(action: string, resolver: CredentialResolver) {
 		</div>
 		<div v-else>
 			<div :class="$style.actionBar">
-				<N8nButton class="ml-auto" type="primary" icon="plus" @click="createResolver">
+				<N8nButton variant="solid" class="ml-auto" icon="plus" @click="createResolver">
 					{{ i18n.baseText('credentialResolver.addNew') }}
 				</N8nButton>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/settings/communityNodes/components/CommunityPackageCard.vue b/packages/frontend/editor-ui/src/features/settings/communityNodes/components/CommunityPackageCard.vue
index 23a399c884a..ea30cd2dca5 100644
--- a/packages/frontend/editor-ui/src/features/settings/communityNodes/components/CommunityPackageCard.vue
+++ b/packages/frontend/editor-ui/src/features/settings/communityNodes/components/CommunityPackageCard.vue
@@ -153,7 +153,7 @@ watch(
 							{{ i18n.baseText('settings.communityNodes.updateAvailable.tooltip') }}
 						</div>
 					</template>
-					<N8nButton outline label="Update" @click="onUpdateClick" />
+					<N8nButton variant="outline" label="Update" @click="onUpdateClick" />
 				</N8nTooltip>
 				<N8nTooltip v-else placement="top">
 					<template #content>
diff --git a/packages/frontend/editor-ui/src/features/settings/communityNodes/components/CommunityPackageManageConfirmModal.vue b/packages/frontend/editor-ui/src/features/settings/communityNodes/components/CommunityPackageManageConfirmModal.vue
index 9aad8f76c5a..95e22f353a6 100644
--- a/packages/frontend/editor-ui/src/features/settings/communityNodes/components/CommunityPackageManageConfirmModal.vue
+++ b/packages/frontend/editor-ui/src/features/settings/communityNodes/components/CommunityPackageManageConfirmModal.vue
@@ -269,10 +269,10 @@ onMounted(async () => {
 		</template>
 		<template #footer>
 			<N8nButton
+				variant="subtle"
 				:label="i18n.baseText('settings.communityNodes.confirmModal.cancel')"
 				size="large"
 				float="left"
-				type="secondary"
 				data-test-id="close-button"
 				@click="onClick"
 			/>
diff --git a/packages/frontend/editor-ui/src/features/settings/communityNodes/components/nodeCreator/CommunityNodeUpdateInfo.vue b/packages/frontend/editor-ui/src/features/settings/communityNodes/components/nodeCreator/CommunityNodeUpdateInfo.vue
index 2f7d2a35a20..07c55cd19a9 100644
--- a/packages/frontend/editor-ui/src/features/settings/communityNodes/components/nodeCreator/CommunityNodeUpdateInfo.vue
+++ b/packages/frontend/editor-ui/src/features/settings/communityNodes/components/nodeCreator/CommunityNodeUpdateInfo.vue
@@ -22,7 +22,7 @@ const onUpdate = () => {
 	<N8nCallout theme="secondary" :iconless="true" style="margin-bottom: var(--spacing--sm)">
 		{{ i18n.baseText('communityNodeUpdateInfo.available') }}
 		<template v-if="props.packageName" #trailingContent>
-			<N8nButton type="secondary" @click="onUpdate">
+			<N8nButton variant="subtle" @click="onUpdate">
 				{{ i18n.baseText('generic.update') }}
 			</N8nButton>
 		</template>
diff --git a/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.vue b/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.vue
index bffebbe78e4..6d8677f6165 100644
--- a/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.vue
+++ b/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.vue
@@ -325,7 +325,7 @@ onMounted(async () => {
 		<template #footer>
 			<div :class="$style.footer">
 				<N8nButton
-					type="tertiary"
+					variant="subtle"
 					:label="i18n.baseText('variables.modal.button.cancel')"
 					data-test-id="variable-modal-cancel-button"
 					@click="closeModal"
diff --git a/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariablesForm.vue b/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariablesForm.vue
index 40077762def..167ff19f774 100644
--- a/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariablesForm.vue
+++ b/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariablesForm.vue
@@ -92,14 +92,14 @@ const handleSubmit = () => {
 		<td><VariablesUsageBadge v-if="formValidation.key" :name="form.key" /></td>
 		<td align="right">
 			<N8nButton
+				variant="subtle"
 				data-test-id="variable-row-cancel-button"
-				type="tertiary"
 				class="mr-xs"
 				@click="handleCancel"
 			>
 				{{ i18n.baseText('variables.row.button.cancel') }}
 			</N8nButton>
-			<N8nButton data-test-id="variable-row-save-button" type="primary" @click="handleSubmit">
+			<N8nButton variant="solid" data-test-id="variable-row-save-button" @click="handleSubmit">
 				{{ i18n.baseText('variables.row.button.save') }}
 			</N8nButton>
 		</td>
diff --git a/packages/frontend/editor-ui/src/features/settings/migrationReport/MigrationRuleDetail.vue b/packages/frontend/editor-ui/src/features/settings/migrationReport/MigrationRuleDetail.vue
index 2ae027bb48f..3f4ddb2fa26 100644
--- a/packages/frontend/editor-ui/src/features/settings/migrationReport/MigrationRuleDetail.vue
+++ b/packages/frontend/editor-ui/src/features/settings/migrationReport/MigrationRuleDetail.vue
@@ -189,9 +189,8 @@ const sortedWorkflows = computed(() => {
 <template>
 	<div>
 		<N8nButton
+			variant="ghost"
 			:class="$style.backButton"
-			type="secondary"
-			text
 			icon="arrow-left"
 			:label="i18n.baseText('generic.back')"
 			class="mb-xs"
diff --git a/packages/frontend/editor-ui/src/features/settings/migrationReport/MigrationRules.vue b/packages/frontend/editor-ui/src/features/settings/migrationReport/MigrationRules.vue
index 03131276754..b42a9b29e9e 100644
--- a/packages/frontend/editor-ui/src/features/settings/migrationReport/MigrationRules.vue
+++ b/packages/frontend/editor-ui/src/features/settings/migrationReport/MigrationRules.vue
@@ -144,10 +144,10 @@ const sortedInstanceResults = computed(() => {
 		<div :class="$style.ActionBar">
 			<N8nTabs v-model="currentTab" :options="tabs" variant="modern" />
 			<N8nButton
+				variant="subtle"
 				v-if="shouldShowRefreshButton"
 				:label="i18n.baseText('settings.migrationReport.refreshButton')"
 				icon="refresh-cw"
-				type="secondary"
 				:loading="isLoading"
 				:disabled="isLoading"
 				@click="refreshReport"
diff --git a/packages/frontend/editor-ui/src/features/settings/sso/components/SSOLogin.vue b/packages/frontend/editor-ui/src/features/settings/sso/components/SSOLogin.vue
index 821441a7287..1b4b18707fc 100644
--- a/packages/frontend/editor-ui/src/features/settings/sso/components/SSOLogin.vue
+++ b/packages/frontend/editor-ui/src/features/settings/sso/components/SSOLogin.vue
@@ -30,9 +30,8 @@ const onSSOLogin = async () => {
 			<span>{{ i18n.baseText('sso.login.divider') }}</span>
 		</div>
 		<N8nButton
+			variant="outline"
 			size="large"
-			type="primary"
-			outline
 			:label="i18n.baseText('sso.login.button')"
 			@click="onSSOLogin"
 		/>
diff --git a/packages/frontend/editor-ui/src/features/settings/sso/components/SamlSettingsForm.vue b/packages/frontend/editor-ui/src/features/settings/sso/components/SamlSettingsForm.vue
index 54f3c895a41..bdd3f4936db 100644
--- a/packages/frontend/editor-ui/src/features/settings/sso/components/SamlSettingsForm.vue
+++ b/packages/frontend/editor-ui/src/features/settings/sso/components/SamlSettingsForm.vue
@@ -347,9 +347,9 @@ onMounted(async () => {
 				{{ i18n.baseText('settings.sso.settings.save') }}
 			</N8nButton>
 			<N8nButton
+				variant="subtle"
 				:disabled="!isTestEnabled"
 				size="large"
-				type="tertiary"
 				data-test-id="sso-test"
 				@click="onTest"
 			>
diff --git a/packages/frontend/editor-ui/src/features/settings/sso/provisioning/components/ConfirmProvisioningDialog.vue b/packages/frontend/editor-ui/src/features/settings/sso/provisioning/components/ConfirmProvisioningDialog.vue
index 1ee7b8b7959..1d7daf58ca3 100644
--- a/packages/frontend/editor-ui/src/features/settings/sso/provisioning/components/ConfirmProvisioningDialog.vue
+++ b/packages/frontend/editor-ui/src/features/settings/sso/provisioning/components/ConfirmProvisioningDialog.vue
@@ -119,14 +119,14 @@ const onConfirmProvisioningSetting = () => {
 						locale.baseText('settings.provisioningConfirmDialog.button.downloadInstanceRolesCsv')
 					}}</N8nText>
 					<N8nButton
+						variant="ghost"
 						v-if="!hasDownloadedInstanceRoleCsv"
-						type="highlight"
 						native-type="button"
 						:icon="'file-download' as any"
 						data-test-id="provisioning-download-instance-roles-csv-button"
 						:disabled="downloadingInstanceRolesCsv"
 						:loading="downloadingInstanceRolesCsv"
-						:class="$style.button"
+						:class="[$style.button, 'n8n-button--highlight']"
 						@click="onDownloadInstanceRolesCsv"
 					></N8nButton>
 					<N8nIcon v-else icon="check" color="success" :class="$style.icon"></N8nIcon>
@@ -136,14 +136,14 @@ const onConfirmProvisioningSetting = () => {
 						locale.baseText('settings.provisioningConfirmDialog.button.downloadProjectRolesCsv')
 					}}</N8nText>
 					<N8nButton
+						variant="ghost"
 						v-if="!hasDownloadedProjectRoleCsv"
-						type="highlight"
 						native-type="button"
 						:icon="'file-download' as any"
 						data-test-id="provisioning-download-project-roles-csv-button"
 						:disabled="downloadingProjectRolesCsv"
 						:loading="downloadingProjectRolesCsv"
-						:class="$style.button"
+						:class="[$style.button, 'n8n-button--highlight']"
 						@click="onDownloadProjectRolesCsv"
 					></N8nButton>
 					<N8nIcon v-else icon="check" color="success" :class="$style.icon"></N8nIcon>
@@ -188,15 +188,15 @@ const onConfirmProvisioningSetting = () => {
 
 		<template #footer>
 			<N8nButton
-				type="tertiary"
-				native-type="button"
+				variant="ghost"
+				type="button"
 				data-test-id="provisioning-cancel-button"
 				@click="emit('cancel')"
 				>{{ locale.baseText('settings.provisioningConfirmDialog.button.cancel') }}</N8nButton
 			>
 			<N8nButton
-				type="primary"
-				native-type="button"
+				variant="solid"
+				type="button"
 				:disabled="
 					loading ||
 					!confirmationChecked ||
diff --git a/packages/frontend/editor-ui/src/features/settings/sso/views/SettingsLdapView.vue b/packages/frontend/editor-ui/src/features/settings/sso/views/SettingsLdapView.vue
index abf3f74e847..1236949c9ff 100644
--- a/packages/frontend/editor-ui/src/features/settings/sso/views/SettingsLdapView.vue
+++ b/packages/frontend/editor-ui/src/features/settings/sso/views/SettingsLdapView.vue
@@ -734,8 +734,8 @@ onMounted(async () => {
 			</div>
 			<div class="pb-3xl">
 				<N8nButton
+					variant="subtle"
 					:label="i18n.baseText('settings.ldap.dryRun')"
-					type="secondary"
 					size="large"
 					class="mr-s"
 					:disabled="hasAnyChanges || !readyToSubmit"
diff --git a/packages/frontend/editor-ui/src/features/settings/usage/components/CommunityPlusEnrollmentModal.vue b/packages/frontend/editor-ui/src/features/settings/usage/components/CommunityPlusEnrollmentModal.vue
index 84ecaf88901..e370013b782 100644
--- a/packages/frontend/editor-ui/src/features/settings/usage/components/CommunityPlusEnrollmentModal.vue
+++ b/packages/frontend/editor-ui/src/features/settings/usage/components/CommunityPlusEnrollmentModal.vue
@@ -150,15 +150,10 @@ const confirm = async () => {
 				</N8nText>
 			</div>
 			<div :class="$style.buttons">
-				<N8nButton
-					:class="$style.skip"
-					type="secondary"
-					text
-					:disabled="isLoading"
-					@click="closeModal"
-					>{{ i18n.baseText('communityPlusModal.button.skip') }}</N8nButton
-				>
-				<N8nButton :disabled="!valid || isLoading" type="primary" @click="confirm">
+				<N8nButton variant="ghost" :class="$style.skip" :disabled="isLoading" @click="closeModal">{{
+					i18n.baseText('communityPlusModal.button.skip')
+				}}</N8nButton>
+				<N8nButton :disabled="!valid || isLoading" variant="solid" @click="confirm">
 					{{ i18n.baseText('communityPlusModal.button.confirm') }}
 				</N8nButton>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/settings/usage/components/EulaAcceptanceModal.vue b/packages/frontend/editor-ui/src/features/settings/usage/components/EulaAcceptanceModal.vue
index e68cb849bc4..edf71d9c700 100644
--- a/packages/frontend/editor-ui/src/features/settings/usage/components/EulaAcceptanceModal.vue
+++ b/packages/frontend/editor-ui/src/features/settings/usage/components/EulaAcceptanceModal.vue
@@ -75,11 +75,11 @@ const onClose = () => {
 
 		<template #footer>
 			<div :class="$style.footerActions">
-				<N8nButton type="secondary" data-test-id="eula-cancel-button" @click="onCancel">
+				<N8nButton variant="subtle" data-test-id="eula-cancel-button" @click="onCancel">
 					{{ locale.baseText('settings.usageAndPlan.dialog.eula.button.cancel') }}
 				</N8nButton>
 				<N8nButton
-					type="primary"
+					variant="solid"
 					:disabled="isAcceptDisabled"
 					data-test-id="eula-accept-button"
 					@click="onAccept"
diff --git a/packages/frontend/editor-ui/src/features/settings/usage/views/SettingsUsageAndPlan.vue b/packages/frontend/editor-ui/src/features/settings/usage/views/SettingsUsageAndPlan.vue
index 420c9340130..ad5873cc2d4 100644
--- a/packages/frontend/editor-ui/src/features/settings/usage/views/SettingsUsageAndPlan.vue
+++ b/packages/frontend/editor-ui/src/features/settings/usage/views/SettingsUsageAndPlan.vue
@@ -254,8 +254,8 @@ const openCommunityRegisterModal = () => {
 				<I18nT keypath="settings.usageAndPlan.callOut" scope="global">
 					<template #link>
 						<N8nButton
+							variant="ghost"
 							class="pl-0 pr-0"
-							text
 							:label="locale.baseText('settings.usageAndPlan.callOut.link')"
 							@click="openCommunityRegisterModal"
 						/>
@@ -295,9 +295,9 @@ const openCommunityRegisterModal = () => {
 
 			<div :class="$style.buttons">
 				<N8nButton
+					variant="subtle"
 					v-if="canUserActivateLicense"
 					:class="$style.buttonTertiary"
-					type="tertiary"
 					size="large"
 					@click="onAddActivationKey"
 				>
@@ -332,7 +332,7 @@ const openCommunityRegisterModal = () => {
 					/>
 				</template>
 				<template #footer>
-					<N8nButton type="secondary" @click="onActivationCancel">
+					<N8nButton variant="subtle" @click="onActivationCancel">
 						{{ locale.baseText('settings.usageAndPlan.dialog.activation.cancel') }}
 					</N8nButton>
 					<N8nButton :disabled="!activationKey" @click="() => onLicenseActivation()">
diff --git a/packages/frontend/editor-ui/src/features/settings/users/components/InviteUsersModal.vue b/packages/frontend/editor-ui/src/features/settings/users/components/InviteUsersModal.vue
index cf456967628..22499a59dc6 100644
--- a/packages/frontend/editor-ui/src/features/settings/users/components/InviteUsersModal.vue
+++ b/packages/frontend/editor-ui/src/features/settings/users/components/InviteUsersModal.vue
@@ -379,8 +379,8 @@ onMounted(() => {
 								{{ i18n.baseText('settings.users.actions.generateInviteLink') }}
 							</template>
 							<N8nIconButton
+								variant="subtle"
 								icon="link"
-								type="tertiary"
 								data-test-id="generate-invite-link-button"
 								@click="onCopyInviteLink(user)"
 							></N8nIconButton>
@@ -390,8 +390,8 @@ onMounted(() => {
 								{{ i18n.baseText('settings.users.inviteLink.copy') }}
 							</template>
 							<N8nIconButton
+								variant="subtle"
 								icon="link"
-								type="tertiary"
 								data-test-id="copy-invite-link-button"
 								:data-invite-link="user.inviteAcceptUrl"
 								@click="onCopyInviteLink(user)"
diff --git a/packages/frontend/editor-ui/src/features/setupPanel/components/NodeSetupCard.test.ts b/packages/frontend/editor-ui/src/features/setupPanel/components/NodeSetupCard.test.ts
index 1b7f69accb3..f8ea6be4691 100644
--- a/packages/frontend/editor-ui/src/features/setupPanel/components/NodeSetupCard.test.ts
+++ b/packages/frontend/editor-ui/src/features/setupPanel/components/NodeSetupCard.test.ts
@@ -44,7 +44,7 @@ vi.mock('@/features/credentials/components/CredentialPicker/CredentialPicker.vue
 			'<button data-test-id="select-btn" @click="$emit(\'credentialSelected\', \'cred-456\')">Select</button>' +
 			'<button data-test-id="deselect-btn" @click="$emit(\'credentialDeselected\')">Deselect</button>' +
 			'</div>',
-		props: ['appName', 'credentialType', 'selectedCredentialId', 'createButtonType'],
+		props: ['appName', 'credentialType', 'selectedCredentialId', 'createButtonVariant'],
 		emits: ['credentialSelected', 'credentialDeselected'],
 	},
 }));
diff --git a/packages/frontend/editor-ui/src/features/shared/banners/components/banners/EmailConfirmationBanner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/EmailConfirmationBanner.vue
index 9294f14f162..14bff1707d4 100644
--- a/packages/frontend/editor-ui/src/features/shared/banners/components/banners/EmailConfirmationBanner.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/EmailConfirmationBanner.vue
@@ -43,7 +43,8 @@ async function onConfirmEmailClick() {
 		</template>
 		<template #trailingContent>
 			<N8nButton
-				type="success"
+				class="n8n-button--success"
+				variant="solid"
 				icon="mail"
 				size="small"
 				data-test-id="confirm-email-button"
diff --git a/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialBanner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialBanner.vue
index aece15ce112..5f48c2414ad 100644
--- a/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialBanner.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialBanner.vue
@@ -6,7 +6,7 @@ import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import type { CloudPlanAndUsageData } from '@/Interface';
 import { usePageRedirectionHelper } from '@/app/composables/usePageRedirectionHelper';
-import { N8nButton, N8nText, type IconName, type ButtonType } from '@n8n/design-system';
+import { N8nButton, N8nText, type IconName, type ButtonVariant } from '@n8n/design-system';
 
 const PROGRESS_BAR_MINIMUM_THRESHOLD = 8;
 
@@ -21,7 +21,7 @@ const bannerCta = computed(() => ({
 	text: cloudPlanStore.bannerCta.text,
 	icon: cloudPlanStore.bannerCta.icon as IconName | undefined,
 	size: cloudPlanStore.bannerCta.size as 'small' | 'medium',
-	style: cloudPlanStore.bannerCta.style as ButtonType,
+	style: cloudPlanStore.bannerCta.style as ButtonVariant,
 	href: cloudPlanStore.bannerCta.href,
 }));
 const bannerIcon = computed(() => cloudPlanStore.bannerIcon as IconName | undefined);
@@ -129,7 +129,7 @@ function onCtaClick() {
 		<template #trailingContent>
 			<div :class="$style.trailingContentWrapper">
 				<N8nButton
-					:type="bannerCta.style"
+					:variant="bannerCta.style"
 					:icon="bannerCta.icon"
 					:size="bannerCta.size"
 					@click="onCtaClick"
diff --git a/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialOverBanner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialOverBanner.vue
index 12635005cea..f18e6037bac 100644
--- a/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialOverBanner.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialOverBanner.vue
@@ -18,9 +18,14 @@ function onUpgradePlanClick() {
 			<span>{{ locale.baseText('banners.trialOver.message') }}</span>
 		</template>
 		<template #trailingContent>
-			<N8nButton type="success" icon="zap" size="small" @click="onUpgradePlanClick">{{
-				locale.baseText('generic.upgradeNow')
-			}}</N8nButton>
+			<N8nButton
+				class="n8n-button--success"
+				variant="solid"
+				icon="zap"
+				size="small"
+				@click="onUpgradePlanClick"
+				>{{ locale.baseText('generic.upgradeNow') }}</N8nButton
+			>
 		</template>
 	</BaseBanner>
 </template>
diff --git a/packages/frontend/editor-ui/src/features/shared/editors/components/InlineExpressionEditor/OutputItemSelect.vue b/packages/frontend/editor-ui/src/features/shared/editors/components/InlineExpressionEditor/OutputItemSelect.vue
index 5eb63203a00..3af98fa4891 100644
--- a/packages/frontend/editor-ui/src/features/shared/editors/components/InlineExpressionEditor/OutputItemSelect.vue
+++ b/packages/frontend/editor-ui/src/features/shared/editors/components/InlineExpressionEditor/OutputItemSelect.vue
@@ -56,11 +56,10 @@ function prevItem() {
 				@update:model-value="updateItemIndex"
 			></N8nInputNumber>
 			<N8nIconButton
+				variant="ghost"
 				data-test-id="inline-expression-editor-item-prev"
 				icon="chevron-left"
-				type="tertiary"
-				text
-				size="mini"
+				size="xsmall"
 				:disabled="!canSelectPrevItem"
 				@click="prevItem"
 			></N8nIconButton>
@@ -70,11 +69,10 @@ function prevItem() {
 					<div>{{ i18n.baseText('parameterInput.hoverTableItemTip') }}</div>
 				</template>
 				<N8nIconButton
+					variant="ghost"
 					data-test-id="inline-expression-editor-item-next"
 					icon="chevron-right"
-					type="tertiary"
-					text
-					size="mini"
+					size="xsmall"
 					:disabled="!canSelectNextItem"
 					@click="nextItem"
 				></N8nIconButton>
diff --git a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/CommunityNodeItem.vue b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/CommunityNodeItem.vue
index f552ab12064..16111226c7d 100644
--- a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/CommunityNodeItem.vue
+++ b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/CommunityNodeItem.vue
@@ -20,8 +20,8 @@ const i18n = useI18n();
 
 		<div v-else :class="$style.marginLeft">
 			<N8nButton
+				variant="subtle"
 				size="medium"
-				type="secondary"
 				icon="plus"
 				:label="i18n.baseText('communityNodeItem.label')"
 				outline
diff --git a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/NodeCreator.vue b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/NodeCreator.vue
index f72339dd398..b2d7c150292 100644
--- a/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/NodeCreator.vue
+++ b/packages/frontend/editor-ui/src/features/shared/nodeCreator/components/NodeCreator.vue
@@ -177,9 +177,9 @@ onClickOutside(
 			}"
 		/>
 		<N8nIconButton
+			variant="subtle"
 			v-if="active"
 			:class="$style.close"
-			type="secondary"
 			icon="x"
 			aria-label="Close Node Creator"
 			@click="emit('closeNodeCreator')"
diff --git a/packages/frontend/editor-ui/src/features/shared/nodeCreator/views/NodeCreation.vue b/packages/frontend/editor-ui/src/features/shared/nodeCreator/views/NodeCreation.vue
index ede15d68296..505050ee3af 100644
--- a/packages/frontend/editor-ui/src/features/shared/nodeCreator/views/NodeCreation.vue
+++ b/packages/frontend/editor-ui/src/features/shared/nodeCreator/views/NodeCreation.vue
@@ -141,9 +141,9 @@ function openCommandBar(event: MouseEvent) {
 			placement="left"
 		>
 			<N8nIconButton
+				variant="subtle"
 				size="large"
 				icon="plus"
-				type="tertiary"
 				data-test-id="node-creator-plus-button"
 				@click="openNodeCreator"
 			/>
@@ -154,9 +154,9 @@ function openCommandBar(event: MouseEvent) {
 			placement="left"
 		>
 			<N8nIconButton
+				variant="subtle"
 				size="large"
 				icon="search"
-				type="tertiary"
 				data-test-id="command-bar-button"
 				@click="openCommandBar"
 			/>
@@ -167,8 +167,8 @@ function openCommandBar(event: MouseEvent) {
 			placement="left"
 		>
 			<N8nIconButton
+				variant="subtle"
 				size="large"
-				type="tertiary"
 				icon="sticky-note"
 				data-test-id="add-sticky-button"
 				@click="addStickyNote"
@@ -180,7 +180,7 @@ function openCommandBar(event: MouseEvent) {
 			placement="left"
 		>
 			<N8nIconButton
-				type="tertiary"
+				variant="subtle"
 				size="large"
 				icon="panel-right"
 				:class="focusPanelActive ? $style.activeButton : ''"
@@ -192,9 +192,9 @@ function openCommandBar(event: MouseEvent) {
 		<N8nTooltip v-if="chatPanelStore.canShowAiButtonOnCanvas" placement="left">
 			<template #content> {{ i18n.baseText('aiAssistant.tooltip') }}</template>
 			<N8nButton
-				type="tertiary"
+				variant="subtle"
+				iconOnly
 				size="large"
-				square
 				:class="$style.icon"
 				data-test-id="ask-assistant-canvas-action-button"
 				@click="onAskAssistantButtonClick"
diff --git a/packages/frontend/editor-ui/src/features/shared/tags/components/TagsManager/TagsView/TagsTable.vue b/packages/frontend/editor-ui/src/features/shared/tags/components/TagsManager/TagsView/TagsTable.vue
index e1f35693daf..766abc62a7a 100644
--- a/packages/frontend/editor-ui/src/features/shared/tags/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/frontend/editor-ui/src/features/shared/tags/components/TagsManager/TagsView/TagsTable.vue
@@ -182,8 +182,8 @@ onMounted(() => {
 				<Transition name="fade" mode="out-in">
 					<div v-if="scope.row.create" :class="$style.ops">
 						<N8nButton
+							variant="subtle"
 							:label="i18n.baseText('tagsTable.cancel')"
-							type="secondary"
 							:disabled="isSaving"
 							@click.stop="cancel"
 						/>
@@ -195,8 +195,8 @@ onMounted(() => {
 					</div>
 					<div v-else-if="scope.row.update" :class="$style.ops">
 						<N8nButton
+							variant="subtle"
 							:label="i18n.baseText('tagsTable.cancel')"
-							type="secondary"
 							:disabled="isSaving"
 							@click.stop="cancel"
 						/>
@@ -208,8 +208,8 @@ onMounted(() => {
 					</div>
 					<div v-else-if="scope.row.delete" :class="$style.ops">
 						<N8nButton
+							variant="subtle"
 							:label="i18n.baseText('tagsTable.cancel')"
-							type="secondary"
 							:disabled="isSaving"
 							@click.stop="cancel"
 						/>
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasChatButton.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasChatButton.vue
index 7ddd4189c93..1f813a49497 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasChatButton.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasChatButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { N8nButton, type ButtonProps } from '@n8n/design-system';
 
-export type Props = Pick<ButtonProps, 'label' | 'type'>;
+export type Props = Pick<ButtonProps, 'label' | 'variant'>;
 
 defineProps<Props>();
 </script>
@@ -10,7 +10,7 @@ defineProps<Props>();
 		:label="label"
 		size="large"
 		icon="message-circle"
-		:type="type"
+		:variant="variant"
 		data-test-id="workflow-chat-button"
 	/>
 </template>
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasControlButtons.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasControlButtons.vue
index 1c39ab3e7c9..2cfc0f3e30a 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasControlButtons.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasControlButtons.vue
@@ -63,7 +63,7 @@ function onTidyUp() {
 			:shortcut="{ keys: ['1'] }"
 		>
 			<N8nIconButton
-				type="tertiary"
+				variant="subtle"
 				size="large"
 				icon="maximize"
 				data-test-id="zoom-to-fit"
@@ -72,7 +72,7 @@ function onTidyUp() {
 		</KeyboardShortcutTooltip>
 		<KeyboardShortcutTooltip :label="i18n.baseText('nodeView.zoomIn')" :shortcut="{ keys: ['+'] }">
 			<N8nIconButton
-				type="tertiary"
+				variant="subtle"
 				size="large"
 				icon="zoom-in"
 				data-test-id="zoom-in-button"
@@ -81,7 +81,7 @@ function onTidyUp() {
 		</KeyboardShortcutTooltip>
 		<KeyboardShortcutTooltip :label="i18n.baseText('nodeView.zoomOut')" :shortcut="{ keys: ['-'] }">
 			<N8nIconButton
-				type="tertiary"
+				variant="subtle"
 				size="large"
 				icon="zoom-out"
 				data-test-id="zoom-out-button"
@@ -96,8 +96,8 @@ function onTidyUp() {
 			:shortcut="{ keys: ['Z'] }"
 		>
 			<N8nIconButton
-				square
-				type="tertiary"
+				variant="subtle"
+				iconOnly
 				size="large"
 				:class="$style.iconButton"
 				:icon="isExperimentalNdvActive ? 'undo-2' : 'crosshair'"
@@ -110,7 +110,7 @@ function onTidyUp() {
 			:shortcut="{ keys: ['0'] }"
 		>
 			<N8nIconButton
-				type="tertiary"
+				variant="subtle"
 				size="large"
 				icon="undo-2"
 				data-test-id="reset-zoom-button"
@@ -123,8 +123,8 @@ function onTidyUp() {
 			:shortcut="{ shiftKey: true, altKey: true, keys: ['T'] }"
 		>
 			<N8nButton
-				square
-				type="tertiary"
+				variant="subtle"
+				iconOnly
 				size="large"
 				data-test-id="tidy-up-button"
 				:class="$style.iconButton"
@@ -139,7 +139,7 @@ function onTidyUp() {
 			:content="i18n.baseText('nodeView.expandAllNodes')"
 		>
 			<N8nIconButton
-				type="tertiary"
+				variant="subtle"
 				size="large"
 				icon="maximize-2"
 				@click="experimentalNdvStore.expandAllNodes"
@@ -151,7 +151,7 @@ function onTidyUp() {
 			:content="i18n.baseText('nodeView.collapseAllNodes')"
 		>
 			<N8nIconButton
-				type="tertiary"
+				variant="subtle"
 				size="large"
 				icon="minimize-2"
 				@click="experimentalNdvStore.collapseAllNodes"
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasRunWorkflowButton.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasRunWorkflowButton.vue
index 774707ef97c..0147104c3af 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasRunWorkflowButton.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasRunWorkflowButton.vue
@@ -87,12 +87,12 @@ function getNodeTypeByName(name: string): INodeTypeDescription | null {
 			:disabled="executing || hideTooltip"
 		>
 			<N8nButton
+				variant="solid"
 				:class="$style.button"
 				:loading="executing"
 				:disabled="disabled"
 				:size="size ?? 'large'"
 				icon="flask-conical"
-				type="primary"
 				data-test-id="execute-workflow-button"
 				@mouseenter="$emit('mouseenter', $event)"
 				@mouseleave="$emit('mouseleave', $event)"
@@ -124,7 +124,7 @@ function getNodeTypeByName(name: string): INodeTypeDescription | null {
 			>
 				<template #activator>
 					<N8nButton
-						type="primary"
+						variant="solid"
 						icon-size="large"
 						:disabled="disabled"
 						:class="$style.chevron"
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasStopCurrentExecutionButton.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasStopCurrentExecutionButton.vue
index d43e580293a..ae9a126e2a3 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasStopCurrentExecutionButton.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasStopCurrentExecutionButton.vue
@@ -18,10 +18,10 @@ const title = computed(() =>
 
 <template>
 	<N8nIconButton
+		variant="subtle"
 		icon="square"
 		size="large"
 		class="stop-execution"
-		type="secondary"
 		:title="title"
 		:loading="stopping"
 		data-test-id="stop-execution-button"
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasStopWaitingForWebhookButton.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasStopWaitingForWebhookButton.vue
index a227c80a09e..297a37cb337 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasStopWaitingForWebhookButton.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasStopWaitingForWebhookButton.vue
@@ -6,11 +6,11 @@ const i18n = useI18n();
 </script>
 <template>
 	<N8nIconButton
+		variant="subtle"
 		class="stop-execution"
 		icon="square"
 		size="large"
 		:title="i18n.baseText('nodeView.stopWaitingForWebhookCall')"
-		type="secondary"
 		data-test-id="stop-execution-waiting-for-webhook-button"
 	/>
 </template>
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasChatButton.test.ts.snap b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasChatButton.test.ts.snap
index 0a7f81888c2..c04932b5d03 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasChatButton.test.ts.snap
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasChatButton.test.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CanvasChatButton > should render correctly 1`] = `"<n8n-button-stub icon="message-circle" block="false" element="button" label="" square="false" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="primary" data-test-id="workflow-chat-button"></n8n-button-stub>"`;
+exports[`CanvasChatButton > should render correctly 1`] = `"<n8n-button-stub icon="message-circle" variant="solid" size="large" loading="false" icononly="false" disabled="false" class="" data-test-id="workflow-chat-button"></n8n-button-stub>"`;
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasClearExecutionDataButton.test.ts.snap b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasClearExecutionDataButton.test.ts.snap
index dfa56a9794e..23384c4a121 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasClearExecutionDataButton.test.ts.snap
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasClearExecutionDataButton.test.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CanvasClearExecutionDataButton > should render correctly 1`] = `"<n8n-icon-button-stub icon="trash-2" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="primary" title="Deletes the current execution data" data-test-id="clear-execution-data-button"></n8n-icon-button-stub>"`;
+exports[`CanvasClearExecutionDataButton > should render correctly 1`] = `"<n8n-icon-button-stub icon="trash-2" size="large" loading="false" icononly="true" disabled="false" class="" title="Deletes the current execution data" data-test-id="clear-execution-data-button"></n8n-icon-button-stub>"`;
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasControlButtons.test.ts.snap b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasControlButtons.test.ts.snap
index 4c4bd84116c..908356370ec 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasControlButtons.test.ts.snap
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasControlButtons.test.ts.snap
@@ -7,12 +7,12 @@ exports[`CanvasControlButtons > should render correctly 1`] = `
       <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047z"></path>
     </svg>
     <!---->
-  </button><span class="" data-state="closed" data-grace-area-trigger=""><n8n-icon-button-stub icon="maximize" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="tertiary" data-test-id="zoom-to-fit"></n8n-icon-button-stub></span>
-  <!--v-if--><span class="" data-state="closed" data-grace-area-trigger=""><n8n-icon-button-stub icon="zoom-in" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="tertiary" data-test-id="zoom-in-button"></n8n-icon-button-stub></span>
-  <!--v-if--><span class="" data-state="closed" data-grace-area-trigger=""><n8n-icon-button-stub icon="zoom-out" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="tertiary" data-test-id="zoom-out-button"></n8n-icon-button-stub></span>
+  </button><span class="" data-state="closed" data-grace-area-trigger=""><n8n-icon-button-stub variant="subtle" icon="maximize" size="large" loading="false" icononly="true" disabled="false" class="" data-test-id="zoom-to-fit"></n8n-icon-button-stub></span>
+  <!--v-if--><span class="" data-state="closed" data-grace-area-trigger=""><n8n-icon-button-stub variant="subtle" icon="zoom-in" size="large" loading="false" icononly="true" disabled="false" class="" data-test-id="zoom-in-button"></n8n-icon-button-stub></span>
+  <!--v-if--><span class="" data-state="closed" data-grace-area-trigger=""><n8n-icon-button-stub variant="subtle" icon="zoom-out" size="large" loading="false" icononly="true" disabled="false" class="" data-test-id="zoom-out-button"></n8n-icon-button-stub></span>
   <!--v-if-->
   <!--v-if-->
-  <!--v-if--><span class="" data-state="closed" data-grace-area-trigger=""><n8n-button-stub block="false" element="button" label="" square="true" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="tertiary" data-test-id="tidy-up-button" class="iconButton"></n8n-button-stub></span>
+  <!--v-if--><span class="" data-state="closed" data-grace-area-trigger=""><n8n-button-stub variant="subtle" size="large" loading="false" icononly="true" disabled="false" class="iconButton" data-test-id="tidy-up-button"></n8n-button-stub></span>
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasRunWorkflowButton.test.ts.snap b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasRunWorkflowButton.test.ts.snap
index d782a3f0d0a..0ce40b536ec 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasRunWorkflowButton.test.ts.snap
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasRunWorkflowButton.test.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CanvasRunWorkflowButton > should render correctly 1`] = `
-"<div class="component"><span class="" data-state="closed" data-grace-area-trigger=""><n8n-button-stub class="button" loading="false" disabled="false" size="large" icon="flask-conical" type="primary" data-test-id="execute-workflow-button"><span class="buttonContent">Execute workflow <!--v-if--></span></n8n-button-stub></span>
+"<div class="component"><span class="" data-state="closed" data-grace-area-trigger=""><n8n-button-stub variant="solid" class="button" loading="false" disabled="false" size="large" icon="flask-conical" data-test-id="execute-workflow-button"><span class="buttonContent">Execute workflow <!--v-if--></span></n8n-button-stub></span>
   <!--v-if-->
   <!--v-if-->
 </div>"
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasStopCurrentExecutionButton.test.ts.snap b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasStopCurrentExecutionButton.test.ts.snap
index 55f7243dd90..c15e01aa711 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasStopCurrentExecutionButton.test.ts.snap
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasStopCurrentExecutionButton.test.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CanvasStopCurrentExecutionButton > should render correctly 1`] = `"<n8n-icon-button-stub icon="square" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="secondary" class="stop-execution" title="Stop current execution" data-test-id="stop-execution-button"></n8n-icon-button-stub>"`;
+exports[`CanvasStopCurrentExecutionButton > should render correctly 1`] = `"<n8n-icon-button-stub variant="subtle" icon="square" size="large" loading="false" icononly="true" disabled="false" class="stop-execution" title="Stop current execution" data-test-id="stop-execution-button"></n8n-icon-button-stub>"`;
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasStopWaitingForWebhookButton.test.ts.snap b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasStopWaitingForWebhookButton.test.ts.snap
index db6c888567b..7db33c5b050 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasStopWaitingForWebhookButton.test.ts.snap
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasStopWaitingForWebhookButton.test.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CanvasStopCurrentExecutionButton > should render correctly 1`] = `"<n8n-icon-button-stub icon="square" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="secondary" class="stop-execution" title="Stop waiting for webhook call" data-test-id="stop-execution-waiting-for-webhook-button"></n8n-icon-button-stub>"`;
+exports[`CanvasStopCurrentExecutionButton > should render correctly 1`] = `"<n8n-icon-button-stub variant="subtle" icon="square" size="large" loading="false" icononly="true" disabled="false" class="stop-execution" title="Stop waiting for webhook call" data-test-id="stop-execution-waiting-for-webhook-button"></n8n-icon-button-stub>"`;
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/edges/CanvasEdgeToolbar.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/edges/CanvasEdgeToolbar.vue
index 8a3d64c6600..a4e3006d73f 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/edges/CanvasEdgeToolbar.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/edges/CanvasEdgeToolbar.vue
@@ -58,9 +58,9 @@ function onDelete() {
 			"
 		>
 			<N8nIconButton
+				variant="subtle"
 				class="canvas-edge-toolbar-button"
 				data-test-id="add-connection-button"
-				type="tertiary"
 				size="small"
 				icon-size="medium"
 				icon="plus"
@@ -69,9 +69,9 @@ function onDelete() {
 		</CanvasEdgeTooltip>
 		<CanvasEdgeTooltip :content="i18n.baseText('node.delete')">
 			<N8nIconButton
+				variant="subtle"
 				data-test-id="delete-connection-button"
 				class="canvas-edge-toolbar-button"
-				type="tertiary"
 				size="small"
 				icon-size="medium"
 				icon="trash-2"
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/CanvasNodeToolbar.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/CanvasNodeToolbar.vue
index c861dd1bf66..85f377186d7 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/CanvasNodeToolbar.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/CanvasNodeToolbar.vue
@@ -140,9 +140,8 @@ function onAddToAi() {
 				:content="i18n.baseText('ndv.execute.deactivated')"
 			>
 				<N8nIconButton
+					variant="ghost"
 					data-test-id="execute-node-button"
-					type="tertiary"
-					text
 					size="small"
 					icon="node-play"
 					:disabled="isExecuting || isDisabled"
@@ -151,30 +150,27 @@ function onAddToAi() {
 				/>
 			</N8nTooltip>
 			<N8nIconButton
+				variant="ghost"
 				v-if="isDisableNodeVisible"
 				data-test-id="disable-node-button"
-				type="tertiary"
-				text
 				size="small"
 				icon="node-power"
 				:title="nodeDisabledTitle"
 				@click.stop="onToggleNode"
 			/>
 			<N8nIconButton
+				variant="ghost"
 				v-if="isDeleteNodeVisible"
 				data-test-id="delete-node-button"
-				type="tertiary"
 				size="small"
-				text
 				icon="node-trash"
 				:title="i18n.baseText('node.delete')"
 				@click.stop="onDeleteNode"
 			/>
 			<N8nIconButton
+				variant="ghost"
 				v-if="isFocusNodeVisible"
-				type="tertiary"
 				size="small"
-				text
 				icon="crosshair"
 				@click.stop="onFocusNode"
 			/>
@@ -194,10 +190,9 @@ function onAddToAi() {
 				/>
 			</N8nTooltip>
 			<N8nIconButton
+				variant="ghost"
 				data-test-id="overflow-node-button"
-				type="tertiary"
 				size="small"
-				text
 				icon="node-ellipsis"
 				@click.stop="onOpenContextMenu"
 			/>
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/parts/CanvasNodeTrigger.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/parts/CanvasNodeTrigger.vue
index e62f9bacd75..ca9ea3d0985 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/parts/CanvasNodeTrigger.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/parts/CanvasNodeTrigger.vue
@@ -65,8 +65,8 @@ async function handleClickExecute() {
 			<template v-if="!readOnly">
 				<template v-if="type === CHAT_TRIGGER_NODE_TYPE">
 					<N8nButton
+						variant="subtle"
 						v-if="isChatOpen"
-						type="secondary"
 						icon="message-circle"
 						size="large"
 						:disabled="isExecuting"
@@ -80,7 +80,7 @@ async function handleClickExecute() {
 						:shortcut="{ keys: ['c'] }"
 					>
 						<N8nButton
-							type="primary"
+							variant="solid"
 							icon="message-circle"
 							size="large"
 							:disabled="isExecuting"
@@ -91,8 +91,8 @@ async function handleClickExecute() {
 					</KeyboardShortcutTooltip>
 				</template>
 				<N8nButton
+					variant="solid"
 					v-else
-					type="primary"
 					icon="flask-conical"
 					size="large"
 					:disabled="isExecuting"
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalEmbeddedNdvActions.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalEmbeddedNdvActions.vue
index bf9c1c63f25..0543930d38f 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalEmbeddedNdvActions.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalEmbeddedNdvActions.vue
@@ -9,19 +9,17 @@ const emit = defineEmits<{ openNdv: []; toggleExpand: [] }>();
 <template>
 	<div :class="$style.actions">
 		<N8nIconButton
+			variant="ghost"
 			icon="expand"
-			type="secondary"
-			text
-			size="mini"
+			size="xsmall"
 			icon-size="small"
 			aria-label="Open..."
 			@click.stop="emit('openNdv')"
 		/>
 		<N8nIconButton
+			variant="ghost"
 			:icon="isExpanded ? 'chevron-down' : 'chevron-up'"
-			type="secondary"
-			text
-			size="mini"
+			size="xsmall"
 			icon-size="medium"
 			aria-label="Toggle expand"
 			@click.stop="emit('toggleExpand')"
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalFocusPanelHeader.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalFocusPanelHeader.vue
index 3c23b2243c2..c220528fb2a 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalFocusPanelHeader.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalFocusPanelHeader.vue
@@ -49,21 +49,13 @@ const nodeType = computed(() => nodeTypesStore.getNodeType(node.type, node.typeV
 			/>
 		</div>
 		<N8nIconButton
+			variant="ghost"
 			v-if="parameter"
 			icon="x"
 			size="small"
-			type="tertiary"
-			text
 			@click="emit('clearParameter')"
 		/>
-		<N8nIconButton
-			v-else
-			icon="expand"
-			size="small"
-			type="tertiary"
-			text
-			@click="emit('openNdv')"
-		/>
+		<N8nIconButton variant="ghost" v-else icon="expand" size="small" @click="emit('openNdv')" />
 		<NodeExecuteButton
 			v-if="isExecutable"
 			data-test-id="node-execute-button"
diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalNodeDetailsDrawer.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalNodeDetailsDrawer.vue
index 4f0d882bf66..e39c6e6ae0c 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalNodeDetailsDrawer.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalNodeDetailsDrawer.vue
@@ -52,7 +52,7 @@ provide(ExpressionLocalResolveContextSymbol, expressionResolveCtx);
 			<ul :class="$style.multipleNodesActions">
 				<li v-for="action of contextMenuItems" :key="action.id" :class="$style.multipleNodesAction">
 					<N8nButton
-						type="secondary"
+						variant="subtle"
 						:disabled="action.disabled"
 						@click="emit('contextMenuAction', action.id, nodeIds)"
 					>
diff --git a/packages/frontend/editor-ui/src/features/workflows/readyToRun/components/ReadyToRunButton.vue b/packages/frontend/editor-ui/src/features/workflows/readyToRun/components/ReadyToRunButton.vue
index 87478cb58eb..a960e1a7b02 100644
--- a/packages/frontend/editor-ui/src/features/workflows/readyToRun/components/ReadyToRunButton.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/readyToRun/components/ReadyToRunButton.vue
@@ -57,9 +57,9 @@ const handleClick = async () => {
 
 <template>
 	<N8nButton
+		variant="subtle"
 		v-if="showButton"
 		data-test-id="ready-to-run-button"
-		type="secondary"
 		icon="zap"
 		:loading="readyToRunStore.claimingCredits"
 		:disabled="sourceControlStore.preferences.branchReadOnly || readyToRunStore.claimingCredits"
diff --git a/packages/frontend/editor-ui/src/features/workflows/templates/components/SetupWorkflowCredentialsButton.vue b/packages/frontend/editor-ui/src/features/workflows/templates/components/SetupWorkflowCredentialsButton.vue
index 695d2f9dc45..82bded2ce02 100644
--- a/packages/frontend/editor-ui/src/features/workflows/templates/components/SetupWorkflowCredentialsButton.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/templates/components/SetupWorkflowCredentialsButton.vue
@@ -134,13 +134,13 @@ onMounted(async () => {
 
 <template>
 	<N8nButton
+		variant="subtle"
 		v-if="showButton"
 		:label="i18n.baseText('nodeView.setupTemplate')"
 		:disabled="isButtonDisabled"
 		data-test-id="setup-credentials-button"
 		size="large"
 		icon="package-open"
-		type="secondary"
 		@click="handleTemplateSetup()"
 	/>
 </template>
diff --git a/packages/frontend/editor-ui/src/features/workflows/templates/components/TemplateCard.vue b/packages/frontend/editor-ui/src/features/workflows/templates/components/TemplateCard.vue
index 09679bc7870..a4733b1d83b 100644
--- a/packages/frontend/editor-ui/src/features/workflows/templates/components/TemplateCard.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/templates/components/TemplateCard.vue
@@ -88,8 +88,8 @@ function onCardClick(e: MouseEvent) {
 		</div>
 		<div v-if="useWorkflowButton" :class="$style.buttonContainer">
 			<N8nButton
+				variant="outline"
 				v-if="useWorkflowButton"
-				outline
 				label="Use workflow"
 				data-test-id="use-workflow-button"
 				@click.stop="onUseWorkflowClick"
diff --git a/packages/frontend/editor-ui/src/features/workflows/templates/views/TemplatesSearchView.vue b/packages/frontend/editor-ui/src/features/workflows/templates/views/TemplatesSearchView.vue
index a0eb33858e0..05e10ae0d4a 100644
--- a/packages/frontend/editor-ui/src/features/workflows/templates/views/TemplatesSearchView.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/templates/views/TemplatesSearchView.vue
@@ -345,9 +345,8 @@ watch(workflows, (newWorkflows) => {
 				</div>
 				<div :class="$style.button">
 					<N8nButton
+						variant="subtle"
 						size="large"
-						type="secondary"
-						element="a"
 						:href="CREATOR_HUB_URL"
 						:label="i18n.baseText('templates.shareWorkflow')"
 						target="_blank"
diff --git a/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffAside.vue b/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffAside.vue
index 871c618926e..4607016b908 100644
--- a/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffAside.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffAside.vue
@@ -45,9 +45,8 @@ const emit = defineEmits<{
 				{{ node.name }}
 			</N8nHeading>
 			<N8nIconButton
+				variant="ghost"
 				icon="x"
-				type="secondary"
-				text
 				class="ml-auto"
 				@click="emit('close')"
 			></N8nIconButton>
diff --git a/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffModal.vue b/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffModal.vue
index 3174cbe1044..c9d2aa628bd 100644
--- a/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffModal.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffModal.vue
@@ -277,8 +277,8 @@ function setSelectedDetailId(
 			<div :class="$style.header">
 				<div :class="$style.headerLeft">
 					<N8nIconButton
+						variant="subtle"
 						icon="arrow-left"
-						type="secondary"
 						:class="[$style.backButton, 'mr-xs']"
 						icon-size="large"
 						@click="handleBeforeClose"
@@ -307,7 +307,7 @@ function setSelectedDetailId(
 						:popper-class="$style.popper"
 						@visible-change="setActiveTab"
 					>
-						<N8nButton type="secondary" style="--button--radius: 4px 0 0 4px">
+						<N8nButton variant="subtle" style="--button--radius: 4px 0 0 4px">
 							<div v-if="changesCount" :class="$style.circleBadge">
 								{{ changesCount }}
 							</div>
@@ -435,15 +435,15 @@ function setSelectedDetailId(
 						</template>
 					</ElDropdown>
 					<N8nIconButton
+						variant="subtle"
 						icon="chevron-left"
-						type="secondary"
 						:class="$style.navigationButton"
 						style="--button--radius: 0; margin: 0 -1px"
 						@click="previousNodeChange"
 					/>
 					<N8nIconButton
+						variant="subtle"
 						icon="chevron-right"
-						type="secondary"
 						:class="$style.navigationButton"
 						style="--button--radius: 0 4px 4px 0"
 						@click="nextNodeChange"
diff --git a/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffView.vue b/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffView.vue
index 745d510f064..cb1e731a229 100644
--- a/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffView.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffView.vue
@@ -119,7 +119,7 @@ onMounted(async () => {
 					:popper-class="$style.popper"
 					@visible-change="setActiveTab"
 				>
-					<N8nButton type="secondary" style="--button--radius: 4px 0 0 4px">
+					<N8nButton variant="subtle" style="--button--radius: 4px 0 0 4px">
 						<div v-if="changesCount" :class="$style.circleBadge">
 							{{ changesCount }}
 						</div>
@@ -240,15 +240,15 @@ onMounted(async () => {
 					</template>
 				</ElDropdown>
 				<N8nIconButton
+					variant="subtle"
 					icon="chevron-left"
-					type="secondary"
 					:class="$style.navigationButton"
 					style="--button--radius: 0; margin: 0 -1px"
 					@click="previousNodeChange"
 				/>
 				<N8nIconButton
+					variant="subtle"
 					icon="chevron-right"
-					type="secondary"
 					:class="$style.navigationButton"
 					style="--button--radius: 0 4px 4px 0"
 					@click="nextNodeChange"
diff --git a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryButton.vue b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryButton.vue
index 5eda123881b..f04abc7b6d5 100644
--- a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryButton.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryButton.vue
@@ -61,10 +61,11 @@ const isDisabled = computed(
 			:to="isDisabled ? undefined : workflowHistoryRoute"
 		>
 			<N8nIconButton
+				class="n8n-button--highlight"
+				variant="ghost"
 				:disabled="isDisabled"
 				:loading="isWorkflowSaving"
 				data-test-id="workflow-history-button"
-				type="highlight"
 				icon="history"
 				size="medium"
 			/>
diff --git a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryContent.vue b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryContent.vue
index 9904bbdd655..9a914a96c98 100644
--- a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryContent.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryContent.vue
@@ -154,7 +154,7 @@ watch(
 					data-test-id="workflow-history-content-actions"
 					@action="onAction"
 				>
-					<N8nButton type="tertiary" size="large" data-test-id="action-toggle-button">
+					<N8nButton variant="subtle" size="large" data-test-id="action-toggle-button">
 						{{ i18n.baseText('workflowHistory.content.actions') }}
 						<N8nIcon class="ml-3xs" icon="chevron-down" size="small" />
 					</N8nButton>
diff --git a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryVersionRestoreModal.vue b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryVersionRestoreModal.vue
index 705155aab6f..99e405fe7ec 100644
--- a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryVersionRestoreModal.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryVersionRestoreModal.vue
@@ -2,7 +2,7 @@
 import { useI18n } from '@n8n/i18n';
 import Modal from '@/app/components/Modal.vue';
 import { useUIStore } from '@/app/stores/ui.store';
-import type { ButtonType } from '@n8n/design-system';
+import type { ButtonVariant } from '@n8n/design-system';
 import { I18nT } from 'vue-i18n';
 
 import { N8nButton, N8nHeading, N8nText } from '@n8n/design-system';
@@ -14,7 +14,7 @@ const props = defineProps<{
 		beforeClose: () => void;
 		buttons: Array<{
 			text: string;
-			type: ButtonType;
+			variant: ButtonVariant;
 			action: () => void;
 		}>;
 	};
@@ -61,7 +61,7 @@ const closeModal = () => {
 					v-for="(button, index) in props.data.buttons"
 					:key="index"
 					size="medium"
-					:type="button.type"
+					:variant="button.variant"
 					@click="
 						() => {
 							button.action();
diff --git a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryVersionUnpublishModal.vue b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryVersionUnpublishModal.vue
index d9e4d27ac20..8cabd24e9ca 100644
--- a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryVersionUnpublishModal.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryVersionUnpublishModal.vue
@@ -69,10 +69,10 @@ onBeforeUnmount(() => {
 		</template>
 		<template #footer>
 			<div :class="$style.footer">
-				<N8nButton size="medium" type="tertiary" :disabled="unpublishing" @click="onCancel">
+				<N8nButton variant="subtle" size="medium" :disabled="unpublishing" @click="onCancel">
 					{{ i18n.baseText('generic.cancel') }}
 				</N8nButton>
-				<N8nButton size="medium" type="primary" :loading="unpublishing" @click="onUnpublish">
+				<N8nButton variant="solid" size="medium" :loading="unpublishing" @click="onUnpublish">
 					{{ i18n.baseText('workflowHistory.action.unpublish.modal.button.unpublish') }}
 				</N8nButton>
 			</div>
diff --git a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowVersionFormModal.vue b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowVersionFormModal.vue
index c149e066bc6..3eae7b0c6b1 100644
--- a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowVersionFormModal.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowVersionFormModal.vue
@@ -108,8 +108,8 @@ const handleSubmit = () => {
 				/>
 				<div :class="$style.actions">
 					<N8nButton
+						variant="subtle"
 						:disabled="submitting"
-						type="secondary"
 						:label="i18n.baseText('generic.cancel')"
 						:data-test-id="`${modalName}-cancel-button`"
 						@click="onCancel"
diff --git a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/views/WorkflowHistory.vue b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/views/WorkflowHistory.vue
index 8abae4fa0c9..cc52cbb587e 100644
--- a/packages/frontend/editor-ui/src/features/workflows/workflowHistory/views/WorkflowHistory.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/workflowHistory/views/WorkflowHistory.vue
@@ -503,7 +503,7 @@ watchEffect(async () => {
 				{{ i18n.baseText('workflowHistory.title') }}
 			</N8nHeading>
 			<RouterLink :to="editorRoute" data-test-id="workflow-history-close-button">
-				<N8nButton type="tertiary" icon="x" size="small" text square />
+				<N8nButton variant="ghost" icon="x" size="small" square />
 			</RouterLink>
 		</div>
 		<div :class="$style.listComponentWrapper">