diff --git a/.lintstagedrc.json b/.lintstagedrc.json
index 0cb0cd43c..b8eb32ef6 100644
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@@ -1,5 +1,6 @@
 {
   "*.{ts,js}": ["pnpm lint:fix", "prettier --write"],
-  "*.{css,postcss,svelte}": "stylelint --fix",
+  "*.{css,postcss}": ["stylelint --fix"],
+  "*.svelte": ["stylelint --fix", "pnpm lint:fix"],
   "*.{json,md}": "prettier --write"
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 64f75dafd..a262fcda1 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,5 +6,9 @@
   },
   "editor.formatOnSave": true,
   "css.customData": [".vscode/css-custom-data.json"],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }
diff --git a/colors.cjs b/colors.cjs
index c6092b0c8..06450d91e 100644
--- a/colors.cjs
+++ b/colors.cjs
@@ -21,7 +21,7 @@ const colors = {
   },
   indigo: {
     50: '#eef2ff',
-    100: '#e0e7ff',
+    100: '#E0EAFF',
     200: '#c7d2fe',
     300: '#a5b4fc',
     400: '#818cf8',
@@ -38,7 +38,7 @@ const colors = {
     300: '#d4d4d8',
     400: '#a1a1aa',
     500: '#71717a',
-    600: '#52525b',
+    600: '#4B5563',
     700: '#3f3f46',
     800: '#27272a',
     900: '#18181b',
@@ -94,7 +94,7 @@ const colors = {
   red: {
     50: '#fef2f2',
     100: '#fee2e2',
-    200: '#fecaca',
+    200: '#FFCFCF',
     300: '#fca5a5',
     400: '#f87171',
     500: '#ef4444',
diff --git a/cypress/integration/schedules.spec.js b/cypress/integration/schedules.spec.js
index 44a7d7f27..311e556fc 100644
--- a/cypress/integration/schedules.spec.js
+++ b/cypress/integration/schedules.spec.js
@@ -40,7 +40,7 @@ describe('Schedules View', () => {
     cy.get('.schedule-row').first().contains(scheduleId);
     cy.get('.schedule-row').first().contains(name);
 
-    cy.get('.schedule-row').first().click();
+    cy.get('.schedule-row a').first().click();
 
     cy.wait('@schedule-api');
 
@@ -63,7 +63,7 @@ describe('Schedules Edit', () => {
     cy.get('.schedule-row').first().contains(scheduleId);
     cy.get('.schedule-row').first().contains(name);
 
-    cy.get('.schedule-row').first().click();
+    cy.get('.schedule-row a').first().click();
 
     cy.wait('@schedule-api');
 
diff --git a/cypress/integration/workflow-executions.spec.js b/cypress/integration/workflow-executions.spec.js
index 48efb35e3..3100bc830 100644
--- a/cypress/integration/workflow-executions.spec.js
+++ b/cypress/integration/workflow-executions.spec.js
@@ -106,7 +106,7 @@ describe('Workflow Executions List', () => {
           encodeURIComponent(`ExecutionStatus="Running"`),
         );
 
-        cy.get('.workflow-summary-row > .time-cell').first().click();
+        cy.get('.workflow-summary-row a').first().click();
 
         cy.wait('@workflow-api');
         cy.wait('@event-history-api');
diff --git a/src/lib/components/banner/banner.svelte b/src/lib/components/banner/banner.svelte
index 778924c4e..d72b4d4cc 100644
--- a/src/lib/components/banner/banner.svelte
+++ b/src/lib/components/banner/banner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import IconButton from '$lib/holocene/icon-button.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { BannersState } from '$lib/models/banner-state';
   import { close, closedBanners } from '$lib/stores/banner';
@@ -24,9 +25,9 @@
     class={`relative block text-center leading-10 ${severity}`}
     {...$$restProps}
   >
-    <a href={link} target="_blank" rel="noreferrer">
+    <Link href={link} newTab>
       {message}
-    </a>
+    </Link>
 
     <IconButton
       on:click={() => close(key)}
diff --git a/src/lib/components/data-encoder-settings.svelte b/src/lib/components/data-encoder-settings.svelte
index a06eb54b5..157bc07e1 100644
--- a/src/lib/components/data-encoder-settings.svelte
+++ b/src/lib/components/data-encoder-settings.svelte
@@ -6,6 +6,7 @@
 
   import Accordion from '$lib/holocene/accordion.svelte';
   import Button from '$lib/holocene/button.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { clickOutside } from '$lib/holocene/outside-click';
   import { translate } from '$lib/i18n/translate';
   import { dataConverterPort } from '$lib/stores/data-converter-config';
@@ -17,10 +18,9 @@
   } from '$lib/stores/data-encoder-config';
   import { refresh } from '$lib/stores/workflow-run';
   import { validateHttpOrHttps, validateHttps } from '$lib/utilities/is-http';
-  
+
   import CodecEndpointSettings from './codec-endpoint-settings.svelte';
   import DataConverterPortSettings from './data-converter-port-settings.svelte';
-  
 
   export const viewDataEncoderSettings = writable<boolean>(false);
 </script>
@@ -89,12 +89,9 @@
         </h3>
       </div>
       <p class="text-sm">
-        {translate('data-encoder', 'codec-server-description-prefix')}<a
-          rel="noreferrer"
-          target="_blank"
+        {translate('data-encoder', 'codec-server-description-prefix')}<Link
           href="https://docs.temporal.io/dataconversion#codec-server"
-          class="text-blue-700 underline decoration-blue-700"
-          >{translate('codec-server')}</a
+          newTab>{translate('codec-server')}</Link
         >
         {translate('data-encoder', 'codec-server-description-suffix', {
           level: namespaceOrCluster,
@@ -156,14 +153,12 @@
       <DataConverterPortSettings bind:port />
       <div class="flex items-center gap-4">
         <Button
-          thin
           disabled={Boolean(error) || (override && !endpoint)}
           data-testid="confirm-data-encoder-button"
           on:click={onConfirm}
           type="submit">{translate('apply')}</Button
         >
         <Button
-          thin
           variant="ghost"
           data-testid="cancel-data-encoder-button"
           on:click={onCancel}>{translate('cancel')}</Button
diff --git a/src/lib/components/event/event-details-row-expanded.svelte b/src/lib/components/event/event-details-row-expanded.svelte
index 338db0bd2..9b744912f 100644
--- a/src/lib/components/event/event-details-row-expanded.svelte
+++ b/src/lib/components/event/event-details-row-expanded.svelte
@@ -152,7 +152,7 @@
   }
 
   .detail-row {
-    @apply block w-full items-start gap-4 py-2 text-left xl:flex;
+    @apply flex w-full items-center gap-4 py-2 text-left xl:flex;
   }
 
   .row:last-of-type .content {
diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
index 8844a8597..e9c63dbb1 100644
--- a/src/lib/components/event/event-details-row.svelte
+++ b/src/lib/components/event/event-details-row.svelte
@@ -47,12 +47,12 @@
   {:else if shouldDisplayAsExecutionLink(key)}
     <div class="flex w-full flex-wrap items-center gap-1 pr-1">
       <p class="mr-3 truncate text-sm">{format(key)}</p>
-      <div class="truncate text-sm">
+      <div class="text-sm truncate">
         <Copyable
           copyIconTitle={translate('copy-icon-title')}
           copySuccessIconTitle={translate('copy-success-icon-title')}
           content={value}
-          container-class=" xl:flex-row"
+          container-class="xl:flex-row h-12 pr-1"
         >
           <Link
             class="truncate"
@@ -71,12 +71,12 @@
   {:else if shouldDisplayChildWorkflowLink(key, attributes)}
     <div class="flex w-full flex-wrap items-center gap-1 pr-1">
       <p class="truncate text-sm">{format(key)}</p>
-      <div class="truncate text-sm">
+      <div class="text-sm truncate">
         <Copyable
           copyIconTitle={translate('copy-icon-title')}
           copySuccessIconTitle={translate('copy-success-icon-title')}
           content={value}
-          container-class="xl:flex-row"
+          container-class="xl:flex-row h-12 pr-1"
         >
           <Link
             class="truncate"
@@ -95,12 +95,12 @@
   {:else if shouldDisplayAsTaskQueueLink(key)}
     <div class="flex w-full flex-wrap items-center gap-1 pr-1">
       <p class="mr-3 truncate text-sm">{format(key)}</p>
-      <div class="truncate text-sm">
+      <div class="text-sm truncate">
         <Copyable
           copyIconTitle={translate('copy-icon-title')}
           copySuccessIconTitle={translate('copy-success-icon-title')}
           content={value}
-          container-class=""
+          container-class="h-12 pr-1"
         >
           <Link
             class="truncate"
diff --git a/src/lib/components/event/event-shortcut-keys.svelte b/src/lib/components/event/event-shortcut-keys.svelte
index d92a70735..d51fa51a7 100644
--- a/src/lib/components/event/event-shortcut-keys.svelte
+++ b/src/lib/components/event/event-shortcut-keys.svelte
@@ -10,11 +10,7 @@
 </script>
 
 <div class="shortcut-key-button">
-  <Button class="!py-1.5 !px-1" variant="secondary" on:click={onOpen}
-    ><span class="flex h-[24px] w-[24px] items-center justify-center text-xl"
-      >?</span
-    ></Button
-  >
+  <Button variant="secondary" on:click={onOpen}>?</Button>
 </div>
 <Drawer
   {open}
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index 8c3b9ee0a..77a262ce3 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -3,6 +3,7 @@
   import { fade } from 'svelte/transition';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { isEventGroup } from '$lib/models/event-groups';
   import {
     eventOrGroupIsCanceled,
@@ -82,9 +83,7 @@
 >
   <td />
   <td class="w-24 text-left">
-    <a class="text-sm text-gray-500 md:text-base" href="#{event.id}"
-      ><p class="truncate">{event.id}</p></a
-    >
+    <Link class="truncate" href="#{event.id}">{event.id}</Link>
   </td>
   <td class="text-left">
     <div class="flex flex-col gap-0">
diff --git a/src/lib/components/event/event-summary-table.svelte b/src/lib/components/event/event-summary-table.svelte
index f1703f1de..72d1438db 100644
--- a/src/lib/components/event/event-summary-table.svelte
+++ b/src/lib/components/event/event-summary-table.svelte
@@ -3,7 +3,7 @@
 
   import EventCategoryFilter from '$lib/components/event/event-category-filter.svelte';
   import EventDateFilter from '$lib/components/event/event-date-filter.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Button from '$lib/holocene/button.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import Table from '$lib/holocene/table/table.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -36,15 +36,16 @@
     <th class="w-44"><EventCategoryFilter {compact} /></th>
     <th class="w-auto xl:w-80">
       <div class="flex w-full justify-end">
-        <button
-          class="relative flex w-28 items-center justify-end rounded sm:justify-between"
+        <Button
+          size="sm"
+          variant="table-header"
+          trailingIcon={expandAll ? 'chevron-up' : 'chevron-down'}
           on:click={handleChange}
         >
           <span class="hidden sm:block">
             {expandAll ? translate('collapse-all') : translate('expand-all')}
           </span>
-          <Icon name={expandAll ? 'chevron-up' : 'chevron-down'} />
-        </button>
+        </Button>
       </div>
     </th>
   </TableHeaderRow>
diff --git a/src/lib/components/import/event-history-file-import.svelte b/src/lib/components/import/event-history-file-import.svelte
index c18f82600..104edfef1 100644
--- a/src/lib/components/import/event-history-file-import.svelte
+++ b/src/lib/components/import/event-history-file-import.svelte
@@ -74,6 +74,6 @@
   accept=".json"
   on:change={onFileSelect}
 />
-<Button icon="file-upload" on:click={onConfirm} disabled={!fileLoaded}
+<Button leadingIcon="file-upload" on:click={onConfirm} disabled={!fileLoaded}
   >{translate('import')}</Button
 >
diff --git a/src/lib/components/navigation-link.svelte b/src/lib/components/navigation-link.svelte
deleted file mode 100644
index c425b41af..000000000
--- a/src/lib/components/navigation-link.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  
-  import { pathMatches } from '$lib/utilities/path-matches';
-
-  export let href: string;
-
-  $: isActive = pathMatches(href, $page.url.pathname);
-</script>
-
-<a {href} class:active={isActive} class="relative">
-  <slot />
-</a>
-
-<style lang="postcss">
-  a.active {
-    @apply text-blue-200 opacity-100;
-  }
-
-  a.active::after {
-    @apply absolute inset-x-0 bottom-0 rounded-t bg-blue-200;
-
-    content: "";
-    height: 3px;
-  }
-
-  a:hover {
-    @apply opacity-100;
-  }
-
-  a {
-    @apply block px-2 py-5 text-base font-medium text-white;
-  }
-</style>
diff --git a/src/lib/components/schedule/schedule-advanced-settings.svelte b/src/lib/components/schedule/schedule-advanced-settings.svelte
index 5a0b06028..95d9b5def 100644
--- a/src/lib/components/schedule/schedule-advanced-settings.svelte
+++ b/src/lib/components/schedule/schedule-advanced-settings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Accordion from '$lib/holocene/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
 
   import ScheduleNotes from './schedule-notes.svelte';
@@ -10,17 +10,23 @@
   export let state: ScheduleState;
   export let policies: SchedulePolicies;
   export let notes = '';
-
-  let show = false;
 </script>
 
 <ScheduleNotes {notes} />
-<div>
-  <button on:click={() => (show = !show)} class="settings">
-    {translate('schedules', 'advanced-settings')}
-    <Icon class="inline" name={show ? 'chevron-up' : 'chevron-down'} />
-  </button>
-  {#if show}
+<Accordion title={translate('schedules', 'advanced-settings')}>
+  <p>
+    {translate('schedules', 'start-time')}
+    {spec?.startTime ?? translate('none')}
+  </p>
+  <p>
+    {translate('schedules', 'end-time')}{spec?.endTime ?? translate('none')}
+  </p>
+  <p>{translate('schedules', 'jitter')}{spec?.jitter ?? translate('none')}</p>
+  <p>
+    {translate('schedules', 'exclusion-calendar')}{spec?.excludeCalendar?.[0] ??
+      translate('none')}
+  </p>
+  {#if state?.limitedActions}
     <p>
       {translate('schedules', 'start-time')}
       {spec?.startTime ?? translate('none')}
@@ -44,10 +50,5 @@
         translate('none')}
     </p>
   {/if}
-</div>
+</Accordion>
 
-<style lang="postcss">
-  .settings {
-    @apply mb-4 underline decoration-gray-900;
-  }
-</style>
diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
index 130ec2584..4c0d86636 100644
--- a/src/lib/components/schedule/schedule-form-view.svelte
+++ b/src/lib/components/schedule/schedule-form-view.svelte
@@ -6,8 +6,8 @@
   import SchedulesCalendarView from '$lib/components/schedule/schedules-calendar-view.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Button from '$lib/holocene/button.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
   import Input from '$lib/holocene/input/input.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import Loading from '$lib/holocene/loading.svelte';
   import { translate } from '$lib/i18n/translate';
   import { error, loading } from '$lib/stores/schedules';
@@ -115,11 +115,11 @@
   {#if $loading}
     <Loading title={loadingText} />
   {:else}
-    <header class="relative mb-12 flex gap-1">
-      <a href={backHref} class="back absolute top-0" style="left: 0;">
-        <Icon name="chevron-left" class="inline" />{backTitle}
-      </a>
-      <h1 class="font-base mt-8 ml-0 text-2xl">{title}</h1>
+    <header class="mb-12 flex flex-col gap-1">
+      <Link href={backHref} icon="chevron-left">
+        {backTitle}
+      </Link>
+      <h1 class="font-base text-2xl">{title}</h1>
     </header>
     <form class="mb-4 flex w-full flex-col gap-4 md:w-2/3 xl:w-1/2">
       <Alert intent="error" title="" hidden={!$error} bold>
@@ -180,27 +180,15 @@
         bind:phase
         bind:cronString
       >
-        <div class="mt-8 flex items-center gap-8">
+        <div class="mt-8 flex items-center gap-2">
           <Button
             disabled={isDisabled(preset)}
             on:click={() => handleConfirm(preset, schedule)}
             >{confirmText}</Button
           >
-          <a href={backHref} class="back" style="left: 0;"
-            >{translate('cancel')}</a
-          >
+          <Button variant="ghost" href={backHref}>{translate('cancel')}</Button>
         </div>
       </SchedulesCalendarView>
     </form>
   {/if}
 </div>
-
-<style lang="postcss">
-  .back {
-    @apply text-sm;
-  }
-
-  .back:hover {
-    @apply text-blue-700 underline;
-  }
-</style>
diff --git a/src/lib/components/schedule/schedules-table-row.svelte b/src/lib/components/schedule/schedules-table-row.svelte
index d8f6f2683..6119c1b30 100644
--- a/src/lib/components/schedule/schedules-table-row.svelte
+++ b/src/lib/components/schedule/schedules-table-row.svelte
@@ -46,12 +46,14 @@
   });
 </script>
 
-<TableRow href={route} class="schedule-row">
+<TableRow class="schedule-row">
   <td class="cell">
     <WorkflowStatus status={schedule?.info?.paused ? 'Paused' : 'Running'} />
   </td>
   <td class="cell whitespace-pre-line break-words">
-    <p class="text-base">{schedule.scheduleId}</p>
+    <Link class="text-base" href={route}>
+      {schedule.scheduleId}
+    </Link>
   </td>
   <td class="cell whitespace-pre-line break-words max-md:hidden">
     {schedule?.info?.workflowType?.name ?? ''}
diff --git a/src/lib/components/search.svelte b/src/lib/components/search.svelte
index 2224ec2d3..70480c1ed 100644
--- a/src/lib/components/search.svelte
+++ b/src/lib/components/search.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Button from '$lib/holocene/button.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
   import { translate } from '$lib/i18n/translate';
 
   export let placeholder = '';
@@ -11,27 +11,20 @@
   export let id = `${label.toLocaleUpperCase()}-input`;
 </script>
 
-<form
-  on:submit|preventDefault
-  class="relative flex items-center rounded-lg border-2 bg-white transition-colors focus-within:border-blue-700"
-  role="search"
->
-  {#if icon}
-    <Icon name="search" class="ml-4 flex items-center text-gray-700" />
-  {/if}
-  <label for={id} class="hidden">{label}</label>
-  <input
+<form on:submit|preventDefault role="search" class="flex items-center">
+  <Input
+    class="w-full"
+    unroundRight
+    {label}
     {id}
+    labelHidden
+    icon={icon ? 'search' : null}
     type="search"
-    class="w-full rounded-l-lg px-4 focus:outline-none"
     {name}
     {value}
     {placeholder}
     autocomplete="off"
     on:input
-    on:keydown|stopPropagation
   />
-  <div>
-    <Button class="m-2" type="submit">{label}</Button>
-  </div>
+  <Button borderRadiusModifier="square-left" type="submit">{label}</Button>
 </form>
diff --git a/src/lib/components/workflow/filter-search/boolean-filter.svelte b/src/lib/components/workflow/filter-search/boolean-filter.svelte
index 9087b27a1..6690cd784 100644
--- a/src/lib/components/workflow/filter-search/boolean-filter.svelte
+++ b/src/lib/components/workflow/filter-search/boolean-filter.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <MenuContainer>
-  <MenuButton id="boolean-filter" controls="boolean-filter-menu">
+  <MenuButton unroundLeft class="!border-l-0" id="boolean-filter" controls="boolean-filter-menu">
     {selectedLabel}
   </MenuButton>
   <Menu id="boolean-filter-menu">
diff --git a/src/lib/components/workflow/filter-search/filter-list.svelte b/src/lib/components/workflow/filter-search/filter-list.svelte
index 4254ad2f3..f03e66ddc 100644
--- a/src/lib/components/workflow/filter-search/filter-list.svelte
+++ b/src/lib/components/workflow/filter-search/filter-list.svelte
@@ -134,7 +134,7 @@
     {/if}
   {/each}
   {#if hasMoreFilters}
-    <Button variant="search" thin on:click={viewMoreFilters}
+    <Button variant="secondary" size="xs" on:click={viewMoreFilters}
       >View More...</Button
     >
   {/if}
diff --git a/src/lib/components/workflow/filter-search/list-filter.svelte b/src/lib/components/workflow/filter-search/list-filter.svelte
index 7867388b1..cb226bf1f 100644
--- a/src/lib/components/workflow/filter-search/list-filter.svelte
+++ b/src/lib/components/workflow/filter-search/list-filter.svelte
@@ -31,8 +31,8 @@
     placeholder="{translate('type-or-paste-in')} {$filter.attribute}"
   />
   <Button
-    variant="search"
-    unroundLeft
+    variant="secondary"
+    borderRadiusModifier="square-left"
     disabled={!list.length}
     on:click={onSubmit}>{translate('submit')}</Button
   >
diff --git a/src/lib/components/workflow/pending-activities.svelte b/src/lib/components/workflow/pending-activities.svelte
index 8ba5b5832..451775a90 100644
--- a/src/lib/components/workflow/pending-activities.svelte
+++ b/src/lib/components/workflow/pending-activities.svelte
@@ -54,79 +54,73 @@
           </h3>
           <div class="pending-activity-row">
             <div class="pending-activity-summary">
-              <a class="flex w-full items-center hover:bg-gray-50" {href}>
-                <div class="pending-activity-inner-row">
-                  <div class="pending-activity-detail">
-                    <h4 class="pending-activity-detail-header">
-                      {translate('workflows', 'activity-type')}
-                    </h4>
-                    <Badge type={failed ? 'error' : 'default'}>
-                      {pendingActivity.activityType}
-                    </Badge>
-                  </div>
-                  <div class="pending-activity-detail">
-                    <h4 class="pending-activity-detail-header">
-                      {translate('workflows', 'last-heartbeat')}
-                    </h4>
-                    {formatDate(
-                      pendingActivity.lastHeartbeatTime,
-                      $timeFormat,
-                      {
-                        relative: $relativeTime,
-                      },
+              <div class="pending-activity-inner-row">
+                <div class="pending-activity-detail">
+                  <h4 class="pending-activity-detail-header">
+                    {translate('workflows', 'activity-type')}
+                  </h4>
+                  <Badge type={failed ? 'error' : 'default'}>
+                    {pendingActivity.activityType}
+                  </Badge>
+                </div>
+                <div class="pending-activity-detail">
+                  <h4 class="pending-activity-detail-header">
+                    {translate('workflows', 'last-heartbeat')}
+                  </h4>
+                  {formatDate(pendingActivity.lastHeartbeatTime, $timeFormat, {
+                    relative: $relativeTime,
+                  })}
+                </div>
+                <div class="pending-activity-detail">
+                  <h4 class="pending-activity-detail-header">
+                    {translate('workflows', 'attempt')}
+                  </h4>
+                  <Badge type={failed ? 'error' : 'default'}>
+                    {#if failed}
+                      <Icon name="retry" />
+                    {/if}
+                    {pendingActivity.attempt}
+                  </Badge>
+                </div>
+                <div class="pending-activity-detail">
+                  <h4 class="pending-activity-detail-header">
+                    {translate('workflows', 'attempts-left')}
+                  </h4>
+                  <Badge type={failed ? 'error' : 'default'}>
+                    {formatAttemptsLeft(
+                      pendingActivity.maximumAttempts,
+                      pendingActivity.attempt,
                     )}
-                  </div>
-                  <div class="pending-activity-detail">
-                    <h4 class="pending-activity-detail-header">
-                      {translate('workflows', 'attempt')}
-                    </h4>
-                    <Badge type={failed ? 'error' : 'default'}>
-                      {#if failed}
-                        <Icon name="retry" />
-                      {/if}
-                      {pendingActivity.attempt}
-                    </Badge>
-                  </div>
+                  </Badge>
+                </div>
+                {#if failed && pendingActivity.scheduledTime}
                   <div class="pending-activity-detail">
                     <h4 class="pending-activity-detail-header">
-                      {translate('workflows', 'attempts-left')}
+                      {translate('workflows', 'next-retry')}
                     </h4>
                     <Badge type={failed ? 'error' : 'default'}>
-                      {formatAttemptsLeft(
-                        pendingActivity.maximumAttempts,
-                        pendingActivity.attempt,
-                      )}
+                      {toTimeDifference({
+                        date: pendingActivity.scheduledTime,
+                        negativeDefault: 'None',
+                      })}
                     </Badge>
                   </div>
-                  {#if failed && pendingActivity.scheduledTime}
-                    <div class="pending-activity-detail">
-                      <h4 class="pending-activity-detail-header">
-                        {translate('workflows', 'next-retry')}
-                      </h4>
-                      <Badge type={failed ? 'error' : 'default'}>
-                        {toTimeDifference({
-                          date: pendingActivity.scheduledTime,
-                          negativeDefault: 'None',
-                        })}
-                      </Badge>
-                    </div>
-                  {/if}
-                  <div class="pending-activity-detail">
-                    <h4 class="pending-activity-detail-header">
-                      {translate('workflows', 'expiration')}
-                    </h4>
-                    {formatRetryExpiration(
-                      pendingActivity.maximumAttempts,
-                      formatDuration(
-                        getDuration({
-                          start: Date.now(),
-                          end: pendingActivity.expirationTime,
-                        }),
-                      ),
-                    )}
-                  </div>
+                {/if}
+                <div class="pending-activity-detail">
+                  <h4 class="pending-activity-detail-header">
+                    {translate('workflows', 'expiration')}
+                  </h4>
+                  {formatRetryExpiration(
+                    pendingActivity.maximumAttempts,
+                    formatDuration(
+                      getDuration({
+                        start: Date.now(),
+                        end: pendingActivity.expirationTime,
+                      }),
+                    ),
+                  )}
                 </div>
-              </a>
+              </div>
               <div class="pending-activity-failure-details">
                 {#if pendingActivity?.heartbeatDetails}
                   <div class="w-1/2 grow">
@@ -164,7 +158,7 @@
         </div>
       {/each}
     </div>
-    <div class="text-right">
+    <div class="text-right mt-2">
       <Link {href}>{translate('workflows', 'pending-activities-link')}</Link>
     </div>
   </section>
diff --git a/src/lib/components/workflow/workflow-advanced-search.svelte b/src/lib/components/workflow/workflow-advanced-search.svelte
index d58107f7e..333fa1c34 100644
--- a/src/lib/components/workflow/workflow-advanced-search.svelte
+++ b/src/lib/components/workflow/workflow-advanced-search.svelte
@@ -78,8 +78,7 @@
       <Button
         data-testid="manual-search-button"
         variant="primary"
-        class="h-10"
-        unroundLeft
+        borderRadiusModifier="square-left"
         type="submit"
       >
         {translate('search')}
diff --git a/src/lib/components/workflow/workflow-filters.svelte b/src/lib/components/workflow/workflow-filters.svelte
index 455bbfe2c..d94bfccde 100644
--- a/src/lib/components/workflow/workflow-filters.svelte
+++ b/src/lib/components/workflow/workflow-filters.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import debounce from 'just-debounce';
   import { createEventDispatcher } from 'svelte';
-  
+
   import { page } from '$app/stores';
-  
+
   import Search from '$lib/components/search.svelte';
   import Input from '$lib/holocene/input/input.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import Option from '$lib/holocene/select/simple-option.svelte';
   import Select from '$lib/holocene/select/simple-select.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -14,7 +15,7 @@
   import { toListWorkflowParameters } from '$lib/utilities/query/to-list-workflow-parameters';
   import { durations } from '$lib/utilities/to-duration';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
-  
+
   const dispatch = createEventDispatcher<{ search: undefined }>();
 
   export let searchType: 'basic' | 'advanced';
@@ -37,12 +38,6 @@
   const updateSearchType =
     (newSearchType: 'basic' | 'advanced') => (): void => {
       searchType = newSearchType;
-
-      updateQueryParameters({
-        parameter: 'search',
-        value: searchType,
-        url: $page.url,
-      });
     };
 
   const updateQuery = (event: SubmitEvent): void => {
@@ -74,21 +69,19 @@
 <div class="flex flex-col">
   <p class="pb-2 text-right text-xs">
     {#if searchType === 'advanced'}
-      <a
-        href="{$page.url.pathname}?searchType=basic"
-        class="text-blue-700"
-        on:click|preventDefault={updateSearchType('basic')}
+      <Link
+        href="{$page.url.pathname}?search=basic"
+        on:click={updateSearchType('basic')}
       >
         {translate('workflows', 'basic-search')}
-      </a>
+      </Link>
     {:else}
-      <a
-        href="{$page.url.pathname}?searchType=advanced"
-        class="text-blue-700"
-        on:click|preventDefault={updateSearchType('advanced')}
+      <Link
+        href="{$page.url.pathname}?search=advanced"
+        on:click={updateSearchType('advanced')}
       >
         {translate('workflows', 'advanced-search')}
-      </a>
+      </Link>
     {/if}
   </p>
 
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/filterable-table-cell.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/filterable-table-cell.svelte
index 85225fe3f..8ac65122e 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/filterable-table-cell.svelte
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/filterable-table-cell.svelte
@@ -2,6 +2,7 @@
   import { page } from '$app/stores';
   
   import FilterOrCopyButtons from '$lib/holocene/filter-or-copy-buttons.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import {
     searchAttributeToWorkflowKey,
@@ -46,7 +47,7 @@
   };
 </script>
 
-<a {href} class="table-link">{value}</a>
+<Link {href}>{value}</Link>
 <FilterOrCopyButtons
   copyIconTitle={translate('copy-icon-title')}
   copySuccessIconTitle={translate('copy-success-icon-title')}
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte
index 646ade740..d81fe3490 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
 
   import Alert from '$lib/holocene/alert.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import Loading from '$lib/holocene/loading.svelte';
   import { translate } from '$lib/i18n/translate';
   import { workflowError } from '$lib/stores/workflows';
@@ -63,22 +63,17 @@
         <slot name="cloud" />
         <p>
           {translate('workflows', 'workflow-empty-state-description')}
-          <a
-            href="https://github.com/temporalio"
-            rel="noreferrer"
-            target="_blank"
-            class="underline hover:text-blue-700 hover:decoration-blue-700"
-            >Temporal's GitHub repository</a
+          <Link newTab href="https://github.com/temporalio"
+            >Temporal's GitHub repository</Link
           >.
         </p>
         <ul class="flex flex-col gap-2">
           {#each samples as sample}
             <li>
-              <a
-                class="flex gap-2 items-center hover:text-blue-700 hover:underline hover:decoration-blue-700"
-                href="https://github.com/temporalio/{sample}"
-                rel="noreferrer"
-                target="_blank"><Icon name="github" />{sample}</a
+              <Link
+                icon="github"
+                newTab
+                href="https://github.com/temporalio/{sample}">{sample}</Link
               >
             </li>
           {/each}
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/table-header-cell.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/table-header-cell.svelte
index 5f6934830..a8f4c35d8 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/table-header-cell.svelte
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/table-header-cell.svelte
@@ -34,6 +34,6 @@
 
 <style lang="postcss">
   .workflows-summary-table-header-cell {
-    @apply whitespace-nowrap px-2 text-left font-secondary text-sm font-medium h-10;
+    @apply whitespace-nowrap px-2 text-left font-secondary text-sm font-medium;
   }
 </style>
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte b/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte
index cb6f82fc4..278293d7b 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte
@@ -74,6 +74,6 @@
   }
 
   .configuration-button-table-cell {
-    @apply h-10 w-10 px-2;
+    @apply h-10 w-10 px-2 py-1;
   }
 </style>
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-body-cell.test.ts.snap b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-body-cell.test.ts.snap
index afeb82ab9..a92660555 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-body-cell.test.ts.snap
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-body-cell.test.ts.snap
@@ -14,7 +14,7 @@ exports[`Table_body_cell$ > Parent Namespace renders 1`] = `"<td class=\\"workfl
 
 exports[`Table_body_cell$ > Parent Workflow ID renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\">parent-workflow-id</td>"`;
 
-exports[`Table_body_cell$ > Run ID renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"table-link\\">def-456</a> </td>"`;
+exports[`Table_body_cell$ > Run ID renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"link svelte-1v8baj6\\"> def-456</a> </td>"`;
 
 exports[`Table_body_cell$ > Start renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\">2023-04-27 UTC 00:00:00.00</td>"`;
 
@@ -24,6 +24,6 @@ exports[`Table_body_cell$ > Status renders 1`] = `"<td class=\\"workflows-summar
 
 exports[`Table_body_cell$ > Task Queue renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\">task-queue</td>"`;
 
-exports[`Table_body_cell$ > Type renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"table-link\\">mock-workflow</a> </td>"`;
+exports[`Table_body_cell$ > Type renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"link svelte-1v8baj6\\"> mock-workflow</a> </td>"`;
 
-exports[`Table_body_cell$ > Workflow ID renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"table-link\\">abc-123</a> </td>"`;
+exports[`Table_body_cell$ > Workflow ID renders 1`] = `"<td class=\\"workflows-summary-table-body-cell filterable svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><a href=\\"/namespaces/default/workflows/abc-123/def-456/history\\" class=\\"link svelte-1v8baj6\\"> abc-123</a> </td>"`;
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
index f82d80ce2..98158045a 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
@@ -1,29 +1,29 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Table_header_cell$ > End renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-End\\">End</th>"`;
+exports[`Table_header_cell$ > End renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-End\\">End</th>"`;
 
-exports[`Table_header_cell$ > Execution Duration renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Execution Duration\\">Execution Duration</th>"`;
+exports[`Table_header_cell$ > Execution Duration renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Execution Duration\\">Execution Duration</th>"`;
 
-exports[`Table_header_cell$ > Execution Time renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Execution Time\\">Execution Time</th>"`;
+exports[`Table_header_cell$ > Execution Time renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Execution Time\\">Execution Time</th>"`;
 
-exports[`Table_header_cell$ > History Length renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-History Length\\">History Length</th>"`;
+exports[`Table_header_cell$ > History Length renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-History Length\\">History Length</th>"`;
 
-exports[`Table_header_cell$ > History Size renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-History Size\\">History Size</th>"`;
+exports[`Table_header_cell$ > History Size renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-History Size\\">History Size</th>"`;
 
-exports[`Table_header_cell$ > Parent Namespace renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Parent Namespace\\">Parent Namespace</th>"`;
+exports[`Table_header_cell$ > Parent Namespace renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Parent Namespace\\">Parent Namespace</th>"`;
 
-exports[`Table_header_cell$ > Parent Workflow ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Parent Workflow ID\\">Parent Workflow ID</th>"`;
+exports[`Table_header_cell$ > Parent Workflow ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Parent Workflow ID\\">Parent Workflow ID</th>"`;
 
-exports[`Table_header_cell$ > Run ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Run ID\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"run-id-filter-menu\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-21huqw\\" data-testid=\\"run-id-filter-button\\"> <div class=\\"flex items-center grow\\">Run ID</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left w-[500px] hidden svelte-63nj9m\\" aria-labelledby=\\"run-id-filter-menu\\" tabindex=\\"-1\\" id=\\"run-id-filter-menu\\"><div class=\\"flex items-center p-2 transition-all hover:cursor-pointer svelte-6q98ov\\"><label for=\\"run-id\\" class=\\"svelte-6q98ov sr-only\\">Search</label> <div class=\\"input-container light svelte-6q98ov\\"><span class=\\"icon-container svelte-6q98ov\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span> <input class=\\"m-2 block w-full bg-white focus:outline-none svelte-6q98ov\\" data-lpignore=\\"true\\" placeholder=\\"Run ID\\" id=\\"run-id\\" name=\\"run-id\\" autocomplete=\\"off\\" type=\\"search\\">   </div> <span class=\\"inline-block hint-text svelte-6q98ov hidden\\"></span></div></ul></div></th>"`;
+exports[`Table_header_cell$ > Run ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Run ID\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"run-id-filter-menu\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-4tb2vr\\" data-testid=\\"run-id-filter-button\\"> <div class=\\"flex items-center grow\\">Run ID</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left w-[500px] hidden svelte-63nj9m\\" aria-labelledby=\\"run-id-filter-menu\\" tabindex=\\"-1\\" id=\\"run-id-filter-menu\\"><div class=\\"flex items-center p-2 transition-all hover:cursor-pointer svelte-17wusc4\\"><label for=\\"run-id\\" class=\\"svelte-17wusc4 sr-only\\">Search</label> <div class=\\"input-container light svelte-17wusc4\\"><span class=\\"icon-container svelte-17wusc4\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span> <input class=\\"m-2 block w-full bg-white focus:outline-none svelte-17wusc4\\" data-lpignore=\\"true\\" placeholder=\\"Run ID\\" id=\\"run-id\\" name=\\"run-id\\" autocomplete=\\"off\\" type=\\"search\\">   </div> <span class=\\"inline-block hint-text svelte-17wusc4 hidden\\"></span></div></ul></div></th>"`;
 
-exports[`Table_header_cell$ > Start renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Start\\">Start</th>"`;
+exports[`Table_header_cell$ > Start renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Start\\">Start</th>"`;
 
-exports[`Table_header_cell$ > State Transitions renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-State Transitions\\">State Transitions</th>"`;
+exports[`Table_header_cell$ > State Transitions renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-State Transitions\\">State Transitions</th>"`;
 
-exports[`Table_header_cell$ > Status renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Status\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"execution-status-filter\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-21huqw\\" data-testid=\\"execution-status-filter-button\\"> <div class=\\"flex items-center grow\\">Status</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left hidden svelte-63nj9m\\" aria-labelledby=\\"execution-status-filter\\" tabindex=\\"-1\\" id=\\"execution-status-filter\\"><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">All</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"absolute top-0 left-0 h-4 w-4\\" role=\\"img\\"><title>checkmark</title><path d=\\"M19.6992 7.60938L10.1367 17.1719C10.0312 17.2773 9.89062 17.3125 9.75 17.3125C9.57422 17.3125 9.43359 17.2773 9.32812 17.1719L4.26562 12.1094C4.05469 11.8984 4.05469 11.5117 4.26562 11.3008C4.47656 11.0898 4.86328 11.0898 5.07422 11.3008L9.75 15.9766L18.8906 6.80078C19.1016 6.58984 19.4883 6.58984 19.6992 6.80078C19.9102 7.01172 19.9102 7.39844 19.6992 7.60938Z\\" fill=\\"currentcolor\\"></path></svg></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\">All Statuses  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Running</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-blue-100 text-blue-700\\">Running <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">TimedOut</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-orange-100 text-orange-700\\">Timed Out </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Completed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-green-100 text-green-700\\">Completed </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Failed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Failed </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">ContinuedAsNew</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-gray-200 text-gray-900\\">Continued as New </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Canceled</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-yellow-100 text-yellow-900\\">Canceled </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Terminated</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Terminated </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li></ul></div></th>"`;
+exports[`Table_header_cell$ > Status renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Status\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"execution-status-filter\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-4tb2vr\\" data-testid=\\"execution-status-filter-button\\"> <div class=\\"flex items-center grow\\">Status</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left hidden svelte-63nj9m\\" aria-labelledby=\\"execution-status-filter\\" tabindex=\\"-1\\" id=\\"execution-status-filter\\"><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">All</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"absolute top-0 left-0 h-4 w-4\\" role=\\"img\\"><title>checkmark</title><path d=\\"M19.6992 7.60938L10.1367 17.1719C10.0312 17.2773 9.89062 17.3125 9.75 17.3125C9.57422 17.3125 9.43359 17.2773 9.32812 17.1719L4.26562 12.1094C4.05469 11.8984 4.05469 11.5117 4.26562 11.3008C4.47656 11.0898 4.86328 11.0898 5.07422 11.3008L9.75 15.9766L18.8906 6.80078C19.1016 6.58984 19.4883 6.58984 19.6992 6.80078C19.9102 7.01172 19.9102 7.39844 19.6992 7.60938Z\\" fill=\\"currentcolor\\"></path></svg></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\">All Statuses  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Running</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-blue-100 text-blue-700\\">Running <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">TimedOut</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-orange-100 text-orange-700\\">Timed Out </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Completed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-green-100 text-green-700\\">Completed </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Failed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Failed </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">ContinuedAsNew</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-gray-200 text-gray-900\\">Continued as New </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Canceled</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-yellow-100 text-yellow-900\\">Canceled </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Terminated</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Terminated </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li></ul></div></th>"`;
 
-exports[`Table_header_cell$ > Task Queue renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Task Queue\\">Task Queue</th>"`;
+exports[`Table_header_cell$ > Task Queue renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Task Queue\\">Task Queue</th>"`;
 
-exports[`Table_header_cell$ > Type renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Type\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"workflow-type-filter-menu\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-21huqw\\" data-testid=\\"workflow-type-filter-button\\"> <div class=\\"flex items-center grow\\">Type</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left w-[500px] hidden svelte-63nj9m\\" aria-labelledby=\\"workflow-type-filter-menu\\" tabindex=\\"-1\\" id=\\"workflow-type-filter-menu\\"><div class=\\"flex items-center p-2 transition-all hover:cursor-pointer svelte-6q98ov\\"><label for=\\"workflow-type\\" class=\\"svelte-6q98ov sr-only\\">Search</label> <div class=\\"input-container light svelte-6q98ov\\"><span class=\\"icon-container svelte-6q98ov\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span> <input class=\\"m-2 block w-full bg-white focus:outline-none svelte-6q98ov\\" data-lpignore=\\"true\\" placeholder=\\"Type\\" id=\\"workflow-type\\" name=\\"workflow-type\\" autocomplete=\\"off\\" type=\\"search\\">   </div> <span class=\\"inline-block hint-text svelte-6q98ov hidden\\"></span></div></ul></div></th>"`;
+exports[`Table_header_cell$ > Type renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Type\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"workflow-type-filter-menu\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-4tb2vr\\" data-testid=\\"workflow-type-filter-button\\"> <div class=\\"flex items-center grow\\">Type</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left w-[500px] hidden svelte-63nj9m\\" aria-labelledby=\\"workflow-type-filter-menu\\" tabindex=\\"-1\\" id=\\"workflow-type-filter-menu\\"><div class=\\"flex items-center p-2 transition-all hover:cursor-pointer svelte-17wusc4\\"><label for=\\"workflow-type\\" class=\\"svelte-17wusc4 sr-only\\">Search</label> <div class=\\"input-container light svelte-17wusc4\\"><span class=\\"icon-container svelte-17wusc4\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span> <input class=\\"m-2 block w-full bg-white focus:outline-none svelte-17wusc4\\" data-lpignore=\\"true\\" placeholder=\\"Type\\" id=\\"workflow-type\\" name=\\"workflow-type\\" autocomplete=\\"off\\" type=\\"search\\">   </div> <span class=\\"inline-block hint-text svelte-17wusc4 hidden\\"></span></div></ul></div></th>"`;
 
-exports[`Table_header_cell$ > Workflow ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Workflow ID\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"workflow-id-filter-menu\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-21huqw\\" data-testid=\\"workflow-id-filter-button\\"> <div class=\\"flex items-center grow\\">Workflow ID</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left w-[500px] hidden svelte-63nj9m\\" aria-labelledby=\\"workflow-id-filter-menu\\" tabindex=\\"-1\\" id=\\"workflow-id-filter-menu\\"><div class=\\"flex items-center p-2 transition-all hover:cursor-pointer svelte-6q98ov\\"><label for=\\"workflow-id\\" class=\\"svelte-6q98ov sr-only\\">Search</label> <div class=\\"input-container light svelte-6q98ov\\"><span class=\\"icon-container svelte-6q98ov\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span> <input class=\\"m-2 block w-full bg-white focus:outline-none svelte-6q98ov\\" data-lpignore=\\"true\\" placeholder=\\"Workflow ID\\" id=\\"workflow-id\\" name=\\"workflow-id\\" autocomplete=\\"off\\" type=\\"search\\">   </div> <span class=\\"inline-block hint-text svelte-6q98ov hidden\\"></span></div></ul></div></th>"`;
+exports[`Table_header_cell$ > Workflow ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Workflow ID\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"workflow-id-filter-menu\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-4tb2vr\\" data-testid=\\"workflow-id-filter-button\\"> <div class=\\"flex items-center grow\\">Workflow ID</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left w-[500px] hidden svelte-63nj9m\\" aria-labelledby=\\"workflow-id-filter-menu\\" tabindex=\\"-1\\" id=\\"workflow-id-filter-menu\\"><div class=\\"flex items-center p-2 transition-all hover:cursor-pointer svelte-17wusc4\\"><label for=\\"workflow-id\\" class=\\"svelte-17wusc4 sr-only\\">Search</label> <div class=\\"input-container light svelte-17wusc4\\"><span class=\\"icon-container svelte-17wusc4\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span> <input class=\\"m-2 block w-full bg-white focus:outline-none svelte-17wusc4\\" data-lpignore=\\"true\\" placeholder=\\"Workflow ID\\" id=\\"workflow-id\\" name=\\"workflow-id\\" autocomplete=\\"off\\" type=\\"search\\">   </div> <span class=\\"inline-block hint-text svelte-17wusc4 hidden\\"></span></div></ul></div></th>"`;
diff --git a/src/lib/components/workflow/workflows-summary-row.svelte b/src/lib/components/workflow/workflows-summary-row.svelte
index 76348ff08..dfb6cffad 100644
--- a/src/lib/components/workflow/workflows-summary-row.svelte
+++ b/src/lib/components/workflow/workflows-summary-row.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
 
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import FilterOrCopyButtons from '$lib/holocene/filter-or-copy-buttons.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
   import { translate } from '$lib/i18n/translate';
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
+  import { workflowsSearchParams } from '$lib/stores/workflows';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { formatDate } from '$lib/utilities/format-date';
   import { getMilliseconds } from '$lib/utilities/format-time';
@@ -43,7 +46,7 @@
   };
 </script>
 
-<TableRow {href} class="workflow-summary-row">
+<TableRow class="workflow-summary-row">
   <td>
     <WorkflowStatus
       status={workflow.status}
@@ -57,7 +60,12 @@
     on:mouseleave={() => (showFilterCopy = false)}
     on:blur={() => (showFilterCopy = false)}
   >
-    <span class="table-link">{workflow.id}</span>
+    <Link on:click={() => {
+      $workflowsSearchParams = $page.url.searchParams.toString();
+      goto(href)
+    }}>
+      {workflow.id}
+    </Link>
     <FilterOrCopyButtons
       copyIconTitle={translate('copy-icon-title')}
       copySuccessIconTitle={translate('copy-success-icon-title')}
diff --git a/src/lib/holocene/__snapshots__/button.test.ts.snap b/src/lib/holocene/__snapshots__/button.test.ts.snap
index b082d7055..4da174a5a 100644
--- a/src/lib/holocene/__snapshots__/button.test.ts.snap
+++ b/src/lib/holocene/__snapshots__/button.test.ts.snap
@@ -1,15 +1,73 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Button > class 1`] = `"<button type=\\"button\\" class=\\"button primary custom-class svelte-1b5wh91\\">  </button>"`;
+exports[`Button > Variant destructive renders > count 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-red-700 bg-red-700 text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-red-200/50 [&amp;:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50 h-10 text-base px-4 py-2 svelte-je0ft1\\">   <div class=\\"count flex w-fit flex-row items-center justify-center break-all rounded-sm p-1 text-sm leading-4 font-medium transition-colors badge absolute top-0 right-0 origin-bottom-left translate-y-[-10px] translate-x-[10px] svelte-1sxi5rd\\">10</div></button>"`;
 
-exports[`Button > default 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1b5wh91\\">  </button>"`;
+exports[`Button > Variant destructive renders > disabled 1`] = `"<button disabled=\\"\\" role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-red-700 bg-red-700 text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-red-200/50 [&amp;:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50 h-10 text-base px-4 py-2 svelte-je0ft1\\">   </button>"`;
 
-exports[`Button > disabled 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1b5wh91\\" disabled=\\"\\">  </button>"`;
+exports[`Button > Variant destructive renders > leading icon 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-red-700 bg-red-700 text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-red-200/50 [&amp;:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50 h-10 text-base px-4 py-2 svelte-je0ft1\\"><span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span>   </button>"`;
 
-exports[`Button > icon 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1b5wh91\\"><span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>download</title><path d=\\"M11.625 16.375C11.7188 16.4688 11.8438 16.5 12 16.5C12.125 16.5 12.25 16.4688 12.3438 16.375L16.8438 11.875C17.0312 11.6875 17.0312 11.3438 16.8438 11.1562C16.6562 10.9688 16.3125 10.9688 16.125 11.1562L12.5 14.8125V5.5C12.5 5.25 12.25 5 12 5C11.7188 5 11.5 5.25 11.5 5.5V14.8125L7.84375 11.1562C7.65625 10.9688 7.3125 10.9688 7.125 11.1562C6.9375 11.3438 6.9375 11.6875 7.125 11.875L11.625 16.375ZM17.5 18H6.5C6.21875 18 6 18.25 6 18.5C6 18.7812 6.21875 19 6.5 19H17.5C17.75 19 18 18.7812 18 18.5C18 18.25 17.75 18 17.5 18Z\\" fill=\\"currentcolor\\"></path></svg></span>  </button>"`;
+exports[`Button > Variant destructive renders > lg 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-red-700 bg-red-700 text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-red-200/50 [&amp;:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50 h-11 text-lg px-5 py-2.5 svelte-je0ft1\\">   </button>"`;
 
-exports[`Button > loading 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1b5wh91\\"><span class=\\"animate-spin\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>spinner</title><path d=\\"M7.375 6.40625C6.84375 6.40625 6.375 6.875 6.375 7.40625C6.375 7.96875 6.84375 8.40625 7.375 8.40625C7.9375 8.40625 8.375 7.96875 8.375 7.40625C8.375 6.875 7.9375 6.40625 7.375 6.40625ZM7.375 15.625C6.84375 15.625 6.375 16.0625 6.375 16.625C6.375 17.1562 6.84375 17.625 7.375 17.625C7.9375 17.625 8.375 17.1562 8.375 16.625C8.375 16.0625 7.9375 15.625 7.375 15.625ZM12 17.5C11.4375 17.5 11 17.9688 11 18.5C11 19.0625 11.4375 19.5 12 19.5C12.5312 19.5 13 19.0625 13 18.5C13 17.9688 12.5312 17.5 12 17.5ZM5.5 11C4.9375 11 4.5 11.4688 4.5 12C4.5 12.5625 4.9375 13 5.5 13C6.03125 13 6.5 12.5625 6.5 12C6.5 11.4688 6.03125 11 5.5 11ZM12 4.5C11.4375 4.5 11 4.96875 11 5.5C11 6.0625 11.4375 6.5 12 6.5C12.5312 6.5 13 6.0625 13 5.5C13 4.96875 12.5312 4.5 12 4.5ZM18.5 11C17.9375 11 17.5 11.4688 17.5 12C17.5 12.5625 17.9375 13 18.5 13C19.0312 13 19.5 12.5625 19.5 12C19.5 11.4688 19.0312 11 18.5 11ZM16.5938 15.625C16.0312 15.625 15.5938 16.0625 15.5938 16.625C15.5938 17.1562 16.0312 17.625 16.5938 17.625C17.125 17.625 17.5938 17.1562 17.5938 16.625C17.5938 16.0625 17.125 15.625 16.5938 15.625Z\\" fill=\\"currentcolor\\"></path></svg></span>  </button>"`;
+exports[`Button > Variant destructive renders > loading 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-red-700 bg-red-700 text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-red-200/50 [&amp;:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50 h-10 text-base px-4 py-2 svelte-je0ft1\\"><span class=\\"animate-spin\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>spinner</title><path d=\\"M7.375 6.40625C6.84375 6.40625 6.375 6.875 6.375 7.40625C6.375 7.96875 6.84375 8.40625 7.375 8.40625C7.9375 8.40625 8.375 7.96875 8.375 7.40625C8.375 6.875 7.9375 6.40625 7.375 6.40625ZM7.375 15.625C6.84375 15.625 6.375 16.0625 6.375 16.625C6.375 17.1562 6.84375 17.625 7.375 17.625C7.9375 17.625 8.375 17.1562 8.375 16.625C8.375 16.0625 7.9375 15.625 7.375 15.625ZM12 17.5C11.4375 17.5 11 17.9688 11 18.5C11 19.0625 11.4375 19.5 12 19.5C12.5312 19.5 13 19.0625 13 18.5C13 17.9688 12.5312 17.5 12 17.5ZM5.5 11C4.9375 11 4.5 11.4688 4.5 12C4.5 12.5625 4.9375 13 5.5 13C6.03125 13 6.5 12.5625 6.5 12C6.5 11.4688 6.03125 11 5.5 11ZM12 4.5C11.4375 4.5 11 4.96875 11 5.5C11 6.0625 11.4375 6.5 12 6.5C12.5312 6.5 13 6.0625 13 5.5C13 4.96875 12.5312 4.5 12 4.5ZM18.5 11C17.9375 11 17.5 11.4688 17.5 12C17.5 12.5625 17.9375 13 18.5 13C19.0312 13 19.5 12.5625 19.5 12C19.5 11.4688 19.0312 11 18.5 11ZM16.5938 15.625C16.0312 15.625 15.5938 16.0625 15.5938 16.625C15.5938 17.1562 16.0312 17.625 16.5938 17.625C17.125 17.625 17.5938 17.1562 17.5938 16.625C17.5938 16.0625 17.125 15.625 16.5938 15.625Z\\" fill=\\"currentcolor\\"></path></svg></span>   </button>"`;
 
-exports[`Button > secondary 1`] = `"<button type=\\"button\\" class=\\"button secondary svelte-1b5wh91\\">  </button>"`;
+exports[`Button > Variant destructive renders > md 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-red-700 bg-red-700 text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-red-200/50 [&amp;:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50 h-10 text-base px-4 py-2 svelte-je0ft1\\">   </button>"`;
 
-exports[`Button > secondary disabled 1`] = `"<button type=\\"button\\" class=\\"button secondary svelte-1b5wh91\\">  </button>"`;
+exports[`Button > Variant destructive renders > sm 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-red-700 bg-red-700 text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-red-200/50 [&amp;:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50 h-9 text-sm px-4 py-1.5 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant destructive renders > trailing icon 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-red-700 bg-red-700 text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-red-200/50 [&amp;:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50 h-10 text-base px-4 py-2 svelte-je0ft1\\">  <span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span> </button>"`;
+
+exports[`Button > Variant destructive renders > xs 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-red-700 bg-red-700 text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-red-200/50 [&amp;:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50 h-8 text-xs px-2 py-1 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant ghost renders > count 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-[transparent] bg-[transparent] text-gray-600 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-indigo-100 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\">   <div class=\\"count flex w-fit flex-row items-center justify-center break-all rounded-sm p-1 text-sm leading-4 font-medium transition-colors badge absolute top-0 right-0 origin-bottom-left translate-y-[-10px] translate-x-[10px] svelte-1sxi5rd\\">10</div></button>"`;
+
+exports[`Button > Variant ghost renders > disabled 1`] = `"<button disabled=\\"\\" role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-[transparent] bg-[transparent] text-gray-600 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-indigo-100 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant ghost renders > leading icon 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-[transparent] bg-[transparent] text-gray-600 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-indigo-100 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\"><span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span>   </button>"`;
+
+exports[`Button > Variant ghost renders > lg 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-[transparent] bg-[transparent] text-gray-600 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-indigo-100 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600 h-11 text-lg px-5 py-2.5 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant ghost renders > loading 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-[transparent] bg-[transparent] text-gray-600 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-indigo-100 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\"><span class=\\"animate-spin\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>spinner</title><path d=\\"M7.375 6.40625C6.84375 6.40625 6.375 6.875 6.375 7.40625C6.375 7.96875 6.84375 8.40625 7.375 8.40625C7.9375 8.40625 8.375 7.96875 8.375 7.40625C8.375 6.875 7.9375 6.40625 7.375 6.40625ZM7.375 15.625C6.84375 15.625 6.375 16.0625 6.375 16.625C6.375 17.1562 6.84375 17.625 7.375 17.625C7.9375 17.625 8.375 17.1562 8.375 16.625C8.375 16.0625 7.9375 15.625 7.375 15.625ZM12 17.5C11.4375 17.5 11 17.9688 11 18.5C11 19.0625 11.4375 19.5 12 19.5C12.5312 19.5 13 19.0625 13 18.5C13 17.9688 12.5312 17.5 12 17.5ZM5.5 11C4.9375 11 4.5 11.4688 4.5 12C4.5 12.5625 4.9375 13 5.5 13C6.03125 13 6.5 12.5625 6.5 12C6.5 11.4688 6.03125 11 5.5 11ZM12 4.5C11.4375 4.5 11 4.96875 11 5.5C11 6.0625 11.4375 6.5 12 6.5C12.5312 6.5 13 6.0625 13 5.5C13 4.96875 12.5312 4.5 12 4.5ZM18.5 11C17.9375 11 17.5 11.4688 17.5 12C17.5 12.5625 17.9375 13 18.5 13C19.0312 13 19.5 12.5625 19.5 12C19.5 11.4688 19.0312 11 18.5 11ZM16.5938 15.625C16.0312 15.625 15.5938 16.0625 15.5938 16.625C15.5938 17.1562 16.0312 17.625 16.5938 17.625C17.125 17.625 17.5938 17.1562 17.5938 16.625C17.5938 16.0625 17.125 15.625 16.5938 15.625Z\\" fill=\\"currentcolor\\"></path></svg></span>   </button>"`;
+
+exports[`Button > Variant ghost renders > md 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-[transparent] bg-[transparent] text-gray-600 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-indigo-100 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant ghost renders > sm 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-[transparent] bg-[transparent] text-gray-600 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-indigo-100 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600 h-9 text-sm px-4 py-1.5 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant ghost renders > trailing icon 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-[transparent] bg-[transparent] text-gray-600 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-indigo-100 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\">  <span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span> </button>"`;
+
+exports[`Button > Variant ghost renders > xs 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-[transparent] bg-[transparent] text-gray-600 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-indigo-100 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600 h-8 text-xs px-2 py-1 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant primary renders > count 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-gray-900 bg-gradient-to-br text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:from-blue-100 [&amp;:not(:disabled):hover]:to-purple-100 [&amp;:not(:disabled):hover]:text-gray-900 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-gray-900 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\">   <div class=\\"count flex w-fit flex-row items-center justify-center break-all rounded-sm p-1 text-sm leading-4 font-medium transition-colors badge absolute top-0 right-0 origin-bottom-left translate-y-[-10px] translate-x-[10px] svelte-1sxi5rd\\">10</div></button>"`;
+
+exports[`Button > Variant primary renders > disabled 1`] = `"<button disabled=\\"\\" role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-gray-900 bg-gradient-to-br text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:from-blue-100 [&amp;:not(:disabled):hover]:to-purple-100 [&amp;:not(:disabled):hover]:text-gray-900 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-gray-900 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant primary renders > leading icon 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-gray-900 bg-gradient-to-br text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:from-blue-100 [&amp;:not(:disabled):hover]:to-purple-100 [&amp;:not(:disabled):hover]:text-gray-900 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-gray-900 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\"><span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span>   </button>"`;
+
+exports[`Button > Variant primary renders > lg 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-gray-900 bg-gradient-to-br text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:from-blue-100 [&amp;:not(:disabled):hover]:to-purple-100 [&amp;:not(:disabled):hover]:text-gray-900 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-gray-900 focus-visible:border-indigo-600 h-11 text-lg px-5 py-2.5 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant primary renders > loading 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-gray-900 bg-gradient-to-br text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:from-blue-100 [&amp;:not(:disabled):hover]:to-purple-100 [&amp;:not(:disabled):hover]:text-gray-900 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-gray-900 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\"><span class=\\"animate-spin\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>spinner</title><path d=\\"M7.375 6.40625C6.84375 6.40625 6.375 6.875 6.375 7.40625C6.375 7.96875 6.84375 8.40625 7.375 8.40625C7.9375 8.40625 8.375 7.96875 8.375 7.40625C8.375 6.875 7.9375 6.40625 7.375 6.40625ZM7.375 15.625C6.84375 15.625 6.375 16.0625 6.375 16.625C6.375 17.1562 6.84375 17.625 7.375 17.625C7.9375 17.625 8.375 17.1562 8.375 16.625C8.375 16.0625 7.9375 15.625 7.375 15.625ZM12 17.5C11.4375 17.5 11 17.9688 11 18.5C11 19.0625 11.4375 19.5 12 19.5C12.5312 19.5 13 19.0625 13 18.5C13 17.9688 12.5312 17.5 12 17.5ZM5.5 11C4.9375 11 4.5 11.4688 4.5 12C4.5 12.5625 4.9375 13 5.5 13C6.03125 13 6.5 12.5625 6.5 12C6.5 11.4688 6.03125 11 5.5 11ZM12 4.5C11.4375 4.5 11 4.96875 11 5.5C11 6.0625 11.4375 6.5 12 6.5C12.5312 6.5 13 6.0625 13 5.5C13 4.96875 12.5312 4.5 12 4.5ZM18.5 11C17.9375 11 17.5 11.4688 17.5 12C17.5 12.5625 17.9375 13 18.5 13C19.0312 13 19.5 12.5625 19.5 12C19.5 11.4688 19.0312 11 18.5 11ZM16.5938 15.625C16.0312 15.625 15.5938 16.0625 15.5938 16.625C15.5938 17.1562 16.0312 17.625 16.5938 17.625C17.125 17.625 17.5938 17.1562 17.5938 16.625C17.5938 16.0625 17.125 15.625 16.5938 15.625Z\\" fill=\\"currentcolor\\"></path></svg></span>   </button>"`;
+
+exports[`Button > Variant primary renders > md 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-gray-900 bg-gradient-to-br text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:from-blue-100 [&amp;:not(:disabled):hover]:to-purple-100 [&amp;:not(:disabled):hover]:text-gray-900 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-gray-900 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant primary renders > sm 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-gray-900 bg-gradient-to-br text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:from-blue-100 [&amp;:not(:disabled):hover]:to-purple-100 [&amp;:not(:disabled):hover]:text-gray-900 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-gray-900 focus-visible:border-indigo-600 h-9 text-sm px-4 py-1.5 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant primary renders > trailing icon 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-gray-900 bg-gradient-to-br text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:from-blue-100 [&amp;:not(:disabled):hover]:to-purple-100 [&amp;:not(:disabled):hover]:text-gray-900 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-gray-900 focus-visible:border-indigo-600 h-10 text-base px-4 py-2 svelte-je0ft1\\">  <span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span> </button>"`;
+
+exports[`Button > Variant primary renders > xs 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-gray-900 bg-gradient-to-br text-white [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:from-blue-100 [&amp;:not(:disabled):hover]:to-purple-100 [&amp;:not(:disabled):hover]:text-gray-900 [&amp;:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-gray-900 focus-visible:border-indigo-600 h-8 text-xs px-2 py-1 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant secondary renders > count 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-white text-gray-900 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-gray-900 [&amp;:not(:disabled):hover]:text-white [&amp;:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-gray-900 focus-visible:text-white focus-visible:border-white h-10 text-base px-4 py-2 svelte-je0ft1\\">   <div class=\\"count flex w-fit flex-row items-center justify-center break-all rounded-sm p-1 text-sm leading-4 font-medium transition-colors badge absolute top-0 right-0 origin-bottom-left translate-y-[-10px] translate-x-[10px] svelte-1sxi5rd\\">10</div></button>"`;
+
+exports[`Button > Variant secondary renders > disabled 1`] = `"<button disabled=\\"\\" role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-white text-gray-900 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-gray-900 [&amp;:not(:disabled):hover]:text-white [&amp;:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-gray-900 focus-visible:text-white focus-visible:border-white h-10 text-base px-4 py-2 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant secondary renders > leading icon 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-white text-gray-900 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-gray-900 [&amp;:not(:disabled):hover]:text-white [&amp;:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-gray-900 focus-visible:text-white focus-visible:border-white h-10 text-base px-4 py-2 svelte-je0ft1\\"><span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span>   </button>"`;
+
+exports[`Button > Variant secondary renders > lg 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-white text-gray-900 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-gray-900 [&amp;:not(:disabled):hover]:text-white [&amp;:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-gray-900 focus-visible:text-white focus-visible:border-white h-11 text-lg px-5 py-2.5 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant secondary renders > loading 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-white text-gray-900 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-gray-900 [&amp;:not(:disabled):hover]:text-white [&amp;:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-gray-900 focus-visible:text-white focus-visible:border-white h-10 text-base px-4 py-2 svelte-je0ft1\\"><span class=\\"animate-spin\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>spinner</title><path d=\\"M7.375 6.40625C6.84375 6.40625 6.375 6.875 6.375 7.40625C6.375 7.96875 6.84375 8.40625 7.375 8.40625C7.9375 8.40625 8.375 7.96875 8.375 7.40625C8.375 6.875 7.9375 6.40625 7.375 6.40625ZM7.375 15.625C6.84375 15.625 6.375 16.0625 6.375 16.625C6.375 17.1562 6.84375 17.625 7.375 17.625C7.9375 17.625 8.375 17.1562 8.375 16.625C8.375 16.0625 7.9375 15.625 7.375 15.625ZM12 17.5C11.4375 17.5 11 17.9688 11 18.5C11 19.0625 11.4375 19.5 12 19.5C12.5312 19.5 13 19.0625 13 18.5C13 17.9688 12.5312 17.5 12 17.5ZM5.5 11C4.9375 11 4.5 11.4688 4.5 12C4.5 12.5625 4.9375 13 5.5 13C6.03125 13 6.5 12.5625 6.5 12C6.5 11.4688 6.03125 11 5.5 11ZM12 4.5C11.4375 4.5 11 4.96875 11 5.5C11 6.0625 11.4375 6.5 12 6.5C12.5312 6.5 13 6.0625 13 5.5C13 4.96875 12.5312 4.5 12 4.5ZM18.5 11C17.9375 11 17.5 11.4688 17.5 12C17.5 12.5625 17.9375 13 18.5 13C19.0312 13 19.5 12.5625 19.5 12C19.5 11.4688 19.0312 11 18.5 11ZM16.5938 15.625C16.0312 15.625 15.5938 16.0625 15.5938 16.625C15.5938 17.1562 16.0312 17.625 16.5938 17.625C17.125 17.625 17.5938 17.1562 17.5938 16.625C17.5938 16.0625 17.125 15.625 16.5938 15.625Z\\" fill=\\"currentcolor\\"></path></svg></span>   </button>"`;
+
+exports[`Button > Variant secondary renders > md 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-white text-gray-900 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-gray-900 [&amp;:not(:disabled):hover]:text-white [&amp;:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-gray-900 focus-visible:text-white focus-visible:border-white h-10 text-base px-4 py-2 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant secondary renders > sm 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-white text-gray-900 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-gray-900 [&amp;:not(:disabled):hover]:text-white [&amp;:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-gray-900 focus-visible:text-white focus-visible:border-white h-9 text-sm px-4 py-1.5 svelte-je0ft1\\">   </button>"`;
+
+exports[`Button > Variant secondary renders > trailing icon 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-white text-gray-900 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-gray-900 [&amp;:not(:disabled):hover]:text-white [&amp;:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-gray-900 focus-visible:text-white focus-visible:border-white h-10 text-base px-4 py-2 svelte-je0ft1\\">  <span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>search</title><path d=\\"M19.8438 19.1562L15.4062 14.75C16.4062 13.5938 16.9688 12.125 16.9688 10.5C16.9688 6.9375 14.0312 4 10.4688 4C6.875 4 4 6.9375 4 10.5C4 14.0938 6.90625 17 10.4688 17C12.0625 17 13.5312 16.4375 14.6875 15.4375L19.0938 19.875C19.2188 19.9688 19.3438 20 19.5 20C19.625 20 19.75 19.9688 19.8438 19.875C20.0312 19.6875 20.0312 19.3438 19.8438 19.1562ZM10.5 16C7.4375 16 5 13.5312 5 10.5C5 7.46875 7.4375 5 10.5 5C13.5312 5 16 7.46875 16 10.5C16 13.5625 13.5312 16 10.5 16Z\\" fill=\\"currentcolor\\"></path></svg></span> </button>"`;
+
+exports[`Button > Variant secondary renders > xs 1`] = `"<button role=\\"button\\" type=\\"button\\" class=\\"relative flex w-fit items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed border-2 border-box transition-colors transition-shadow focus-visible:outline-none border-gray-900 bg-white text-gray-900 [&amp;:not(:disabled):hover]:shadow-focus [&amp;:not(:disabled):hover]:shadow-blue-600/50 [&amp;:not(:disabled):hover]:bg-gray-900 [&amp;:not(:disabled):hover]:text-white [&amp;:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-gray-900 focus-visible:text-white focus-visible:border-white h-8 text-xs px-2 py-1 svelte-je0ft1\\">   </button>"`;
diff --git a/src/lib/holocene/button.story.svelte b/src/lib/holocene/button.story.svelte
index 5d804fbba..4e2e3c5de 100644
--- a/src/lib/holocene/button.story.svelte
+++ b/src/lib/holocene/button.story.svelte
@@ -1,69 +1,83 @@
 <script lang="ts">
   import type { Hst as HST } from '@histoire/plugin-svelte';
-  import { logEvent } from 'histoire/client';
-  
-  import Button from './button.svelte';
+
+  import Button from '$lib/holocene/button.svelte';
+  import { type IconName, icons } from '$lib/holocene/icon/paths';
 
   let disabled = false;
-  let thin = false;
+  let variant: 'primary' | 'secondary' | 'destructive' | 'ghost' = 'primary';
+  let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+  let borderModifier: 'borderless' | 'borderless-left' | 'borderless-right';
+  let borderRadiusModifier: 'square' | 'square-left' | 'square-right';
   let loading = false;
+  let href: string;
+  let leadingIcon: IconName;
+  let trailingIcon: IconName;
+  let count: number;
 
   export let Hst: HST;
 </script>
 
 <Hst.Story>
-  <Hst.Variant title="Primary">
-    <Button
-      on:click={(event) => logEvent('click', event)}
-      bind:loading
-      bind:thin
-      bind:disabled
-      variant="primary">Primary</Button
-    >
-  </Hst.Variant>
-  <Hst.Variant title="Secondary">
-    <Button
-      on:click={(event) => logEvent('click', event)}
-      bind:loading
-      bind:thin
-      bind:disabled
-      variant="secondary">Secondary</Button
-    >
-  </Hst.Variant>
-  <Hst.Variant title="Destructive">
-    <Button
-      on:click={(event) => logEvent('click', event)}
-      bind:loading
-      bind:thin
-      bind:disabled
-      variant="destructive">Destructive</Button
-    >
-  </Hst.Variant>
-  <Hst.Variant title="Login">
+  <div class="flex items-center justify-center p-4">
     <Button
-      on:click={(event) => logEvent('click', event)}
-      bind:loading
-      bind:thin
-      bind:disabled
-      variant="login">Login</Button
+      {variant}
+      {size}
+      {borderModifier}
+      {borderRadiusModifier}
+      {disabled}
+      {loading}
+      {href}
+      {leadingIcon}
+      {trailingIcon}
+      {count}>Click Me</Button
     >
-  </Hst.Variant>
-  <Hst.Variant title="Link">
-    <Button variant="link">A Link</Button>
-  </Hst.Variant>
-  <Hst.Variant title="Anchor">
-    <Button href="https://temporal.io">An Anchor</Button>
-  </Hst.Variant>
-  <Hst.Variant title="Icon">
-    <Button icon="retry">Retry</Button>
-  </Hst.Variant>
-  <Hst.Variant title="Badge">
-    <Button count={3}>Save</Button>
-  </Hst.Variant>
+  </div>
 
   <svelte:fragment slot="controls">
+    <Hst.Select
+      bind:value={variant}
+      title="Variant"
+      options={['primary', 'secondary', 'destructive', 'ghost']}
+    />
+    <Hst.Select
+      bind:value={size}
+      title="Size"
+      options={['xs', 'sm', 'md', 'lg']}
+    />
+    <Hst.Select
+      bind:value={leadingIcon}
+      title="Leading Icon"
+      options={[{ label: 'None', value: '' }, ...Object.keys(icons)]}
+    />
+    <Hst.Select
+      bind:value={trailingIcon}
+      title="Trailing Icon"
+      options={[{ label: 'None', value: '' }, ...Object.keys(icons)]}
+    />
+    <Hst.Select
+      bind:value={borderModifier}
+      title="Border Modifier"
+      options={[
+        { label: 'None', value: '' },
+        'borderless',
+        'borderless-left',
+        'borderless-right',
+      ]}
+    />
+    <Hst.Select
+      bind:value={borderRadiusModifier}
+      title="Border Radius Modifier"
+      options={[
+        { label: 'None', value: '' },
+        'square',
+        'square-left',
+        'square-right',
+      ]}
+    />
+    <Hst.Text bind:value={href} title="Href" />
+    <Hst.Number bind:value={count} title="Count" />
     <Hst.Checkbox bind:value={disabled} title="Disabled" />
-    <Hst.Checkbox bind:value={thin} title="Thin" />
     <Hst.Checkbox bind:value={loading} title="Loading" />
   </svelte:fragment>
 </Hst.Story>
diff --git a/src/lib/holocene/button.svelte b/src/lib/holocene/button.svelte
index 02db646ff..caacb17d4 100644
--- a/src/lib/holocene/button.svelte
+++ b/src/lib/holocene/button.svelte
@@ -1,222 +1,140 @@
-<script lang="ts" context="module">
-  type ButtonVariant =
-    | 'primary'
-    | 'secondary'
-    | 'search'
-    | 'destructive'
-    | 'login'
-    | 'ghost'
-    | 'link'
-    | 'menu';
+<script lang="ts">
+  import type {
+    HTMLAnchorAttributes,
+    HTMLButtonAttributes,
+  } from 'svelte/elements';
 
-  export interface ButtonProps extends HTMLButtonAttributes {
-    variant?: ButtonVariant;
-    id?: string;
+  import { cva, type VariantProps } from 'class-variance-authority';
+
+  import Badge from '$lib/holocene/badge.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import type { IconName } from '$lib/holocene/icon/paths';
+
+  const buttonStyles = cva(
+    [
+      'relative',
+      'flex',
+      'w-fit',
+      'items-center',
+      'justify-center',
+      'gap-2',
+      'rounded-lg',
+      'disabled:opacity-50',
+      'disabled:cursor-not-allowed',
+      'border-2',
+      'border-box',
+      'transition-colors',
+      'transition-shadow',
+      'focus-visible:outline-none',
+    ],
+    {
+      variants: {
+        variant: {
+          primary:
+            'border-gray-900 bg-gray-900 bg-gradient-to-br text-white [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-blue-600/50 [&:not(:disabled):hover]:from-blue-100 [&:not(:disabled):hover]:to-purple-100 [&:not(:disabled):hover]:text-gray-900 [&:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-gray-900 focus-visible:border-indigo-600',
+          secondary:
+            'border-gray-900 bg-white text-gray-900 [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-blue-600/50 [&:not(:disabled):hover]:bg-gray-900 [&:not(:disabled):hover]:text-white [&:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-gray-900 focus-visible:text-white focus-visible:border-white',
+          destructive:
+            'border-red-700 bg-red-700 text-white [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-red-200/50 [&:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50',
+          ghost:
+            'border-[transparent] bg-[transparent] text-gray-600 [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-blue-600/50 [&:not(:disabled):hover]:bg-indigo-100 [&:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600',
+          'table-header': 'border-gray-900 bg-gray-900 text-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:border-white',
+        },
+        size: {
+          xs: 'h-8 text-xs px-2 py-1',
+          sm: 'h-9 text-sm px-4 py-1.5',
+          md: 'h-10 text-base px-4 py-2',
+          lg: 'h-11 text-lg px-5 py-2.5',
+        },
+        borderModifier: {
+          borderless: 'border-0',
+          'borderless-left': 'border-l-0',
+          'borderless-right': 'border-r-0',
+        },
+        borderRadiusModifier: {
+          square: 'rounded-none',
+          'square-left': 'rounded-l-none',
+          'square-right': 'rounded-r-none',
+        },
+      },
+      defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+      },
+    },
+  );
+
+  type BaseProps = {
     disabled?: boolean;
-    thin?: boolean;
     loading?: boolean;
-    active?: boolean;
-    large?: boolean;
-    icon?: IconName;
-    iconClass?: string;
+    leadingIcon?: IconName;
+    trailingIcon?: IconName;
     count?: number;
-    unround?: boolean;
-    unroundRight?: boolean;
-    unroundLeft?: boolean;
-    noBorderRight?: boolean;
-    noBorderLeft?: boolean;
-    as?: 'button' | 'anchor';
-    href?: string;
-    target?: '_self' | '_external';
+    id?: string;
+    active?: boolean;
     'data-testid'?: string;
-  }
-</script>
+  };
 
-<script lang="ts">
-  import type { HTMLButtonAttributes } from 'svelte/elements';
+  type ButtonWithoutHrefProps = BaseProps & HTMLButtonAttributes;
+  type ButtonWithHrefProps = BaseProps &
+    HTMLAnchorAttributes & {
+      href: string;
+      target?: HTMLAnchorAttributes['target'];
+    };
 
-  import Badge from '$lib/holocene/badge.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
-  import type { IconName } from '$lib/holocene/icon/paths';
+  type ButtonStyles = VariantProps<typeof buttonStyles>;
 
-  type $$Props = ButtonProps & HTMLButtonAttributes;
+  type $$Props = (ButtonWithoutHrefProps | ButtonWithHrefProps) & ButtonStyles;
 
-  let className = '';
-  export { className as class };
+  export let variant: ButtonStyles['variant'] = 'primary';
+  export let size: ButtonStyles['size'] = 'md';
+  export let borderModifier: ButtonStyles['borderModifier'] = null;
+  export let borderRadiusModifier: ButtonStyles['borderRadiusModifier'] = null;
   export let disabled = false;
-  export let variant: ButtonVariant = 'primary';
-  export let thin = false;
   export let loading = false;
-  export let href: string = null;
-  export let target: '_self' | '_external' = '_self';
-  export let active = false;
-  export let large = false;
-  export let as: 'button' | 'anchor' = href ? 'anchor' : 'button';
-  export let icon: IconName = null;
-  export let iconClass: string = null;
+  export let leadingIcon: IconName = null;
+  export let trailingIcon: IconName = null;
   export let count = 0;
-  export let unround = false;
-  export let unroundRight = false;
-  export let unroundLeft = false;
-  export let noBorderRight = false;
-  export let noBorderLeft = false;
   export let id: string = null;
+  export let href: string = null;
+  export let target: string = null;
+  export let active = false;
 </script>
 
-{#if as === 'button'}
-  <button
-    on:click|stopPropagation
-    type="button"
-    class="button {variant} {className}"
-    class:selected={active}
-    class:large
-    class:thin
-    class:unround
-    class:unroundRight
-    class:unroundLeft
-    class:noBorderRight
-    class:noBorderLeft
-    {disabled}
-    {id}
-    {...$$restProps}
-  >
-    {#if icon || loading}
-      <span class:animate-spin={loading}>
-        <Icon name={loading ? 'spinner' : icon} class={iconClass} />
-      </span>
-    {/if}
-    <slot />
-    {#if count > 0}
-      <Badge
-        class="badge absolute top-0 right-0 origin-bottom-left translate-y-[-10px] translate-x-[10px]"
-        type="count">{count}</Badge
-      >
-    {/if}
-  </button>
-{:else}
-  <a
-    {href}
-    on:click|stopPropagation
-    class="button whitespace-nowrap {variant} {className}"
-    class:selected={active}
-    class:large
-    class:disabled
-    class:thin
-    class:unround
-    class:unroundRight
-    class:unroundLeft
-    class:noBorderRight
-    class:noBorderLeft
-    {target}
-    {id}
-    {...$$restProps}
-  >
-    {#if icon || loading}
-      <span class:animate-spin={loading}>
-        <Icon name={loading ? 'spinner' : icon} />
-      </span>
-    {/if}
-    <slot />
-  </a>
-{/if}
+<svelte:element
+  this={href ? 'a' : 'button'}
+  {target}
+  {href}
+  {disabled}
+  {id}
+  role="button"
+  type="button"
+  class:active
+  on:click|stopPropagation
+  class={buttonStyles({ variant, size, borderModifier, borderRadiusModifier })}
+  {...$$restProps}
+>
+  {#if leadingIcon || loading}
+    <span class:animate-spin={loading}>
+      <Icon name={loading ? 'spinner' : leadingIcon} />
+    </span>
+  {/if}
+  <slot />
+  {#if trailingIcon}
+    <span>
+      <Icon name={trailingIcon} />
+    </span>
+  {/if}
+  {#if count > 0}
+    <Badge
+      class="badge absolute top-0 right-0 origin-bottom-left translate-y-[-10px] translate-x-[10px]"
+      type="count">{count}</Badge
+    >
+  {/if}
+</svelte:element>
 
 <style lang="postcss">
-  .button {
-    @apply relative flex w-fit items-center justify-center gap-2 rounded-lg font-secondary text-sm;
-  }
-
-  .primary,
-  .secondary,
-  .destructive,
-  .login {
-    @apply border-2 py-2.5 px-4 transition-colors;
-  }
-
-  .search {
-    @apply border py-2.5 px-4 h-10 transition-colors;
-  }
-
-  .button:disabled {
-    @apply cursor-not-allowed;
-  }
-
-  a.disabled {
-    @apply pointer-events-none opacity-75 hover:border-gray-800 hover:bg-white hover:text-gray-800;
-  }
-
-  .large {
-    @apply text-lg;
-  }
-
-  .primary,
-  .login {
-    @apply border-primary bg-primary bg-gradient-to-br text-white hover:from-blue-100 hover:to-purple-100 hover:text-primary;
-  }
-
-  .primary:disabled,
-  .login:disabled {
-    @apply text-white opacity-75 hover:from-primary hover:to-primary;
-  }
-
-  .secondary,
-  .search {
-    @apply border-gray-800 bg-white text-gray-800 hover:border-primary hover:bg-primary hover:text-white;
-  }
-
-  .secondary:disabled,
-  .search:disabled {
-    @apply opacity-75 hover:border-gray-800 hover:bg-white hover:text-gray-800;
-  }
-
-  .destructive {
-    @apply border-danger bg-danger px-5 text-white hover:border-red-900 hover:bg-red-900;
-  }
-
-  .destructive:disabled {
-    @apply opacity-50 hover:border-danger hover:bg-danger;
-  }
-
-  .link {
-    @apply border-0 bg-none p-0 font-primary text-sm text-blue-700 leading-5 font-semibold hover:underline shadow-none;
-  }
-
-  .ghost {
-    @apply bg-none py-2.5 px-4 font-primary border border-[transparent] text-sm text-gray-700 leading-5 font-medium hover:bg-gray-200 hover:border hover:border-indigo-600 focus:bg-gray-200 focus:border focus:border-indigo-600 hover:shadow-focus hover:shadow-blue-600/50;
-  }
-
-  .ghost:hover {
-    box-shadow: 0 0 0 4px #a4bcfd;
-  }
-
-  .selected {
-    @apply bg-gradient-to-br from-blue-100 to-purple-100 text-gray-900;
-  }
-
-  .login {
-    @apply mx-auto;
-  }
-
-  .thin {
-    @apply h-8 py-1;
-  }
-
-  .unround {
-    @apply rounded-none;
-  }
-
-  .unroundLeft {
-    @apply rounded-tl-none rounded-bl-none;
-  }
-
-  .unroundRight {
-    @apply rounded-tr-none rounded-br-none;
-  }
-
-  .noBorderLeft {
-    @apply border-l-0;
-  }
-
-  .noBorderRight {
-    @apply border-r-0;
+  .active {
+    @apply bg-indigo-100;
   }
 </style>
diff --git a/src/lib/holocene/button.test.ts b/src/lib/holocene/button.test.ts
index ece60f00d..d9503a274 100644
--- a/src/lib/holocene/button.test.ts
+++ b/src/lib/holocene/button.test.ts
@@ -4,6 +4,14 @@ import Button from '$lib/holocene/button.svelte';
 
 let host: HTMLElement;
 
+const variants: ('primary' | 'secondary' | 'destructive' | 'ghost')[] = [
+  'primary',
+  'secondary',
+  'destructive',
+  'ghost',
+];
+const sizes: ('xs' | 'sm' | 'md' | 'lg')[] = ['xs', 'sm', 'md', 'lg'];
+
 beforeEach(() => {
   host = document.createElement('div');
   host.setAttribute('id', 'host');
@@ -15,89 +23,71 @@ afterEach(() => {
 });
 
 describe('Button', () => {
-  test('default', async () => {
-    const instance = new Button({ target: host, props: {} });
-
-    expect(instance).toBeTruthy();
+  describe.each(variants)('Variant %s renders', (variant) => {
+    test.each(sizes)('%s', (size) => {
+      const instance = new Button({
+        target: host,
+        props: { variant, size },
+      });
 
-    expect(host.innerHTML).toMatchSnapshot();
-  });
+      expect(instance).toBeTruthy();
 
-  test('disabled', async () => {
-    const instance = new Button({
-      target: host,
-      props: {
-        disabled: true,
-      },
+      expect(host.innerHTML).toMatchSnapshot();
     });
 
-    expect(instance).toBeTruthy();
+    test('disabled', () => {
+      const instance = new Button({
+        target: host,
+        props: { variant, disabled: true },
+      });
 
-    expect(host.innerHTML).toMatchSnapshot();
-  });
+      expect(instance).toBeTruthy();
 
-  test('secondary', async () => {
-    const instance = new Button({
-      target: host,
-      props: {
-        variant: 'secondary',
-      },
+      expect(host.innerHTML).toMatchSnapshot();
     });
 
-    expect(instance).toBeTruthy();
+    test('count', () => {
+      const instance = new Button({
+        target: host,
+        props: { variant, count: 10 },
+      });
 
-    expect(host.innerHTML).toMatchSnapshot();
-  });
+      expect(instance).toBeTruthy();
 
-  test('secondary disabled', async () => {
-    const instance = new Button({
-      target: host,
-      props: {
-        variant: 'secondary',
-      },
+      expect(host.innerHTML).toMatchSnapshot();
     });
 
-    expect(instance).toBeTruthy();
+    test('loading', () => {
+      const instance = new Button({
+        target: host,
+        props: { variant, loading: true },
+      });
 
-    expect(host.innerHTML).toMatchSnapshot();
-  });
+      expect(instance).toBeTruthy();
 
-  test('loading', async () => {
-    const instance = new Button({
-      target: host,
-      props: {
-        loading: true,
-      },
+      expect(host.innerHTML).toMatchSnapshot();
     });
 
-    expect(instance).toBeTruthy();
+    test('leading icon', () => {
+      const instance = new Button({
+        target: host,
+        props: { variant, leadingIcon: 'search' },
+      });
 
-    expect(host.innerHTML).toMatchSnapshot();
-  });
+      expect(instance).toBeTruthy();
 
-  test('icon', async () => {
-    const instance = new Button({
-      target: host,
-      props: {
-        icon: 'download',
-      },
+      expect(host.innerHTML).toMatchSnapshot();
     });
 
-    expect(instance).toBeTruthy();
+    test('trailing icon', () => {
+      const instance = new Button({
+        target: host,
+        props: { variant, trailingIcon: 'search' },
+      });
 
-    expect(host.innerHTML).toMatchSnapshot();
-  });
+      expect(instance).toBeTruthy();
 
-  test('class', async () => {
-    const instance = new Button({
-      target: host,
-      props: {
-        class: 'custom-class',
-      },
+      expect(host.innerHTML).toMatchSnapshot();
     });
-
-    expect(instance).toBeTruthy();
-
-    expect(host.innerHTML).toMatchSnapshot();
   });
 });
diff --git a/src/lib/holocene/chip.svelte b/src/lib/holocene/chip.svelte
index 75fbe4460..ff273bd64 100644
--- a/src/lib/holocene/chip.svelte
+++ b/src/lib/holocene/chip.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
-  import IconButton from './icon-button.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
 
   export let intent: 'warning' | 'default' = 'default';
   export let button = false;
@@ -23,17 +23,17 @@
   {:else}
     <slot />
   {/if}
-  <IconButton
-    label={removeButtonLabel}
-    class="h-4 w-4 text-gray-700"
-    icon="close"
+  <button
+    aria-label={removeButtonLabel}
     on:click={handleRemove}
-  />
+  >
+  <Icon name="close" />
+</button>
 </span>
 
 <style lang="postcss">
   .chip {
-    @apply flex w-fit min-w-fit h-fit flex-row items-center justify-between break-all whitespace-nowrap rounded-md border border-gray-300 bg-gray-50 p-1 text-sm gap-1 text-gray-700;
+    @apply flex w-fit min-w-fit h-8 flex-row items-center justify-between break-all whitespace-nowrap rounded-md border border-gray-300 bg-gray-50 p-1 text-sm gap-1 text-gray-700;
 
     :global(.icon-button) {
       @apply ml-1 h-auto w-fit;
diff --git a/src/lib/holocene/combobox/combobox.story.svelte b/src/lib/holocene/combobox/combobox.story.svelte
index 4c852135d..d291379cc 100644
--- a/src/lib/holocene/combobox/combobox.story.svelte
+++ b/src/lib/holocene/combobox/combobox.story.svelte
@@ -2,6 +2,7 @@
   import type { Hst as HST } from '@histoire/plugin-svelte';
   
   import Combobox from '$lib/holocene/combobox/combobox.svelte';
+  import { type IconName, icons } from '$lib/holocene/icon/paths';
   export let Hst: HST;
 
   let stringOptions = [
@@ -22,15 +23,18 @@
 
   let value = stringOptions[0];
   let customValue = customOptions[0].value;
+  let leadingIcon: IconName = 'search';
 </script>
 
 <Hst.Story title="combobox">
   <Hst.Variant title="a combobox with string options (uncontrolled)">
     <Combobox
       bind:value
+      {leadingIcon}
       label="Select a Language"
       placeholder="Type a Language..."
       noResultsText="No Results"
+      toggleLabel="Show Results"
       id="combobox-1"
       options={stringOptions}
     />
@@ -39,12 +43,18 @@
   <Hst.Variant title="a combobox with custom options (uncontrolled)">
     <Combobox
       bind:value={customValue}
+      {leadingIcon}
       label="Select a Language"
       noResultsText="No Results"
+      toggleLabel="Show Results"
       id="combobox-2"
       options={customOptions}
       optionLabelKey="label"
       optionValueKey="value"
     />
   </Hst.Variant>
+
+  <svelte:fragment slot="controls">
+    <Hst.Select bind:value={leadingIcon} title="Leading Icon" options={[{ label: 'None', value: '' }, ...Object.keys(icons)]} />
+  </svelte:fragment>
 </Hst.Story>
diff --git a/src/lib/holocene/combobox/combobox.svelte b/src/lib/holocene/combobox/combobox.svelte
index f254f1033..45fb42f02 100644
--- a/src/lib/holocene/combobox/combobox.svelte
+++ b/src/lib/holocene/combobox/combobox.svelte
@@ -10,7 +10,6 @@
 
   import Icon from '../icon/icon.svelte';
   import type { IconName } from '../icon/paths';
-  import IconButton from '../icon-button.svelte';
 
   type T = $$Generic;
 
@@ -114,6 +113,7 @@
       closeList();
     } else {
       openList();
+      inputElement.focus();
     }
   };
 
@@ -244,14 +244,12 @@
     {label}
   </label>
 
-  <div
-    class="text-sm w-full h-10 flex flex-row items-center rounded-lg bg-white border border-primary"
-  >
+  <div class="combobox-wrapper">
     {#if leadingIcon}
       <Icon
         width={20}
         height={20}
-        class="mx-3 shrink-0 text-gray-500"
+        class="shrink-0 text-gray-500 ml-2"
         name={leadingIcon}
       />
     {/if}
@@ -281,15 +279,16 @@
       bind:this={inputElement}
       {...$$restProps}
     />
-    <IconButton
-      label={toggleLabel}
-      class="h-full w-10 shrink-0"
+    <button
+      aria-label={toggleLabel}
+      class="combobox-button"
       tabindex={-1}
-      icon={$open ? 'chevron-up' : 'chevron-down'}
       aria-controls="{id}-listbox"
       aria-expanded={$open}
       on:click={toggleList}
-    />
+    >
+      <Icon name={$open ? 'chevron-up' : 'chevron-down'} />
+  </button>
   </div>
 
   <Menu bind:menuElement id="{id}-listbox" role="listbox" class="w-full">
@@ -324,7 +323,15 @@
     @apply font-secondary text-sm font-normal;
   }
 
+  .combobox-wrapper {
+    @apply text-sm w-full h-10 flex flex-row items-center rounded-lg bg-white border border-primary focus-within:border-indigo-600 focus-within:outline-none focus-within:shadow-focus focus-within:shadow-blue-600/50;
+  }
+
   .combobox-input {
-    @apply h-full w-full font-primary focus:outline-none focus:border-indigo-600;
+    @apply grow h-full w-full font-primary focus:outline-none ml-2;
+  }
+
+  .combobox-button {
+    @apply rounded-full shrink-0 bg-gradient-to-br hover:from-blue-100 hover:to-purple-100 flex justify-center items-center mx-2;
   }
 </style>
diff --git a/src/lib/holocene/icon-button.svelte b/src/lib/holocene/icon-button.svelte
index 29147b2d3..a16ae7493 100644
--- a/src/lib/holocene/icon-button.svelte
+++ b/src/lib/holocene/icon-button.svelte
@@ -5,44 +5,32 @@
   import type { IconName } from '$lib/holocene/icon/paths';
 
   interface $$Props extends HTMLButtonAttributes {
-    icon?: IconName;
-    classes?: string;
+    icon: IconName;
     'data-testid'?: string;
-    hoverable?: boolean;
     label: string;
   }
 
+  let className = '';
+  export { className as class };
   export let icon: IconName = null;
   export let label = '';
-  export let classes = '';
-  export let hoverable = false;
 </script>
 
-<button
-  type="button"
-  class="icon-button"
-  class:hoverable
-  on:click
-  data-testid={$$props['data-testid']}
-  aria-label={label}
-  {...$$restProps}
->
-  {#if icon}
-    <div class="flex items-center justify-center gap-2 {classes}">
-      <Icon name={icon} class="h-auto" />
-      <slot />
-    </div>
-  {:else}
-    <slot />
-  {/if}
+<button type="button" class="icon-button {className}" on:click aria-label={label} {...$$restProps}>
+  <Icon name={icon} class="h-auto" />
 </button>
 
+
 <style lang="postcss">
   .icon-button {
-    @apply inline-block w-auto rounded-full text-sm;
+    @apply p-1 inline-block rounded-full border-2 border-[transparent];
+
+    &:not(:disabled) {
+      @apply bg-gradient-to-br hover:text-gray-900 hover:border-indigo-600 hover:shadow-focus hover:shadow-blue-600/50 hover:from-blue-100 hover:to-purple-100 focus-visible:text-gray-900 focus-visible:outline-none focus-visible:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100
+    }
 
-    &.hoverable {
-      @apply hover:bg-gray-300;
+    &:disabled {
+      @apply cursor-not-allowed opacity-50;
     }
   }
 </style>
diff --git a/src/lib/holocene/icon/__snapshots__/icon.test.ts.snap b/src/lib/holocene/icon/__snapshots__/icon.test.ts.snap
index 1204cd38a..2086ef3d4 100644
--- a/src/lib/holocene/icon/__snapshots__/icon.test.ts.snap
+++ b/src/lib/holocene/icon/__snapshots__/icon.test.ts.snap
@@ -92,6 +92,8 @@ exports[`Icon > json renders 1`] = `"<svg width=\\"24\\" height=\\"24\\" viewBox
 
 exports[`Icon > labs renders 1`] = `"<svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title></title><g transform=\\"scale(0.05838709677 0.04968944193) translate(60, 0)\\"><path d=\\"M82.492,89.847 C82.492,76.718 91.546,66.036 104.016,63.306 C106.053,62.842 108.421,62.597 110.623,62.597 L192.887,62.597 C208.53,62.597 220.783,74.566 220.783,89.847 C220.783,100.556 214.745,109.646 205.74,114.086 C204.669,114.631 203.408,115.131 202.255,115.535 C201.129,115.93 199.928,116.395 198.735,116.645 C198.192,116.776 197.644,116.895 197.089,117.001 C196.089,120.532 194.49,129.173 193.959,149.217 C193.553,164.515 194,178.615 194.005,178.773 L194.014,178.993 L194.011,179.214 C194.005,179.728 193.667,221.122 209.606,248.869 C259.301,335.374 282.775,380.992 293.758,405.595 C303.138,426.621 303.233,431.959 303.263,434.959 L303.269,435.63 C303.28,436.739 303.28,437.837 303.271,438.933 C303.269,439.155 303.266,439.404 303.263,439.626 C303.139,449.506 302.085,460.027 292.995,468.039 C283.254,476.625 265.84,480.459 236.59,480.459 L66.81,480.459 C65.74,480.459 64.563,480.453 63.526,480.442 C36.175,480.172 19.666,476.31 10.282,468.04 C1.199,460.033 0.139,449.524 0.014,439.65 C0.011,439.423 0.009,439.171 0.007,438.946 C-0.002,437.845 -0.002,436.744 0.008,435.631 L0.013,434.962 C0.043,431.959 0.136,426.614 9.547,405.529 C20.543,380.911 44.02,335.296 93.67,248.869 C109.69,220.984 109.272,179.62 109.266,179.206 L109.263,178.987 L109.269,178.766 C109.277,178.561 109.721,164.487 109.316,149.217 C108.784,129.148 107.182,120.505 106.18,116.98 C105.81,116.91 105.442,116.834 105.078,116.752 C103.855,116.521 102.622,116.071 101.469,115.688 C100.279,115.294 98.984,114.802 97.881,114.259 C88.684,109.879 82.492,100.693 82.492,89.847 z M100.785,89.847 C100.785,94.829 104.761,98.607 110.055,98.707 C113.251,98.769 116.321,100.105 118.728,102.45 C119.694,103.392 120.656,104.583 121.56,106.291 C124.374,111.652 126.786,122.128 127.548,146.838 C128.035,162.595 127.62,177.178 127.56,179.159 C127.56,179.215 127.56,179.288 127.561,179.36 C127.589,184.096 127.327,223.785 111.523,254.322 C110.862,255.601 110.17,256.87 109.45,258.125 C101.146,272.581 79.877,309.609 59.782,346.845 C58.834,348.6 57.889,350.356 56.949,352.111 C30.383,401.64 21.659,422.545 19.264,430.669 C19.186,430.926 19.112,431.2 19.045,431.431 C18.449,433.537 18.301,434.68 18.292,435.293 L18.292,435.964 C18.294,445.621 18.496,450.895 22.378,454.316 C28.285,459.523 43.125,462.157 66.579,462.166 L236.695,462.166 C260.15,462.157 274.991,459.523 280.898,454.316 C284.779,450.897 284.982,445.624 284.984,435.97 L284.984,435.292 C284.973,434.662 284.818,433.474 284.181,431.256 C284.116,431.039 284.047,430.78 283.972,430.541 C281.531,422.34 272.762,401.399 246.336,352.129 C245.31,350.213 244.278,348.297 243.244,346.382 C223.239,309.334 202.124,272.569 193.846,258.16 C192.956,256.61 192.111,255.04 191.311,253.455 C175.714,222.587 175.683,182.887 175.716,179.168 C175.715,179.112 175.713,179.036 175.71,178.96 C175.632,176.354 175.254,162.15 175.727,146.838 C176.502,121.723 178.981,111.306 181.858,106.023 C182.715,104.461 183.622,103.344 184.534,102.451 C184.628,102.358 184.723,102.267 184.82,102.178 C187.184,99.999 190.15,98.768 193.225,98.705 C198.517,98.604 202.492,94.827 202.492,89.847 C202.492,84.746 198.357,80.89 192.888,80.89 L117.397,80.89 C117.289,80.89 110.182,80.916 110.096,80.963 C104.779,81.059 100.786,84.849 100.786,89.847\\" fill=\\"currentColor\\" id=\\"beaker\\"></path><path d=\\"M85.245,318.126 C86.159,317.255 90.937,314.164 95.434,313.083 C96.488,312.83 97.547,312.697 98.557,312.721 C100.65,312.77 102.877,313.588 105.325,314.764 C109.807,316.913 115.076,320.248 121.778,322.162 C123.681,322.707 125.979,322.859 128.564,322.72 C137.558,322.242 149.929,318.235 160.398,315.152 C163.556,314.222 166.54,313.377 169.205,312.739 C170.522,312.423 171.961,312.217 173.49,312.109 C175.185,311.989 177.024,311.992 178.966,312.098 C192.834,312.871 211.335,318.808 218.499,320.941 C218.99,321.087 219.426,321.215 219.805,321.322 C262.591,398.661 274.155,426.885 276.064,434.014 C276.598,436.008 276.482,439.582 276.39,441.965 C276.381,442.155 276.376,442.34 276.37,442.52 C276.281,444.734 275.32,446.875 273.809,448.32 C273.713,448.406 273.614,448.516 273.513,448.597 C272.775,449.259 271.88,449.784 270.879,450.104 C261.414,453.136 247.077,453.661 236.588,453.661 L66.688,453.661 C56.222,453.661 41.866,453.138 32.398,450.105 C31.405,449.787 30.519,449.265 29.783,448.612 C28.088,447.106 26.994,444.789 26.912,442.461 C26.754,437.896 26.79,435.565 27.21,433.975 C29.343,426.028 36.422,405.436 85.245,318.125\\" fill=\\"currentColor\\" id=\\"liquid\\"></path></g></svg>"`;
 
+exports[`Icon > link renders 1`] = `"<svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title></title><path d=\\"M10.1898 12.906C10.5785 13.4262 11.0744 13.8566 11.6439 14.1681C12.2134 14.4795 12.8431 14.6647 13.4904 14.7111C14.1377 14.7575 14.7874 14.664 15.3954 14.437C16.0034 14.21 16.5555 13.8547 17.0143 13.3953L19.7296 10.6772C20.554 9.82282 21.0101 8.67851 20.9998 7.49073C20.9895 6.30296 20.5136 5.16675 19.6745 4.32684C18.8354 3.48692 17.7004 3.01049 16.5138 3.00017C15.3272 2.98985 14.184 3.44646 13.3305 4.27165L11.7737 5.82095M13.8102 11.094C13.4215 10.5738 12.9256 10.1434 12.3561 9.83195C11.7866 9.5205 11.1569 9.33529 10.5096 9.28889C9.86232 9.24248 9.21264 9.33597 8.60462 9.563C7.99661 9.79004 7.44449 10.1453 6.9857 10.6047L4.27037 13.3228C3.44601 14.1772 2.98986 15.3215 3.00017 16.5093C3.01048 17.697 3.48643 18.8332 4.3255 19.6732C5.16457 20.5131 6.29964 20.9895 7.48622 20.9998C8.6728 21.0101 9.81596 20.5535 10.6695 19.7283L12.2172 18.1791\\" stroke=\\"currentcolor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path></svg>"`;
+
 exports[`Icon > lock renders 1`] = `"<svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title></title><path d=\\"M16.6875 10.9375H15.75V8.125C15.75 6.04492 14.0508 4.375 12 4.375C9.91992 4.375 8.25 6.07422 8.25 8.125V10.9082L7.3125 10.9375C6.25781 10.9375 5.4375 11.7578 5.4375 12.8125V17.5C5.4375 18.5254 6.25781 19.375 7.3125 19.375H16.6875C17.7129 19.375 18.5625 18.5254 18.5625 17.5V12.8125C18.5625 11.7871 17.7129 10.9375 16.6875 10.9375ZM9.1875 8.125C9.1875 6.60156 10.4473 5.3125 12 5.3125C13.5234 5.3125 14.8125 6.60156 14.8125 8.125V10.9375H9.1875V8.125ZM17.625 17.5C17.625 18.0273 17.1855 18.4375 16.6875 18.4375H7.3125C6.78516 18.4375 6.375 18.0273 6.375 17.5V12.8125C6.375 12.3145 6.78516 11.875 7.3125 11.875H16.6875C17.1855 11.875 17.625 12.3145 17.625 12.8125V17.5Z\\" fill=\\"currentcolor\\"></path></svg>"`;
 
 exports[`Icon > logout renders 1`] = `"<svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title></title><path d=\\"M19.8438 11.6562L15.3438 7.15625C15.1562 6.96875 14.8125 6.96875 14.625 7.15625C14.4375 7.34375 14.4375 7.6875 14.625 7.875L18.2812 11.5H9.5C9.21875 11.5 9 11.75 9 12C9 12.2812 9.21875 12.5 9.5 12.5H18.2812L14.625 16.1562C14.4375 16.3438 14.4375 16.6875 14.625 16.875C14.8125 17.0625 15.1562 17.0625 15.3438 16.875L19.8438 12.375C19.9375 12.2812 20 12.1562 20 12C20 11.875 19.9375 11.75 19.8438 11.6562ZM9.5 18H6.5C5.65625 18 5 17.3438 5 16.5V7.5C5 6.6875 5.65625 6 6.5 6H9.5C9.75 6 10 5.78125 10 5.5C10 5.25 9.75 5 9.5 5H6.5C5.09375 5 4 6.125 4 7.5V16.5C4 17.9062 5.09375 19 6.5 19H9.5C9.75 19 10 18.7812 10 18.5C10 18.25 9.75 18 9.5 18Z\\" fill=\\"currentcolor\\"></path></svg>"`;
diff --git a/src/lib/holocene/icon/paths.ts b/src/lib/holocene/icon/paths.ts
index 61c1b310b..7e8f9aac0 100644
--- a/src/lib/holocene/icon/paths.ts
+++ b/src/lib/holocene/icon/paths.ts
@@ -44,6 +44,7 @@ import info from './svg/info.svelte';
 import invertedCheckmark from './svg/inverted-checkmark.svelte';
 import json from './svg/json.svelte';
 import labs from './svg/labs.svelte';
+import link from './svg/link.svelte';
 import lock from './svg/lock.svelte';
 import logout from './svg/logout.svelte';
 import merge from './svg/merge.svelte';
@@ -129,6 +130,7 @@ export const icons = {
   'inverted-checkmark': invertedCheckmark,
   json,
   labs,
+  link,
   lock,
   logout,
   merge,
diff --git a/src/lib/holocene/icon/svg/link.svelte b/src/lib/holocene/icon/svg/link.svelte
new file mode 100644
index 000000000..9c24090bb
--- /dev/null
+++ b/src/lib/holocene/icon/svg/link.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import Svg from './svg.svelte';
+</script>
+
+<Svg {...$$props}>
+  <path
+    d="M10.1898 12.906C10.5785 13.4262 11.0744 13.8566 11.6439 14.1681C12.2134 14.4795 12.8431 14.6647 13.4904 14.7111C14.1377 14.7575 14.7874 14.664 15.3954 14.437C16.0034 14.21 16.5555 13.8547 17.0143 13.3953L19.7296 10.6772C20.554 9.82282 21.0101 8.67851 20.9998 7.49073C20.9895 6.30296 20.5136 5.16675 19.6745 4.32684C18.8354 3.48692 17.7004 3.01049 16.5138 3.00017C15.3272 2.98985 14.184 3.44646 13.3305 4.27165L11.7737 5.82095M13.8102 11.094C13.4215 10.5738 12.9256 10.1434 12.3561 9.83195C11.7866 9.5205 11.1569 9.33529 10.5096 9.28889C9.86232 9.24248 9.21264 9.33597 8.60462 9.563C7.99661 9.79004 7.44449 10.1453 6.9857 10.6047L4.27037 13.3228C3.44601 14.1772 2.98986 15.3215 3.00017 16.5093C3.01048 17.697 3.48643 18.8332 4.3255 19.6732C5.16457 20.5131 6.29964 20.9895 7.48622 20.9998C8.6728 21.0101 9.81596 20.5535 10.6695 19.7283L12.2172 18.1791"
+    stroke="currentcolor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</Svg>
diff --git a/src/lib/holocene/link.svelte b/src/lib/holocene/link.svelte
index 672499dd9..6c971980b 100644
--- a/src/lib/holocene/link.svelte
+++ b/src/lib/holocene/link.svelte
@@ -1,29 +1,48 @@
 <script lang="ts">
-  export let href: string;
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+  import type { IconName } from '$lib/holocene/icon/paths';
+
+  import Icon from './icon/icon.svelte';
+
+  type $$Props = HTMLAnchorAttributes & {
+    href?: string;
+    active?: boolean;
+    newTab?: boolean;
+    class?: string;
+    icon?: IconName;
+    'data-testid'?: string;
+  };
+
+  let className = '';
+  export { className as class };
+  export let href: string = null;
   export let active = false;
   export let newTab = false;
+  export let icon: IconName = null;
 </script>
 
-{#if newTab}
-  <a
-    {href}
-    target="_blank"
-    rel="noreferrer"
-    class:text-blue-900={active}
-    {...$$props}
-    class="{$$props.class} underline underline-offset-2 hover:text-blue-700"
-    on:click|stopPropagation
-  >
-    <slot />
-  </a>
-{:else}
-  <a
-    {href}
-    class:text-blue-900={active}
-    {...$$props}
-    class="{$$props.class} underline underline-offset-2 hover:text-blue-700"
-    on:click
-  >
-    <slot />
-  </a>
-{/if}
+<a
+  {href}
+  target={newTab ? '_blank' : null}
+  rel={newTab ? 'noreferrer' : null}
+  class="link {className}"
+  class:active
+  on:click
+  {...$$restProps}
+>
+  {#if icon}
+    <Icon width={20} height={20} class="mt-0.5" name={icon} />
+  {/if}
+  <slot />
+</a>
+
+<style lang="postcss">
+  .link {
+    @apply cursor-pointer underline inline-flex gap-2 items-center max-w-fit rounded underline-offset-2 hover:text-indigo-600 focus-visible:bg-blue-100 focus-visible:outline-none focus-visible:shadow-focus focus-visible:shadow-blue-600/50;
+
+    &.active {
+      @apply text-blue-900;
+    }
+  }
+</style>
diff --git a/src/lib/holocene/menu/menu-button.svelte b/src/lib/holocene/menu/menu-button.svelte
index b97595db3..eafa743c2 100644
--- a/src/lib/holocene/menu/menu-button.svelte
+++ b/src/lib/holocene/menu/menu-button.svelte
@@ -139,7 +139,7 @@
   }
 
   .primary {
-    @apply border-2 border-primary bg-primary bg-gradient-to-br text-white hover:from-blue-100 hover:to-purple-100 hover:text-primary;
+    @apply border-2 border-primary bg-primary bg-gradient-to-br text-white hover:from-blue-100 hover:to-purple-100 hover:text-primary hover:border-indigo-600 hover:shadow-focus hover:shadow-blue-600/50 focus-visible:outline-none focus-visible:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-primary;
 
     &:disabled {
       @apply text-white opacity-75 hover:from-primary hover:to-primary;
@@ -168,11 +168,11 @@
 
   .secondary,
   .ghost {
-    @apply focus-within:border-indigo-600 focus-within:outline-none focus-within:shadow-focus focus-within:shadow-blue-600/50;
+    @apply focus-visible:border-indigo-600 focus-visible:outline-none focus-visible:shadow-focus focus-visible:shadow-blue-600/50;
   }
 
   .table-header {
-    @apply p-0 max-w-fit text-sm;
+    @apply border-2 border-[transparent] p-0 max-w-fit h-auto text-sm bg-primary text-white focus-visible:outline-none focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50;
   }
 
   .unround {
diff --git a/src/lib/holocene/modal.svelte b/src/lib/holocene/modal.svelte
index 0d1aa9950..4d2ce1e04 100644
--- a/src/lib/holocene/modal.svelte
+++ b/src/lib/holocene/modal.svelte
@@ -141,15 +141,11 @@
       </p>
     </div>
     <div class="flex items-center justify-end space-x-2 p-6">
-      <Button
-        thin
-        variant="secondary"
-        disabled={loading}
-        on:click={handleCancel}>{cancelText}</Button
+      <Button variant="secondary" disabled={loading} on:click={handleCancel}
+        >{cancelText}</Button
       >
       {#if !hideConfirm}
         <Button
-          thin
           variant={confirmType}
           {loading}
           disabled={confirmDisabled || loading}
diff --git a/src/lib/holocene/orderable-list/orderable-list-item.svelte b/src/lib/holocene/orderable-list/orderable-list-item.svelte
index 9208c7c32..21a34dad9 100644
--- a/src/lib/holocene/orderable-list/orderable-list-item.svelte
+++ b/src/lib/holocene/orderable-list/orderable-list-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  
+
   import IconButton from '../icon-button.svelte';
 
   const dispatch = createEventDispatcher<{
@@ -90,7 +90,6 @@
       <div class="flex items-center">
         <IconButton
           disabled={index === 0}
-          hoverable
           icon="chevron-up"
           data-testid="orderable-list-item-{label}-move-up-button"
           label={moveUpButtonLabel}
@@ -98,7 +97,6 @@
         />
         <IconButton
           disabled={index === totalItems - 1}
-          hoverable
           icon="chevron-down"
           data-testid="orderable-list-item-{label}-move-down-button"
           label={moveDownButtonLabel}
@@ -110,7 +108,6 @@
     {#if !isStatic && !readonly && index <= maxPinnedItems - 1}
       {#if pinned}
         <IconButton
-          hoverable
           icon="pin-filled"
           data-testid="orderable-list-item-{label}-unpin-button"
           label={unpinButtonLabel}
@@ -118,7 +115,6 @@
         />
       {:else}
         <IconButton
-          hoverable
           icon="pin"
           data-testid="orderable-list-item-{label}-pin-button"
           label={pinButtonLabel}
@@ -130,7 +126,6 @@
   {#if !readonly}
     {#if isStatic}
       <IconButton
-        hoverable
         icon="add"
         data-testid="orderable-list-item-{label}-add-button"
         label={addButtonLabel}
@@ -138,7 +133,6 @@
       />
     {:else}
       <IconButton
-        hoverable
         icon="hyphen"
         data-testid="orderable-list-item-{label}-remove-button"
         label={removeButtonLabel}
diff --git a/src/lib/holocene/scroll-to-top.svelte b/src/lib/holocene/scroll-to-top.svelte
index e56da921c..15ba21467 100644
--- a/src/lib/holocene/scroll-to-top.svelte
+++ b/src/lib/holocene/scroll-to-top.svelte
@@ -9,8 +9,7 @@
   <slot />
   <div class="back-to-top" class:hidden>
     <Button
-      class="!py-1.5 !px-1"
-      icon="arrow-up"
+      leadingIcon="arrow-up"
       variant="secondary"
       on:click={onScrollToTopClick}
     />
diff --git a/src/lib/holocene/split-button.svelte b/src/lib/holocene/split-button.svelte
index eb86b6046..fde135ad7 100644
--- a/src/lib/holocene/split-button.svelte
+++ b/src/lib/holocene/split-button.svelte
@@ -8,26 +8,18 @@
   export let menuLabel: string;
   export let icon: IconName | undefined = undefined;
   export let id: string;
-  export let variant:
-    | 'primary'
-    | 'secondary'
-    | 'destructive'
-    | 'login'
-    | 'link' = 'primary';
-  export let thin = false;
+  export let variant: 'primary' | 'secondary' | 'destructive' | 'ghost' =
+    'primary';
   export let disabled = false;
   export let position: 'left' | 'right' = 'left';
-  export let href = '';
   export let primaryActionDisabled = false;
 </script>
 
 <MenuContainer class={$$props.class}>
   <div class="split-button">
     <Button
-      {href}
       {variant}
-      {thin}
-      unroundRight
+      borderRadiusModifier="square-right"
       disabled={disabled || primaryActionDisabled}
       id="{id}-primary-button"
       on:click
diff --git a/src/lib/holocene/table/paginated-table.svelte b/src/lib/holocene/table/paginated-table.svelte
index e53d68fe1..670f38558 100644
--- a/src/lib/holocene/table/paginated-table.svelte
+++ b/src/lib/holocene/table/paginated-table.svelte
@@ -2,7 +2,9 @@
   import { page } from '$app/stores';
 
   import TableEmptyState from '$lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import IconButton from '$lib/holocene/icon-button.svelte';
+  import ProgressBar from '$lib/holocene/progress-bar.svelte';
   import FilterSelect from '$lib/holocene/select/filter-select.svelte';
   import {
     currentPageKey,
@@ -14,8 +16,6 @@
   } from '$lib/stores/pagination';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
-  import ProgressBar from '../progress-bar.svelte';
-
   type Item = $$Generic;
 
   export let items: Item[];
@@ -123,28 +123,29 @@
           {#if isNaN(page)}
             <span>...</span>
           {:else}
-            <button
+            <Button
+              variant="ghost"
+              size="sm"
+              active={page === $store.currentPage}
               aria-label={pageButtonLabel(page)}
-              class="page-btn"
-              class:active={page === $store.currentPage}
-              on:click={() => handlePageChange(page)}>{page}</button
+              on:click={() => handlePageChange(page)}>{page}</Button
             >
           {/if}
         {/each}
       </div>
       <div class="paginated-table-controls-end">
-        <button
-          aria-label={previousPageButtonLabel}
+        <IconButton
+          label={previousPageButtonLabel}
           disabled={!$store.hasPrevious}
+          icon="arrow-left"
           on:click={() => handlePageChange($store.currentPage - 1)}
-          class="nav-btn"><Icon name="arrow-left" /></button
-        >
-        <button
-          aria-label={nextPageButtonLabel}
+        />
+        <IconButton
+          label={nextPageButtonLabel}
           disabled={!$store.hasNext}
           on:click={() => handlePageChange($store.currentPage + 1)}
-          class="nav-btn"><Icon name="arrow-right" /></button
-        >
+          icon="arrow-right"
+        />
       </div>
     </div>
   {:else}
@@ -196,22 +197,10 @@
   }
 
   .paginated-table-controls-center {
-    @apply flex flex-wrap grow flex-row items-center justify-center min-w-fit gap-2 text-sm;
+    @apply flex flex-wrap grow flex-row items-center justify-center min-w-fit gap-4 text-sm;
   }
 
   .paginated-table-controls-end {
-    @apply flex flex-row items-center justify-between lg:justify-end gap-2;
-  }
-
-  .page-btn {
-    @apply w-10 h-10 rounded-lg bg-white text-gray-500 hover:bg-gray-50 focus:outline-none focus:border-2 focus:border-blue-600;
-  }
-
-  .page-btn.active {
-    @apply bg-gray-100 text-primary;
-  }
-
-  .nav-btn {
-    @apply border border-gray-300 text-gray-700 rounded-lg w-10 h-10 flex items-center justify-center disabled:bg-gray-100 disabled:text-gray-500 disabled:pointer-events-none hover:bg-gray-900 hover:text-white;
+    @apply flex flex-row items-center justify-between lg:justify-end gap-4;
   }
 </style>
diff --git a/src/lib/holocene/table/table-row.svelte b/src/lib/holocene/table/table-row.svelte
index 050dfbf53..f6837226e 100644
--- a/src/lib/holocene/table/table-row.svelte
+++ b/src/lib/holocene/table/table-row.svelte
@@ -2,26 +2,15 @@
   import type { HTMLAttributes } from 'svelte/elements';
 
   interface $$Props extends HTMLAttributes<HTMLTableRowElement> {
-    href?: string;
     'data-testid'?: string;
   }
 
-  export let href = '';
-
   let className = '';
   export { className as class };
 </script>
 
-{#if href}
-  <a class="table-row align-middle {className}" {href} {...$$restProps}>
-    <td />
-    <slot />
-    <td />
-  </a>
-{:else}
-  <tr on:click|stopPropagation class={className} {...$$restProps}>
-    <td />
-    <slot />
-    <td />
-  </tr>
-{/if}
+<tr on:click|stopPropagation class={className} {...$$restProps}>
+  <td />
+  <slot />
+  <td />
+</tr>
diff --git a/src/lib/holocene/tooltip.story.svelte b/src/lib/holocene/tooltip.story.svelte
index 8db6113ed..9eea2ba66 100644
--- a/src/lib/holocene/tooltip.story.svelte
+++ b/src/lib/holocene/tooltip.story.svelte
@@ -17,7 +17,7 @@
         top
         text={'Tooltip text goes here.'}
       >
-        <Button as="anchor" href={'#'}>Hover Here</Button>
+        <Button>Hover Here</Button>
       </Tooltip>
     </div>
   </Hst.Variant>
@@ -29,7 +29,7 @@
         width={100}
         text={'Really really really really really long tooltip text goes here.'}
       >
-        <Button as="anchor" href={'#'}>Hover Here</Button>
+        <Button>Hover Here</Button>
       </Tooltip>
     </div>
   </Hst.Variant>
@@ -37,7 +37,7 @@
   <Hst.Variant title="A tooltip with attribute top">
     <div class="center">
       <Tooltip top text={'Tooltip text goes here.'}>
-        <Button as="anchor" href={'#'}>Hover Here</Button>
+        <Button>Hover Here</Button>
       </Tooltip>
     </div>
   </Hst.Variant>
@@ -45,7 +45,7 @@
   <Hst.Variant title="A tooltip with attribute topRight">
     <div class="center">
       <Tooltip topRight text={'Tooltip text goes here.'}>
-        <Button as="anchor" href={'#'}>Hover Here</Button>
+        <Button>Hover Here</Button>
       </Tooltip>
     </div>
   </Hst.Variant>
@@ -53,7 +53,7 @@
   <Hst.Variant title="A tooltip with attribute topLeft">
     <div class="center">
       <Tooltip topLeft text={'Tooltip text goes here.'}>
-        <Button as="anchor" href={'#'}>Hover Here</Button>
+        <Button>Hover Here</Button>
       </Tooltip>
     </div>
   </Hst.Variant>
@@ -61,7 +61,7 @@
   <Hst.Variant title="A tooltip with attribute right">
     <div class="center">
       <Tooltip right text={'Tooltip text goes here.'}>
-        <Button as="anchor" href={'#'}>Hover Here</Button>
+        <Button>Hover Here</Button>
       </Tooltip>
     </div>
   </Hst.Variant>
@@ -69,7 +69,7 @@
   <Hst.Variant title="A tooltip with attribute bottom">
     <div class="center">
       <Tooltip bottom text={'Tooltip text goes here.'}>
-        <Button as="anchor" href={'#'}>Hover Here</Button>
+        <Button>Hover Here</Button>
       </Tooltip>
     </div>
   </Hst.Variant>
@@ -77,7 +77,7 @@
   <Hst.Variant title="A tooltip with attribute bottomLeft">
     <div class="center">
       <Tooltip bottomLeft text={'Tooltip text goes here.'}>
-        <Button as="anchor" href={'#'}>Hover Here</Button>
+        <Button>Hover Here</Button>
       </Tooltip>
     </div>
   </Hst.Variant>
@@ -85,7 +85,7 @@
   <Hst.Variant title="A tooltip with attribute bottomRight">
     <div class="center">
       <Tooltip bottomRight text={'Tooltip text goes here.'}>
-        <Button as="anchor" href={'#'}>Hover Here</Button>
+        <Button>Hover Here</Button>
       </Tooltip>
     </div>
   </Hst.Variant>
@@ -93,7 +93,7 @@
   <Hst.Variant title="A tooltip with attribute left">
     <div class="center">
       <Tooltip left text={'Tooltip text goes here.'}>
-        <Button as="anchor" href={'#'}>Hover Here</Button>
+        <Button>Hover Here</Button>
       </Tooltip>
     </div>
   </Hst.Variant>
diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts
index 3e19c11d7..bd785283a 100644
--- a/src/lib/i18n/locales/en/common.ts
+++ b/src/lib/i18n/locales/en/common.ts
@@ -134,4 +134,5 @@ export const Strings = {
   timezone: 'Timezone {{ timezone }}',
   'time-unit': 'Time Unit',
   'based-on-time-preface': 'Based on',
+  'download-json': 'Download JSON',
 } as const;
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index 2b6301d5d..87b108f67 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -108,16 +108,15 @@
 
 <header class="mb-4 flex flex-col gap-1">
   <div class="mb-4 block">
-    <a
+    <Link
       href={`${routeForWorkflows({
         namespace,
       })}?${$workflowsSearchParams}`}
       data-testid="back-to-workflows"
-      class="back-to-workflows"
+      icon="chevron-left"
     >
-      <Icon name="chevron-left" class="inline" />
       {translate('workflows', 'back-to-workflows')}
-    </a>
+    </Link>
   </div>
   <div
     class="mb-8 flex w-full flex-col items-center justify-between gap-4 lg:flex-row"
@@ -289,17 +288,3 @@
     </TabList>
   </Tabs>
 </header>
-
-<style lang="postcss">
-  .back-to-workflows {
-    @apply text-sm;
-  }
-
-  .back-to-workflows:hover {
-    @apply text-blue-700 underline;
-  }
-
-  .back-to-workflows:hover :global(svg path) {
-    stroke: #1d4ed8;
-  }
-</style>
diff --git a/src/lib/pages/schedule-view.svelte b/src/lib/pages/schedule-view.svelte
index 88fee0037..1db75eb16 100644
--- a/src/lib/pages/schedule-view.svelte
+++ b/src/lib/pages/schedule-view.svelte
@@ -8,7 +8,7 @@
   import ScheduleRecentRuns from '$lib/components/schedule/schedule-recent-runs.svelte';
   import ScheduleUpcomingRuns from '$lib/components/schedule/schedule-upcoming-runs.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import Loading from '$lib/holocene/loading.svelte';
   import MenuItem from '$lib/holocene/menu/menu-item.svelte';
   import Modal from '$lib/holocene/modal.svelte';
@@ -94,16 +94,9 @@
 {#await scheduleFetch}
   <header class="mb-8">
     <div class="flex flex-col gap-1 relative">
-      <a
-        href={routeForSchedules({ namespace })}
-        class="absolute top-0 back-to-schedules"
-        style="left: -0.5rem;"
-      >
-        <Icon name="chevron-left" class="inline" />{translate(
-          'schedules',
-          'back-to-schedules',
-        )}
-      </a>
+      <Link href={routeForSchedules({ namespace })} icon="chevron-left">
+        {translate('schedules', 'back-to-schedules')}
+      </Link>
       <h1
         class="text-2xl mt-8 font-medium select-all"
         data-testid="schedule-name"
@@ -122,16 +115,9 @@
   {:else}
     <header class="flex flex-row justify-between gap-4 mb-8">
       <div class="flex flex-col gap-1 relative">
-        <a
-          href={routeForSchedules({ namespace })}
-          class="absolute top-0 back-to-schedules"
-          style="left: -0.5rem;"
-        >
-          <Icon name="chevron-left" class="inline" />{translate(
-            'schedules',
-            'back-to-schedules',
-          )}
-        </a>
+        <Link href={routeForSchedules({ namespace })} icon="chevron-left">
+          {translate('schedules', 'back-to-schedules')}
+        </Link>
         <h1 class="text-2xl flex relative items-center gap-4 mt-8">
           <WorkflowStatus
             status={schedule?.schedule.state.paused ? 'Paused' : 'Running'}
@@ -288,16 +274,9 @@
 {:catch error}
   <header class="mb-8">
     <div class="flex flex-col gap-1 relative">
-      <a
-        href={routeForSchedules({ namespace })}
-        class="absolute top-0 back-to-schedules"
-        style="left: -0.5rem;"
-      >
-        <Icon name="chevron-left" class="inline" />{translate(
-          'schedules',
-          'back-to-schedules',
-        )}
-      </a>
+      <Link href={routeForSchedules({ namespace })} icon="chevron-left">
+        {translate('schedules', 'back-to-schedules')}
+      </Link>
       <h1
         class="text-2xl mt-8 font-medium select-all"
         data-testid="schedule-name"
@@ -311,13 +290,3 @@
   </header>
   <ScheduleError error={error?.message} />
 {/await}
-
-<style lang="postcss">
-  .back-to-schedules {
-    @apply text-sm;
-  }
-
-  .back-to-schedules:hover {
-    @apply text-blue-700 underline;
-  }
-</style>
diff --git a/src/lib/pages/schedules.svelte b/src/lib/pages/schedules.svelte
index abb4026fe..5c6651d86 100644
--- a/src/lib/pages/schedules.svelte
+++ b/src/lib/pages/schedules.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { noop } from 'svelte/internal';
 
-  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
 
   import SchedulesTableRow from '$lib/components/schedule/schedules-table-row.svelte';
@@ -56,10 +55,9 @@
   </div>
   {#if hasSchedules}
     <Button
-      class="h-10"
       data-testid="create-schedule"
       disabled={createDisabled}
-      on:click={() => goto(routeForScheduleCreate({ namespace }))}
+      href={routeForScheduleCreate({ namespace })}
     >
       {translate('schedules', 'create')}
     </Button>
@@ -128,10 +126,9 @@
         </p>
         {#if !error}
           <Button
-            class="mt-4"
             data-testid="create-schedule"
             disabled={createDisabled}
-            on:click={() => goto(routeForScheduleCreate({ namespace }))}
+            href={routeForScheduleCreate({ namespace })}
           >
             {translate('schedules', 'create')}
           </Button>
diff --git a/src/lib/pages/workflow-query.svelte b/src/lib/pages/workflow-query.svelte
index 792a24dfe..7fd9a05e5 100644
--- a/src/lib/pages/workflow-query.svelte
+++ b/src/lib/pages/workflow-query.svelte
@@ -72,7 +72,7 @@
         </Select>
         <Button
           on:click={() => query(queryType)}
-          icon="retry"
+          leadingIcon="retry"
           loading={isLoading}
         >
           {translate('refresh')}
diff --git a/src/lib/pages/workflow-stack-trace.svelte b/src/lib/pages/workflow-stack-trace.svelte
index b6e1761ec..1e7efdccd 100644
--- a/src/lib/pages/workflow-stack-trace.svelte
+++ b/src/lib/pages/workflow-stack-trace.svelte
@@ -59,7 +59,11 @@
       </div>
     {:then result}
       <div class="flex items-center gap-4">
-        <Button on:click={refreshStackTrace} icon="retry" loading={isLoading}>
+        <Button
+          on:click={refreshStackTrace}
+          leadingIcon="retry"
+          loading={isLoading}
+        >
           {translate('refresh')}
         </Button>
         <p>
diff --git a/src/lib/pages/workflows-with-new-search.svelte b/src/lib/pages/workflows-with-new-search.svelte
index 61c9fd3c6..169f62845 100644
--- a/src/lib/pages/workflows-with-new-search.svelte
+++ b/src/lib/pages/workflows-with-new-search.svelte
@@ -47,20 +47,19 @@
 
 <script lang="ts">
   import { derived, writable } from 'svelte/store';
-  
+
   import { onMount } from 'svelte';
-  
+
   import { page } from '$app/stores';
-  
-  
+
   import BatchOperationConfirmationModal from '$lib/components/workflow/batch-operation-confirmation-modal.svelte';
   import WorkflowDateTimeFilter from '$lib/components/workflow/dropdown-filter/workflow-datetime-filter.svelte';
   import WorkflowFilterSearch from '$lib/components/workflow/filter-search/index.svelte';
   import WorkflowAdvancedSearch from '$lib/components/workflow/workflow-advanced-search.svelte';
   import WorkflowsSummaryConfigurableTable from '$lib/components/workflow/workflows-summary-configurable-table.svelte';
-  import Button from '$lib/holocene/button.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import IconButton from '$lib/holocene/icon-button.svelte';
   import LabsModeGuard from '$lib/holocene/labs-mode-guard.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import Translate from '$lib/i18n/translate.svelte';
   import { Action } from '$lib/models/workflow-actions';
@@ -228,7 +227,7 @@
   on:confirm={cancelWorkflows}
 />
 
-<header class="flex justify-between">
+<header class="flex justify-between items-center">
   <div>
     <h1 class="text-2xl" data-cy="workflows-title">
       <Translate namespace="workflows" key="recent-workflows" />
@@ -255,23 +254,21 @@
             />
           {/if}
         </p>
+      {/if}
+      {#if !$loading && !$updating && $workflows.length > 0}
         <div class="h-1 w-1 rounded-full bg-gray-400" />
+        <Link tabindex={0} on:click={() => exportWorkflows($workflows)}
+          >{translate('download-json')}</Link
+        >
       {/if}
-      <Button
-        variant="link"
-        disabled={$loading || $updating || $workflows.length === 0}
-        on:click={() => exportWorkflows($workflows)}>Download JSON</Button
-      >
     </div>
   </div>
   <div>
-    <button
-      aria-label={translate('workflows', 'retry-workflows')}
-      class="cursor-pointer rounded-full p-1 hover:bg-gray-900 hover:text-white"
+    <IconButton
+      icon="retry"
+      label={translate('workflows', 'retry-workflows')}
       on:click={refreshWorkflows}
-    >
-      <Icon name="retry" class="h-8 w-8" />
-    </button>
+    />
   </div>
 </header>
 <div class="flex flex-col md:flex-row gap-2">
diff --git a/src/lib/pages/workflows.svelte b/src/lib/pages/workflows.svelte
index 71199b9f5..3da3a2129 100644
--- a/src/lib/pages/workflows.svelte
+++ b/src/lib/pages/workflows.svelte
@@ -7,7 +7,7 @@
   import WorkflowsSummaryRow from '$lib/components/workflow/workflows-summary-row.svelte';
   import WorkflowsSummaryTable from '$lib/components/workflow/workflows-summary-table.svelte';
   import EmptyState from '$lib/holocene/empty-state.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import IconButton from '$lib/holocene/icon-button.svelte';
   import Loading from '$lib/holocene/loading.svelte';
   import Pagination from '$lib/holocene/pagination.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -42,7 +42,7 @@
   });
 </script>
 
-<header class="mb-2 flex justify-between">
+<header class="mb-2 flex justify-between items-center">
   <div>
     <h1 class="text-2xl" data-testid="namespace-title">
       {translate('workflows', 'recent-workflows')}
@@ -54,13 +54,11 @@
     </div>
   </div>
   <div>
-    <button
-      aria-label={translate('workflows', 'retry-workflows')}
-      class="cursor-pointer rounded-full p-1 hover:bg-gray-900 hover:text-white"
+    <IconButton
+      label={translate('workflows', 'retry-workflows')}
+      icon="retry"
       on:click={refreshWorkflows}
-    >
-      <Icon name="retry" class="h-8 w-8" />
-    </button>
+    />
   </div>
 </header>
 <WorkflowFilters bind:searchType />
diff --git a/src/routes/(app)/namespaces/+page.svelte b/src/routes/(app)/namespaces/+page.svelte
index 21883408b..947adc89b 100644
--- a/src/routes/(app)/namespaces/+page.svelte
+++ b/src/routes/(app)/namespaces/+page.svelte
@@ -3,6 +3,7 @@
 
   import PageTitle from '$lib/components/page-title.svelte';
   import EmptyState from '$lib/holocene/empty-state.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import Pagination from '$lib/holocene/pagination.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
@@ -34,12 +35,10 @@
       {#each visibleItems as namespace}
         <TableRow>
           <td>
-            <a
+            <Link
               href={routeForNamespace({
                 namespace: namespace.namespaceInfo.name,
-              })}
-              class="hover:text-blue-700 hover:underline hover:decoration-blue-700"
-              >{namespace.namespaceInfo.name}</a
+              })}>{namespace.namespaceInfo.name}</Link
             >
           </td>
         </TableRow>
diff --git a/src/routes/(app)/namespaces/[namespace]/archival/_workflow-filters.svelte b/src/routes/(app)/namespaces/[namespace]/archival/_workflow-filters.svelte
index 656edb958..913060bd3 100644
--- a/src/routes/(app)/namespaces/[namespace]/archival/_workflow-filters.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/archival/_workflow-filters.svelte
@@ -1,18 +1,17 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  
+
   import Search from '$lib/components/search.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import FilterSelect from '$lib/holocene/select/filter-select.svelte';
   import Option from '$lib/holocene/select/simple-option.svelte';
   import Select from '$lib/holocene/select/simple-select.svelte';
   import { translate } from '$lib/i18n/translate';
   import { timeFormat } from '$lib/stores/time-format';
   import { durations } from '$lib/utilities/to-duration';
-  
-  
+
   import FilterInput from './_filter-input.svelte';
-  
 
   const statuses = {
     All: { value: null, label: translate('workflows', 'all-statuses') },
@@ -67,21 +66,13 @@
 <section class="flex flex-col gap-2">
   <p class="text-right text-xs">
     {#if isAdvancedQuery}
-      <a
-        href={$page.url.pathname}
-        class="text-blue-700"
-        on:click|preventDefault={handleToggle('basic')}
-      >
+      <Link href={$page.url.pathname} on:click={handleToggle('basic')}>
         {translate('workflows', 'basic-search')}
-      </a>
+      </Link>
     {:else}
-      <a
-        href="{$page.url.pathname}?query"
-        class="text-blue-700"
-        on:click|preventDefault={handleToggle('advanced')}
-      >
+      <Link class="text-blue-700" on:click={handleToggle('advanced')}>
         {translate('workflows', 'advanced-search')}
-      </a>
+      </Link>
     {/if}
   </p>
 
diff --git a/src/routes/(login)/login/+page.svelte b/src/routes/(login)/login/+page.svelte
index 5eb70449a..c1c16a9bf 100644
--- a/src/routes/(login)/login/+page.svelte
+++ b/src/routes/(login)/login/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import { BROWSER } from 'esm-env';
-  
+
   import { page } from '$app/stores';
-  
+
   import type { PageData } from './$types';
-  
 
   import FeedbackButton from '$lib/components/feedback-button.svelte';
   import PageTitle from '$lib/components/page-title.svelte';
@@ -31,8 +30,7 @@
   <div class="mx-auto">
     <Button
       data-testid="login-button"
-      variant="login"
-      icon="lock"
+      leadingIcon="lock"
       on:click={() => {
         if (BROWSER) {
           window.location.assign(
diff --git a/src/routes/(login)/signin/+page.svelte b/src/routes/(login)/signin/+page.svelte
index 5eb70449a..c1c16a9bf 100644
--- a/src/routes/(login)/signin/+page.svelte
+++ b/src/routes/(login)/signin/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import { BROWSER } from 'esm-env';
-  
+
   import { page } from '$app/stores';
-  
+
   import type { PageData } from './$types';
-  
 
   import FeedbackButton from '$lib/components/feedback-button.svelte';
   import PageTitle from '$lib/components/page-title.svelte';
@@ -31,8 +30,7 @@
   <div class="mx-auto">
     <Button
       data-testid="login-button"
-      variant="login"
-      icon="lock"
+      leadingIcon="lock"
       on:click={() => {
         if (BROWSER) {
           window.location.assign(
diff --git a/tests/e2e/workflows.spec.ts b/tests/e2e/workflows.spec.ts
index f7b901d92..7dfeffe1d 100644
--- a/tests/e2e/workflows.spec.ts
+++ b/tests/e2e/workflows.spec.ts
@@ -9,7 +9,7 @@ test.describe('Workflows list', () => {
     test.slow();
     await page
       .getByRole('link', { name: 'e2e-workflow-1' })
-      .click({ position: { x: 0, y: 0 } });
+      .click({ force: true });
 
     let region: Locator;
     let toggle: Locator;
@@ -63,7 +63,7 @@ test.describe('Workflows list', () => {
   test('should render decoded stack trace', async ({ page }) => {
     await page
       .getByRole('link', { name: 'e2e-workflow-2' })
-      .click({ position: { x: 0, y: 0 } });
+      .click({ force: true });
 
     await page.getByText('Stack Trace').click();
 
@@ -75,7 +75,7 @@ test.describe('Workflows list', () => {
   test('should render decoded query results', async ({ page }) => {
     await page
       .getByRole('link', { name: 'e2e-workflow-2' })
-      .click({ position: { x: 0, y: 0 } });
+      .click({ force: true });
 
     await page.getByText('Queries').click();
     await page.getByLabel('Query Type').selectOption('is-blocked');
diff --git a/tests/integration/workflow-bulk-actions.spec.ts b/tests/integration/workflow-bulk-actions.spec.ts
index eae80970e..174cdfb00 100644
--- a/tests/integration/workflow-bulk-actions.spec.ts
+++ b/tests/integration/workflow-bulk-actions.spec.ts
@@ -41,10 +41,13 @@ test.describe('Batch and Bulk Workflow Actions', () => {
     }) => {
       await page.getByTestId('batch-actions-checkbox').click();
       await page.click('[data-testid="bulk-terminate-button"]');
-      await page.click(
-        '[data-testid="batch-Terminate-confirmation"] button.destructive',
-      );
-      await page.waitForSelector('#batch-terminate-success-toast');
+      await page
+        .getByTestId('batch-Terminate-confirmation')
+        .getByTestId('confirm-modal-button')
+        .click();
+      await expect(
+        page.locator('#batch-terminate-success-toast'),
+      ).toBeVisible();
     });
 
     test('allows running workflows to be terminated by a query', async ({
@@ -63,10 +66,13 @@ test.describe('Batch and Bulk Workflow Actions', () => {
         '[data-testid="batch-Terminate-confirmation"] #bulk-action-reason-2',
         'Sarah Connor',
       );
-      await page.click(
-        '[data-testid="batch-Terminate-confirmation"] button.destructive',
-      );
-      await page.waitForSelector('#batch-terminate-success-toast');
+      await page
+        .getByTestId('batch-Terminate-confirmation')
+        .getByTestId('confirm-modal-button')
+        .click();
+      await expect(
+        page.locator('#batch-terminate-success-toast'),
+      ).toBeVisible();
     });
 
     test('allows running workflows to be cancelled by ID without a reason', async ({
@@ -74,10 +80,11 @@ test.describe('Batch and Bulk Workflow Actions', () => {
     }) => {
       await page.getByTestId('batch-actions-checkbox').click();
       await page.click('[data-testid="bulk-cancel-button"]');
-      await page.click(
-        '[data-testid="batch-Cancel-confirmation"] button.destructive',
-      );
-      await page.waitForSelector('#batch-cancel-success-toast');
+      await page
+        .getByTestId('batch-Cancel-confirmation')
+        .getByTestId('confirm-modal-button')
+        .click();
+      await expect(page.locator('#batch-cancel-success-toast')).toBeVisible();
     });
 
     test('allows running workflows to be cancelled by a query', async ({
@@ -96,10 +103,11 @@ test.describe('Batch and Bulk Workflow Actions', () => {
         '[data-testid="batch-Cancel-confirmation"] #bulk-action-reason-0',
         'Sarah Connor',
       );
-      await page.click(
-        '[data-testid="batch-Cancel-confirmation"] button.destructive',
-      );
-      await page.waitForSelector('#batch-cancel-success-toast');
+      await page
+        .getByTestId('batch-Cancel-confirmation')
+        .getByTestId('confirm-modal-button')
+        .click();
+      await expect(page.locator('#batch-cancel-success-toast')).toBeVisible();
     });
   });
 });