feat: Update button component (#10362)

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue

@@ -2,8 +2,7 @@
 import { defineProps } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import Button from 'dashboard/components-next/button/Button.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 defineProps({
   items: {
@@ -33,21 +32,17 @@ const onClick = event => {
   <nav :aria-label="t('BREADCRUMB.ARIA_LABEL')" class="flex items-center h-8">
     <ol class="flex items-center mb-0">
       <li v-for="(item, index) in items" :key="index" class="flex items-center">
-        <Button
+        <button
           v-if="index === 0"
-          :label="item.label"
-          variant="link"
-          text-variant="info"
-          class="!p-0 text-sm !font-normal hover:!no-underline max-w-56 !text-slate-300 dark:!text-slate-500 hover:!text-slate-700 dark:hover:!text-slate-100"
-          size="sm"
+          class="inline-flex items-center justify-center min-w-0 gap-2 p-0 text-sm font-medium transition-all duration-200 ease-in-out border-0 rounded-lg text-n-slate-11 hover:text-n-slate-12 outline-transparent max-w-56"
           @click="onClick"
-        />
+        >
+          <span class="min-w-0 truncate">{{ item.label }}</span>
+        </button>
         <template v-else>
-          <FluentIcon
-            icon="chevron-lucide-right"
-            size="18"
-            icon-lib="lucide"
-            class="flex-shrink-0 mx-2 text-slate-300 dark:text-slate-500"
+          <Icon
+            icon="i-lucide-chevron-right"
+            class="flex-shrink-0 mx-2 size-4 text-n-slate-11 dark:text-n-slate-11"
           />
           <span
             class="text-sm truncate text-slate-900 dark:text-slate-50 max-w-56"