refactor: buttons (#18317)

* refactor: buttons * fix: woopsie --------- Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
2025-05-24 01:12:58 -04:00 · 2025-05-15 18:31:33 -04:00 · 2025-05-15 18:31:33 -04:00 · 86d64f3483
commit 86d64f3483
parent c1150fe7e3
26 changed files with 148 additions and 279 deletions
--- a/web/src/lib/components/elements/buttons/test/button.spec.ts
+++ b/web/src/lib/components/elements/buttons/test/button.spec.ts
@ -1,20 +0,0 @@
-import Button from '$lib/components/elements/buttons/button.svelte';
-import { render, screen } from '@testing-library/svelte';
-
-describe('Button component', () => {
-  it('should render as a button', () => {
-    render(Button);
-    const button = screen.getByRole('button');
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveAttribute('type', 'button');
-    expect(button).not.toHaveAttribute('href');
-  });
-
-  it('should render as a link if href prop is set', () => {
-    render(Button, { props: { href: '/test' } });
-    const link = screen.getByRole('link');
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', '/test');
-    expect(link).not.toHaveAttribute('type');
-  });
-});
--- a/web/src/lib/components/elements/buttons/button.svelte
+++ b/web/src/lib/components/elements/buttons/button.svelte
@ -1,123 +0,0 @@
-<script lang="ts" module>
-  export type Color =
-    | 'primary'
-    | 'primary-inversed'
-    | 'secondary'
-    | 'transparent-primary'
-    | 'text-primary'
-    | 'light-red'
-    | 'red'
-    | 'green'
-    | 'gray'
-    | 'transparent-gray'
-    | 'dark-gray'
-    | 'overlay-primary';
-  export type Size = 'tiny' | 'icon' | 'link' | 'sm' | 'base' | 'lg';
-  export type Rounded = 'lg' | '3xl' | 'full' | 'none';
-  export type Shadow = 'md' | false;
-</script>
-
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    type?: string;
-    href?: string;
-    color?: Color;
-    size?: Size;
-    rounded?: Rounded;
-    shadow?: Shadow;
-    fullwidth?: boolean;
-    border?: boolean;
-    class?: string;
-    children?: Snippet;
-    onclick?: (event: MouseEvent) => void;
-    onfocus?: () => void;
-    onblur?: () => void;
-    form?: string;
-    disabled?: boolean;
-    title?: string;
-    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | undefined | null;
-  }
-
-  let {
-    type = 'button',
-    href = undefined,
-    color = 'primary',
-    size = 'base',
-    rounded = '3xl',
-    shadow = 'md',
-    fullwidth = false,
-    border = false,
-    class: className = '',
-    children,
-    onclick,
-    onfocus,
-    onblur,
-    ...rest
-  }: Props = $props();
-
-  const colorClasses: Record<Color, string> = {
-    primary:
-      'bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/90',
-    secondary:
-      'bg-gray-500 dark:bg-gray-200 text-white dark:text-immich-dark-gray hover:bg-gray-500/90 dark:hover:bg-gray-200/90',
-    'transparent-primary': 'text-gray-500 dark:text-immich-dark-primary hover:bg-gray-100 dark:hover:bg-gray-700',
-    'text-primary':
-      'text-immich-primary dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/10 hover:bg-immich-primary/10',
-    'light-red': 'bg-[#F9DEDC] text-[#410E0B] hover:bg-red-50',
-    red: 'bg-red-500 text-white hover:bg-red-400',
-    green: 'bg-green-400 text-gray-800 hover:bg-green-400/90',
-    gray: 'bg-gray-500 dark:bg-gray-200 hover:bg-gray-500/75 dark:hover:bg-gray-200/80 text-white dark:text-immich-dark-gray',
-    'transparent-gray':
-      'dark:text-immich-dark-fg hover:bg-immich-primary/5 hover:text-gray-700 hover:dark:text-immich-dark-fg dark:hover:bg-immich-dark-primary/25',
-    'dark-gray':
-      'dark:border-immich-dark-gray dark:bg-gray-500 dark:hover:bg-immich-dark-primary/50 hover:bg-immich-primary/10 dark:text-white',
-    'overlay-primary': 'text-gray-500 hover:bg-gray-100',
-    'primary-inversed':
-      'bg-immich-dark-primary dark:bg-immich-primary text-black dark:text-white hover:bg-immich-dark-primary/80 dark:hover:bg-immich-primary/90',
-  };
-
-  const sizeClasses: Record<Size, string> = {
-    tiny: 'p-0 ms-2 me-0 align-top',
-    icon: 'p-2.5',
-    link: 'p-2 font-medium',
-    sm: 'px-4 py-2 text-sm font-medium',
-    base: 'px-6 py-3 font-medium',
-    lg: 'px-6 py-4 font-semibold',
-  };
-
-  const roundedClasses: Record<Rounded, string> = {
-    none: '',
-    lg: 'rounded-lg',
-    '3xl': 'rounded-3xl',
-    full: 'rounded-full',
-  };
-
-  let computedClass = $derived(
-    [
-      className,
-      colorClasses[color],
-      sizeClasses[size],
-      roundedClasses[rounded],
-      shadow === 'md' && 'shadow-md',
-      fullwidth && 'w-full',
-      border && 'border',
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-</script>
-
-<svelte:element
-  this={href ? 'a' : 'button'}
-  type={href ? undefined : type}
-  {href}
-  {onclick}
-  {onfocus}
-  {onblur}
-  class="inline-flex items-center justify-center transition-colors disabled:cursor-not-allowed disabled:opacity-60 disabled:pointer-events-none {computedClass}"
-  {...rest}
->
-  {@render children?.()}
-</svelte:element>
--- a/web/src/lib/components/elements/buttons/skip-link.svelte
+++ b/web/src/lib/components/elements/buttons/skip-link.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
  import { getTabbable } from '$lib/utils/focus-util';
+  import { Button } from '@immich/ui';
  import { t } from 'svelte-i18n';
-  import Button from './button.svelte';

  interface Props {
    /**
@ -58,8 +58,7 @@

 <div class="absolute top-2 start-2 transition-transform {isFocused ? 'translate-y-0' : '-translate-y-10 sr-only'}">
  <Button
-    size="sm"
-    rounded="none"
+    size="small"
    onclick={moveFocus}
    class={getBreakpoint()}
    onfocus={() => (isFocused = true)}
--- a/web/src/lib/components/faces-page/edit-name-input.svelte
+++ b/web/src/lib/components/faces-page/edit-name-input.svelte
@ -1,9 +1,9 @@
 <script lang="ts">
-  import { type PersonResponseDto } from '@immich/sdk';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import Button from '../elements/buttons/button.svelte';
  import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import { type PersonResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import { t } from 'svelte-i18n';
+  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';

  interface Props {
    person: PersonResponseDto;
@ -44,6 +44,6 @@
      inputClass="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
      bind:showLoadingSpinner={isSearchingPeople}
    />
-    <Button size="sm" type="submit">{$t('done')}</Button>
+    <Button size="small" shape="round" type="submit">{$t('done')}</Button>
  </form>
 </div>
--- a/web/src/lib/components/faces-page/manage-people-visibility.svelte
+++ b/web/src/lib/components/faces-page/manage-people-visibility.svelte
@ -1,9 +1,7 @@
 <script lang="ts">
  import { shortcut } from '$lib/actions/shortcut';
  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
  import PeopleInfiniteScroll from '$lib/components/faces-page/people-infinite-scroll.svelte';
-  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
  import {
    notificationController,
    NotificationType,
@ -13,6 +11,7 @@
  import { getPeopleThumbnailUrl } from '$lib/utils';
  import { handleError } from '$lib/utils/handle-error';
  import { updatePeople, type PersonResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
@ -126,11 +125,7 @@
      <CircleIconButton title={$t('reset_people_visibility')} icon={mdiRestart} onclick={handleResetVisibility} />
      <CircleIconButton title={toggleButton.label} icon={toggleButton.icon} onclick={handleToggleVisibility} />
    </div>
-    {#if !showLoadingSpinner}
-      <Button onclick={handleSaveVisibility} size="sm" rounded="lg">{$t('done')}</Button>
-    {:else}
-      <LoadingSpinner />
-    {/if}
+    <Button loading={showLoadingSpinner} onclick={handleSaveVisibility} size="small">{$t('done')}</Button>
  </div>
 </div>

--- a/web/src/lib/components/faces-page/merge-face-selector.svelte
+++ b/web/src/lib/components/faces-page/merge-face-selector.svelte
@ -6,13 +6,13 @@
  import { modalManager } from '$lib/managers/modal-manager.svelte';
  import { handleError } from '$lib/utils/handle-error';
  import { getAllPeople, getPerson, mergePerson, type PersonResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
  import { flip } from 'svelte/animate';
  import { quintOut } from 'svelte/easing';
  import { fly } from 'svelte/transition';
-  import Button from '../elements/buttons/button.svelte';
  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
  import ControlAppBar from '../shared-components/control-app-bar.svelte';
  import { NotificationType, notificationController } from '../shared-components/notification/notification';
@ -108,10 +108,9 @@
      <div></div>
    {/snippet}
    {#snippet trailing()}
-      <Button size="sm" disabled={!hasSelection} onclick={handleMerge}>
-        <Icon path={mdiMerge} size={18} />
-        <span class="ms-2">{$t('merge')}</span></Button
-      >
+      <Button leadingIcon={mdiMerge} size="small" shape="round" disabled={!hasSelection} onclick={handleMerge}>
+        {$t('merge')}
+      </Button>
    {/snippet}
  </ControlAppBar>
  <section class="px-[70px] pt-[100px]">
--- a/web/src/lib/components/faces-page/unmerge-face-selector.svelte
+++ b/web/src/lib/components/faces-page/unmerge-face-selector.svelte
@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
  import { handleError } from '$lib/utils/handle-error';
  import {
@ -9,14 +8,13 @@
    type AssetFaceUpdateItem,
    type PersonResponseDto,
  } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import { mdiMerge, mdiPlus } from '@mdi/js';
  import { onMount, type Snippet } from 'svelte';
  import { t } from 'svelte-i18n';
  import { quintOut } from 'svelte/easing';
  import { fly } from 'svelte/transition';
-  import Button from '../elements/buttons/button.svelte';
  import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
  import { NotificationType, notificationController } from '../shared-components/notification/notification';
  import FaceThumbnail from './face-thumbnail.svelte';
  import PeopleList from './people-list.svelte';
@ -130,33 +128,27 @@
    {#snippet trailing()}
      <div class="flex gap-4">
        <Button
+          shape="round"
          title={$t('create_new_person_hint')}
-          size="sm"
+          leadingIcon={mdiPlus}
+          loading={showLoadingSpinnerCreate}
+          size="small"
          disabled={disableButtons || hasSelection}
          onclick={handleCreate}
        >
-          {#if !showLoadingSpinnerCreate}
-            <Icon path={mdiPlus} size={18} />
-          {:else}
-            <LoadingSpinner />
-          {/if}
-          <span class="ms-2"> {$t('create_new_person')}</span></Button
+          {$t('create_new_person')}</Button
        >
        <Button
-          size="sm"
+          size="small"
+          shape="round"
          title={$t('reassing_hint')}
+          leadingIcon={mdiMerge}
+          loading={showLoadingSpinnerReassign}
          disabled={disableButtons || !hasSelection}
          onclick={handleReassign}
        >
-          {#if !showLoadingSpinnerReassign}
-            <div>
-              <Icon path={mdiMerge} size={18} class="rotate-180" />
-            </div>
-          {:else}
-            <LoadingSpinner />
-          {/if}
-          <span class="ms-2"> {$t('reassign')}</span></Button
-        >
+          {$t('reassign')}
+        </Button>
      </div>
    {/snippet}
  </ControlAppBar>
--- a/web/src/lib/components/forms/library-scan-settings-form.svelte
+++ b/web/src/lib/components/forms/library-scan-settings-form.svelte
@ -1,11 +1,11 @@
 <script lang="ts">
  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
  import { type LibraryResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import { mdiPencilOutline } from '@mdi/js';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
  import { handleError } from '../../utils/handle-error';
-  import Button from '../elements/buttons/button.svelte';
  import LibraryExclusionPatternForm from './library-exclusion-pattern-form.svelte';

  interface Props {
@ -152,20 +152,21 @@
            {$t('admin.no_pattern_added')}
          {/if}
        </td>
-        <td class="w-1/4 text-ellipsis px-4 text-sm"
-          ><Button
-            size="sm"
+        <td class="w-1/4 text-ellipsis px-4 text-sm flex justify-center">
+          <Button
+            size="small"
+            shape="round"
            onclick={() => {
              addExclusionPattern = true;
            }}>{$t('add_exclusion_pattern')}</Button
-          ></td
-        ></tr
-      >
+          >
+        </td>
+      </tr>
    </tbody>
  </table>

-  <div class="flex w-full justify-end gap-4">
-    <Button size="sm" color="gray" onclick={onCancel}>{$t('cancel')}</Button>
-    <Button size="sm" type="submit">{$t('save')}</Button>
+  <div class="flex w-full justify-end gap-2">
+    <Button size="small" shape="round" color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
+    <Button size="small" shape="round" type="submit">{$t('save')}</Button>
  </div>
 </form>
--- a/web/src/lib/components/forms/tag-asset-form.svelte
+++ b/web/src/lib/components/forms/tag-asset-form.svelte
@ -1,13 +1,13 @@
 <script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import { mdiClose, mdiTag } from '@mdi/js';
+  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
-  import Button from '../elements/buttons/button.svelte';
+  import { SvelteSet } from 'svelte/reactivity';
  import Combobox, { type ComboBoxOption } from '../shared-components/combobox.svelte';
  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
-  import { onMount } from 'svelte';
-  import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { SvelteSet } from 'svelte/reactivity';

  interface Props {
    onTag: (tagIds: string[]) => void;
@ -93,7 +93,7 @@
  </section>

  {#snippet stickyBottom()}
-    <Button color="gray" fullwidth onclick={onCancel}>{$t('cancel')}</Button>
-    <Button type="submit" fullwidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button>
+    <Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
+    <Button type="submit" shape="round" fullWidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button>
  {/snippet}
 </FullScreenModal>
--- a/web/src/lib/components/onboarding-page/onboarding-hello.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-hello.svelte
@ -1,11 +1,10 @@
 <script lang="ts">
-  import OnboardingCard from './onboarding-card.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import { mdiArrowRight } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
  import { user } from '$lib/stores/user.store';
+  import { Button } from '@immich/ui';
+  import { mdiArrowRight } from '@mdi/js';
  import { t } from 'svelte-i18n';
+  import OnboardingCard from './onboarding-card.svelte';

  interface Props {
    onDone: () => void;
@ -22,9 +21,8 @@
  <p class="text-3xl pb-6 font-light">{$t('onboarding_welcome_description')}</p>

  <div class="w-full flex place-content-end">
-    <Button class="flex gap-2 place-content-center" onclick={() => onDone()}>
+    <Button shape="round" trailingIcon={mdiArrowRight} class="flex gap-2 place-content-center" onclick={onDone}>
      <p>{$t('theme')}</p>
-      <Icon path={mdiArrowRight} size="18" />
    </Button>
  </div>
 </OnboardingCard>
--- a/web/src/lib/components/onboarding-page/onboarding-privacy.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-privacy.svelte
@ -1,14 +1,13 @@
 <script lang="ts">
+  import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
  import { user } from '$lib/stores/user.store';
  import { getConfig, type SystemConfigDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import { mdiArrowLeft, mdiArrowRight, mdiIncognito } from '@mdi/js';
  import { onMount } from 'svelte';
-  import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import OnboardingCard from './onboarding-card.svelte';
  import { t } from 'svelte-i18n';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import OnboardingCard from './onboarding-card.svelte';

  interface Props {
    onDone: () => void;
@ -45,13 +44,19 @@
        />
        <div class="flex pt-4">
          <div class="w-full flex place-content-start">
-            <Button class="flex gap-2 place-content-center" onclick={() => onPrevious()}>
-              <Icon path={mdiArrowLeft} size="18" />
+            <Button
+              shape="round"
+              leadingIcon={mdiArrowLeft}
+              class="flex gap-2 place-content-center"
+              onclick={() => onPrevious()}
+            >
              <p>{$t('theme')}</p>
            </Button>
          </div>
          <div class="flex w-full place-content-end">
            <Button
+              shape="round"
+              trailingIcon={mdiArrowRight}
              onclick={() => {
                adminSettingsComponent?.handleSave({ map: config?.map, newVersionCheck: config?.newVersionCheck });
                onDone();
@ -59,7 +64,6 @@
            >
              <span class="flex place-content-center place-items-center gap-2">
                {$t('admin.storage_template_settings')}
-                <Icon path={mdiArrowRight} size="18" />
              </span>
            </Button>
          </div>
--- a/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
@ -1,16 +1,15 @@
 <script lang="ts">
+  import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
+  import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
  import { featureFlags } from '$lib/stores/server-config.store';
  import { user } from '$lib/stores/user.store';
  import { getConfig, type SystemConfigDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import { mdiArrowLeft, mdiCheck, mdiHarddisk } from '@mdi/js';
  import { onMount } from 'svelte';
-  import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
-  import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import OnboardingCard from './onboarding-card.svelte';
  import { t } from 'svelte-i18n';
-  import FormatMessage from '$lib/components/i18n/format-message.svelte';
+  import OnboardingCard from './onboarding-card.svelte';

  interface Props {
    onDone: () => void;
@ -52,13 +51,19 @@
          >
            <div class="flex pt-4">
              <div class="w-full flex place-content-start">
-                <Button class="flex gap-2 place-content-center" onclick={() => onPrevious()}>
-                  <Icon path={mdiArrowLeft} size="18" />
+                <Button
+                  shape="round"
+                  leadingIcon={mdiArrowLeft}
+                  class="flex gap-2 place-content-center"
+                  onclick={() => onPrevious()}
+                >
                  <p>{$t('privacy')}</p>
                </Button>
              </div>
              <div class="flex w-full place-content-end">
                <Button
+                  shape="round"
+                  trailingIcon={mdiCheck}
                  onclick={() => {
                    adminSettingsComponent?.handleSave({ storageTemplate: config?.storageTemplate });
                    onDone();
@ -66,7 +71,6 @@
                >
                  <span class="flex place-content-center place-items-center gap-2">
                    {$t('done')}
-                    <Icon path={mdiCheck} size="18" />
                  </span>
                </Button>
              </div>
--- a/web/src/lib/components/onboarding-page/onboarding-theme.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-theme.svelte
@ -1,9 +1,9 @@
 <script lang="ts">
  import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
-  import Button from '$lib/components/elements/buttons/button.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
  import { Theme } from '$lib/constants';
  import { themeManager } from '$lib/managers/theme-manager.svelte';
+  import { Button } from '@immich/ui';
  import { mdiArrowRight, mdiThemeLightDark } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import OnboardingCard from './onboarding-card.svelte';
@ -23,7 +23,7 @@
  <div class="flex gap-4 mb-6">
    <button
      type="button"
-      class="light w-1/2 aspect-square bg-light rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-dark-primary/80 border-immich-primary dark:border dark:border-transparent"
+      class="w-1/2 aspect-square bg-light dark:bg-dark rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-dark-primary/80 border-immich-primary dark:border dark:border-transparent"
      onclick={() => themeManager.setTheme(Theme.LIGHT)}
    >
      <div
@ -49,9 +49,13 @@

  <div class="flex">
    <div class="w-full flex place-content-end">
-      <Button class="flex gap-2 place-content-center" onclick={() => onDone()}>
+      <Button
+        trailingIcon={mdiArrowRight}
+        shape="round"
+        class="flex gap-2 place-content-center"
+        onclick={() => onDone()}
+      >
        <p>{$t('privacy')}</p>
-        <Icon path={mdiArrowRight} size="18" />
      </Button>
    </div>
  </div>
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@ -1,13 +1,13 @@
 <script lang="ts">
  import { page } from '$app/state';
  import { focusTrap } from '$lib/actions/focus-trap';
-  import Button from '$lib/components/elements/buttons/button.svelte';
  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
  import { AppRoute } from '$lib/constants';
  import { modalManager } from '$lib/managers/modal-manager.svelte';
  import AvatarEditModal from '$lib/modals/AvatarEditModal.svelte';
  import { user } from '$lib/stores/user.store';
+  import { Button } from '@immich/ui';
  import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import { fade } from 'svelte/transition';
@ -53,7 +53,15 @@
    </div>

    <div class="flex flex-col gap-1">
-      <Button href={AppRoute.USER_SETTINGS} onclick={onClose} color="dark-gray" size="sm" shadow={false} border>
+      <Button
+        href={AppRoute.USER_SETTINGS}
+        onclick={onClose}
+        size="small"
+        color="secondary"
+        variant="ghost"
+        shape="round"
+        class="border dark:border-immich-dark-gray dark:bg-gray-500 dark:hover:bg-immich-dark-primary/50 hover:bg-immich-primary/10 dark:text-white"
+      >
        <div class="flex place-content-center place-items-center text-center gap-2 px-2">
          <Icon path={mdiCog} size="18" ariaHidden />
          {$t('account_settings')}
@ -63,11 +71,12 @@
        <Button
          href={AppRoute.ADMIN_USERS}
          onclick={onClose}
-          color="dark-gray"
-          size="sm"
-          shadow={false}
-          border
+          shape="round"
+          variant="ghost"
+          size="small"
+          color="secondary"
          aria-current={page.url.pathname.includes('/admin') ? 'page' : undefined}
+          class="border dark:border-immich-dark-gray dark:bg-gray-500 dark:hover:bg-immich-dark-primary/50 hover:bg-immich-primary/10 dark:text-white"
        >
          <div class="flex place-content-center place-items-center text-center gap-2 px-2">
            <Icon path={mdiWrench} size="18" ariaHidden />
--- a/web/src/lib/components/shared-components/profile-image-cropper.svelte
+++ b/web/src/lib/components/shared-components/profile-image-cropper.svelte
@ -1,14 +1,14 @@
 <script lang="ts">
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
  import { user } from '$lib/stores/user.store';
  import { handleError } from '$lib/utils/handle-error';
  import { createProfileImage, type AssetResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import domtoimage from 'dom-to-image';
  import { onMount } from 'svelte';
-  import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import { NotificationType, notificationController } from './notification/notification';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
  import { t } from 'svelte-i18n';
+  import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
+  import { NotificationType, notificationController } from './notification/notification';

  interface Props {
    asset: AssetResponseDto;
@ -99,6 +99,6 @@
  </div>

  {#snippet stickyBottom()}
-    <Button fullwidth onclick={handleSetProfilePicture}>{$t('set_as_profile_picture')}</Button>
+    <Button fullWidth shape="round" onclick={handleSetProfilePicture}>{$t('set_as_profile_picture')}</Button>
  {/snippet}
 </FullScreenModal>
--- a/web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte
+++ b/web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte
@ -1,8 +1,8 @@
 <script lang="ts">
-  import Button from '$lib/components/elements/buttons/button.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
  import { ImmichProduct } from '$lib/constants';
  import { getLicenseLink as getProductLink } from '$lib/utils/license-utils';
+  import { Button } from '@immich/ui';
  import { mdiAccount, mdiCheckCircleOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
 </script>
@ -39,6 +39,6 @@
      </div>
    </div>

-    <Button href={getProductLink(ImmichProduct.Client)} fullwidth>{$t('purchase_button_select')}</Button>
+    <Button shape="round" href={getProductLink(ImmichProduct.Client)} fullWidth>{$t('purchase_button_select')}</Button>
  </div>
 </div>
--- a/web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte
+++ b/web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte
@ -1,9 +1,9 @@
 <script lang="ts">
-  import Button from '$lib/components/elements/buttons/button.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
  import { preferences } from '$lib/stores/user.store';
  import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
+  import { Button } from '@immich/ui';
  import { mdiPartyPopper } from '@mdi/js';
  import { t } from 'svelte-i18n';

@ -29,6 +29,6 @@
  </div>

  <div class="mt-6 w-full">
-    <Button fullwidth onclick={onDone}>{$t('ok')}</Button>
+    <Button fullWidth shape="round" onclick={onDone}>{$t('ok')}</Button>
  </div>
 </div>
--- a/web/src/lib/components/shared-components/purchasing/purchase-content.svelte
+++ b/web/src/lib/components/shared-components/purchasing/purchase-content.svelte
@ -1,10 +1,9 @@
 <script lang="ts">
-  import Button from '$lib/components/elements/buttons/button.svelte';
  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
  import { purchaseStore } from '$lib/stores/purchase.store';
  import { handleError } from '$lib/utils/handle-error';
  import { activateProduct, getActivationKey } from '$lib/utils/license-utils';
-  import { Heading } from '@immich/ui';
+  import { Button, Heading } from '@immich/ui';
  import { t } from 'svelte-i18n';
  import UserPurchaseOptionCard from './individual-purchase-option-card.svelte';
  import ServerPurchaseOptionCard from './server-purchase-option-card.svelte';
@ -74,7 +73,7 @@
        placeholder="IMCL-0KEY-0CAN-00BE-FOUD-FROM-YOUR-EMAIL-INBX"
        disabled={isLoading}
      />
-      <Button type="submit" rounded="lg"
+      <Button type="submit"
        >{#if isLoading}
          <LoadingSpinner />
        {:else}
--- a/web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte
+++ b/web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte
@ -1,8 +1,8 @@
 <script lang="ts">
-  import Button from '$lib/components/elements/buttons/button.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
  import { ImmichProduct } from '$lib/constants';
  import { getLicenseLink } from '$lib/utils/license-utils';
+  import { Button } from '@immich/ui';
  import { mdiCheckCircleOutline, mdiServer } from '@mdi/js';
  import { t } from 'svelte-i18n';
 </script>
@ -39,6 +39,6 @@
      </div>
    </div>

-    <Button href={getLicenseLink(ImmichProduct.Server)} fullwidth>{$t('purchase_button_select')}</Button>
+    <Button shape="round" href={getLicenseLink(ImmichProduct.Server)} fullWidth>{$t('purchase_button_select')}</Button>
  </div>
 </div>
--- a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
@ -1,13 +1,12 @@
 <script lang="ts">
  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
  import SearchBar from '$lib/components/elements/search-bar.svelte';
  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
  import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
  import { getPeopleThumbnailUrl } from '$lib/utils';
  import { handleError } from '$lib/utils/handle-error';
  import { getAllPeople, type PersonResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import { mdiArrowRight, mdiClose } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import type { SvelteSet } from 'svelte/reactivity';
@ -92,18 +91,14 @@
      {#if showAllPeople || people.length > peopleList.length}
        <div class="flex justify-center mt-2">
          <Button
-            shadow={false}
-            color="text-primary"
+            color="primary"
+            variant="ghost"
+            shape="round"
+            leadingIcon={showAllPeople ? mdiClose : mdiArrowRight}
            class="flex gap-2 place-items-center"
            onclick={() => (showAllPeople = !showAllPeople)}
          >
-            {#if showAllPeople}
-              <span><Icon path={mdiClose} ariaHidden /></span>
-              {$t('collapse')}
-            {:else}
-              <span><Icon path={mdiArrowRight} ariaHidden /></span>
-              {$t('see_all_people')}
-            {/if}
+            {showAllPeople ? $t('collapse') : $t('see_all_people')}
          </Button>
        </div>
      {/if}
--- a/web/src/lib/components/shared-components/version-announcement-box.svelte
+++ b/web/src/lib/components/shared-components/version-announcement-box.svelte
@ -1,10 +1,10 @@
 <script lang="ts">
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
  import { websocketStore } from '$lib/stores/websocket';
  import type { ServerVersionResponseDto } from '@immich/sdk';
-  import Button from '../elements/buttons/button.svelte';
-  import FullScreenModal from './full-screen-modal.svelte';
+  import { Button } from '@immich/ui';
  import { t } from 'svelte-i18n';
-  import FormatMessage from '$lib/components/i18n/format-message.svelte';
+  import FullScreenModal from './full-screen-modal.svelte';

  let showModal = $state(false);

@ -65,7 +65,7 @@
    </div>

    {#snippet stickyBottom()}
-      <Button fullwidth onclick={onAcknowledge}>{$t('acknowledge')}</Button>
+      <Button fullWidth shape="round" onclick={onAcknowledge}>{$t('acknowledge')}</Button>
    {/snippet}
  </FullScreenModal>
 {/if}
--- a/web/src/lib/components/slideshow-settings.svelte
+++ b/web/src/lib/components/slideshow-settings.svelte
@ -2,6 +2,8 @@
  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import { Button } from '@immich/ui';
  import {
    mdiArrowDownThin,
    mdiArrowUpThin,
@ -10,12 +12,10 @@
    mdiPanorama,
    mdiShuffle,
  } from '@mdi/js';
+  import { t } from 'svelte-i18n';
  import { SlideshowLook, SlideshowNavigation, slideshowStore } from '../stores/slideshow.store';
-  import Button from './elements/buttons/button.svelte';
  import type { RenderedOption } from './elements/dropdown.svelte';
  import SettingDropdown from './shared-components/settings/setting-dropdown.svelte';
-  import { t } from 'svelte-i18n';
-  import { SettingInputFieldType } from '$lib/constants';

  const { slideshowDelay, showProgressBar, slideshowNavigation, slideshowLook, slideshowTransition } = slideshowStore;

@ -79,6 +79,6 @@
  </div>

  {#snippet stickyBottom()}
-    <Button fullwidth color="primary" onclick={(_) => onClose()}>{$t('done')}</Button>
+    <Button fullWidth shape="round" color="primary" onclick={() => onClose()}>{$t('done')}</Button>
  {/snippet}
 </FullScreenModal>
--- a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
@ -1,5 +1,5 @@
 <script lang="ts">
-  import Button from '$lib/components/elements/buttons/button.svelte';
+  import { shortcuts } from '$lib/actions/shortcut';
  import Icon from '$lib/components/elements/icon.svelte';
  import Portal from '$lib/components/shared-components/portal/portal.svelte';
  import DuplicateAsset from '$lib/components/utilities-page/duplicates/duplicate-asset.svelte';
@ -7,9 +7,9 @@
  import { handlePromiseError } from '$lib/utils';
  import { suggestDuplicate } from '$lib/utils/duplicate-utils';
  import { navigate } from '$lib/utils/navigation';
-  import { shortcuts } from '$lib/actions/shortcut';
  import { type AssetResponseDto } from '@immich/sdk';
-  import { mdiCheck, mdiTrashCanOutline, mdiImageMultipleOutline } from '@mdi/js';
+  import { Button } from '@immich/ui';
+  import { mdiCheck, mdiImageMultipleOutline, mdiTrashCanOutline } from '@mdi/js';
  import { onDestroy, onMount } from 'svelte';
  import { t } from 'svelte-i18n';
  import { SvelteSet } from 'svelte/reactivity';
@ -132,18 +132,28 @@
    <!-- CONFIRM BUTTONS -->
    <div class="flex text-xs text-black">
      {#if trashCount === 0}
-        <Button size="sm" color="primary" class="flex place-items-center rounded-s-full gap-2" onclick={handleResolve}>
+        <Button
+          size="small"
+          color="primary"
+          class="flex place-items-center rounded-s-full gap-2"
+          onclick={handleResolve}
+        >
          <Icon path={mdiCheck} size="20" />{$t('keep_all')}
        </Button>
      {:else}
-        <Button size="sm" color="red" class="flex place-items-center rounded-s-full gap-2 py-3" onclick={handleResolve}>
+        <Button
+          size="small"
+          color="danger"
+          class="flex place-items-center rounded-s-full gap-2 py-3"
+          onclick={handleResolve}
+        >
          <Icon path={mdiTrashCanOutline} size="20" />{trashCount === assets.length
            ? $t('trash_all')
            : $t('trash_count', { values: { count: trashCount } })}
        </Button>
      {/if}
      <Button
-        size="sm"
+        size="small"
        color="primary"
        class="flex place-items-center rounded-e-full  gap-2"
        onclick={handleStack}
--- a/web/src/lib/modals/PersonEditBirthDateModal.svelte
+++ b/web/src/lib/modals/PersonEditBirthDateModal.svelte
@ -5,10 +5,9 @@
  } from '$lib/components/shared-components/notification/notification';
  import { handleError } from '$lib/utils/handle-error';
  import { updatePerson, type PersonResponseDto } from '@immich/sdk';
-  import { Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
  import { mdiCake } from '@mdi/js';
  import { t } from 'svelte-i18n';
-  import Button from '../components/elements/buttons/button.svelte';
  import DateInput from '../components/elements/date-input.svelte';

  interface Props {
@ -60,8 +59,12 @@

  <ModalFooter>
    <div class="flex gap-3 w-full">
-      <Button color="secondary" fullwidth onclick={() => onClose()}>{$t('cancel')}</Button>
-      <Button type="submit" fullwidth form="set-birth-date-form">{$t('set')}</Button>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
+        {$t('cancel')}
+      </Button>
+      <Button type="submit" shape="round" color="primary" fullWidth>
+        {$t('set')}
+      </Button>
    </div>
  </ModalFooter>
 </Modal>
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -8,7 +8,6 @@
  import AlbumTitle from '$lib/components/album-page/album-title.svelte';
  import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
  import ActivityViewer from '$lib/components/asset-viewer/activity-viewer.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
@ -67,6 +66,7 @@
    updateAlbumInfo,
    type AlbumUserAddDto,
  } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import {
    mdiArrowLeft,
    mdiCogOutline,
@ -552,7 +552,7 @@
            {/if}

            {#if isCreatingSharedAlbum && album.albumUsers.length === 0}
-              <Button size="sm" rounded="lg" disabled={album.assetCount === 0} onclick={handleShare}>
+              <Button size="small" disabled={album.assetCount === 0} onclick={handleShare}>
                {$t('share')}
              </Button>
            {/if}
@ -580,7 +580,7 @@
            >
              {$t('select_from_computer')}
            </button>
-            <Button size="sm" rounded="lg" disabled={!timelineInteraction.selectionActive} onclick={handleAddAssets}
+            <Button size="small" disabled={!timelineInteraction.selectionActive} onclick={handleAddAssets}
              >{$t('done')}</Button
            >
          {/snippet}
--- a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -1,6 +1,5 @@
 <script lang="ts">
  import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
  import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
  import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
@ -12,6 +11,7 @@
  import { handleError } from '$lib/utils/handle-error';
  import { navigate } from '$lib/utils/navigation';
  import { getMySharedLink, SharedLinkType } from '@immich/sdk';
+  import { Button } from '@immich/ui';
  import { tick } from 'svelte';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';