chore: Update buttons in dashboard (#11145)

# Pull Request Template ## Changes * Remove unused component `MaskedText.vue` * Remove unused component `ContactIntro.vue` * Remove unused `AddCustomViews.vue` component * Update buttons in help center upgrade page <img width="741" alt="image" src="https://github.com/user-attachments/assets/f46b8ffa-ef74-4b83-95c1-83842844c4b7" /> * Update SLA view details button in reports page <img width="419" alt="image" src="https://github.com/user-attachments/assets/7db6bff6-9ba5-4c13-850f-b9d4dbb55489" /> * Update assign to me conversation action button <img width="152" alt="image" src="https://github.com/user-attachments/assets/587ee1fe-93c9-48e0-910a-390dd4eac1f2" /> * Update button in participants action <img width="365" alt="image" src="https://github.com/user-attachments/assets/50eb386f-882b-4277-ad61-d557893ac490" /> <img width="365" alt="image" src="https://github.com/user-attachments/assets/3c64ed42-0203-43c6-9a26-8ad9465aa394" /> * Update the show more attributes button <img width="365" alt="image" src="https://github.com/user-attachments/assets/f2105a2f-8441-4d8b-b355-dfe97ce2e362" /> * Update SLA empty state <img width="376" alt="image" src="https://github.com/user-attachments/assets/55fd4376-6183-45c9-acb2-6ad5a6a58730" /> * Update create new label button from dropdown <img width="376" alt="image" src="https://github.com/user-attachments/assets/bb8226d0-795f-431f-8fe4-15d15ee1d695" /> * Update add macro button <img width="382" alt="image" src="https://github.com/user-attachments/assets/b6375402-5213-4041-841b-09c2157ed56a" /> * Update copy button <img width="382" alt="image" src="https://github.com/user-attachments/assets/f1929d63-f7ca-4eab-bfa8-716be2aa4be8" /> * Update the buttons in banner component <img width="849" alt="image" src="https://github.com/user-attachments/assets/bb86b498-ab8e-4a92-8c6a-60edcef0fd7b" /> <img width="838" alt="image" src="https://github.com/user-attachments/assets/4bde00de-907e-49ac-9128-f364a90cd3c1" /> * Update table pagination buttons <img width="968" alt="image" src="https://github.com/user-attachments/assets/8d439af6-8126-4fad-a3fe-89b26a56f880" /> <img width="968" alt="image" src="https://github.com/user-attachments/assets/a178b3d7-3385-4a2b-a0d7-35be9a25fd93" /> * Update filter chip buttons and dropdown colors <img width="541" alt="image" src="https://github.com/user-attachments/assets/7be1f418-82df-4db6-b265-4c185fc79f4b" /> <img width="541" alt="image" src="https://github.com/user-attachments/assets/69110d75-85e9-4974-8c2a-e195b23a335c" /> <img width="173" alt="image" src="https://github.com/user-attachments/assets/c8f5bc82-15b4-4f25-b7d4-35a9280ec7c6" /> <img width="565" alt="image" src="https://github.com/user-attachments/assets/7dad1d00-784b-46eb-b823-e6e55d5f9dc8" /> <img width="565" alt="image" src="https://github.com/user-attachments/assets/384a86ed-f45f-488c-b9aa-1f02b16c813d" /> --------- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2025-12-24 22:57:15 +00:00 · 2025-04-01 05:51:32 +05:30
parent 9fb3053007
commit cc4d54becf
53 changed files with 515 additions and 1003 deletions
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -9,12 +9,14 @@ import ConversationLabels from './labels/LabelBox.vue';
 import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { useTrack } from 'dashboard/composables';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
  components: {
    ContactDetailsItem,
    MultiselectDropdown,
    ConversationLabels,
+    NextButton,
  },
  props: {
    conversationId: {
@@ -212,15 +214,15 @@ export default {
        :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
      >
        <template #button>
-          <woot-button
+          <NextButton
            v-if="showSelfAssign"
-            icon="arrow-right"
-            variant="link"
-            size="small"
+            link
+            xs
+            icon="i-lucide-arrow-right"
+            class="!gap-1"
+            :label="$t('CONVERSATION_SIDEBAR.SELF_ASSIGN')"
            @click="onSelfAssign"
-          >
-            {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
-          </woot-button>
+          />
        </template>
      </ContactDetailsItem>
      <MultiselectDropdown
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -6,12 +6,14 @@ import { useAgentsList } from 'dashboard/composables/useAgentsList';

 import ThumbnailGroup from 'dashboard/components/widgets/ThumbnailGroup.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
  components: {
    Spinner,
    ThumbnailGroup,
    MultiselectDropdownItems,
+    NextButton,
  },
  props: {
    conversationId: {
@@ -165,13 +167,14 @@ export default {
            {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
          </p>
        </div>
-        <woot-button
+        <NextButton
          v-tooltip.left="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
+          slate
+          ghost
+          sm
+          icon="i-lucide-settings"
+          class="relative -top-1"
          :title="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
-          icon="settings"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
          @click="onOpenDropdown"
        />
      </div>
@@ -188,15 +191,15 @@ export default {
      >
        {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
      </p>
-      <woot-button
+      <NextButton
        v-else
-        icon="arrow-right"
-        variant="link"
-        size="small"
+        link
+        xs
+        icon="i-lucide-arrow-right"
+        class="!gap-1"
+        :label="$t('CONVERSATION_PARTICIPANTS.WATCH_CONVERSATION')"
        @click="onSelfAssign"
-      >
-        {{ $t('CONVERSATION_PARTICIPANTS.WATCH_CONVERSATION') }}
-      </woot-button>
+      />
    </div>
    <div
      v-on-clickaway="
@@ -213,13 +216,7 @@ export default {
        >
          {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
        </h4>
-        <woot-button
-          icon="dismiss"
-          size="tiny"
-          color-scheme="secondary"
-          variant="clear"
-          @click="onCloseDropdown"
-        />
+        <NextButton ghost slate xs icon="i-lucide-x" @click="onCloseDropdown" />
      </div>
      <MultiselectDropdownItems
        :options="agentsList"
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
@@ -7,6 +7,7 @@ import { useUISettings } from 'dashboard/composables/useUISettings';
 import Draggable from 'vuedraggable';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import MacroItem from './MacroItem.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 defineProps({
  conversationId: {
@@ -71,9 +72,13 @@ onMounted(() => {
        {{ $t('MACROS.LIST.404') }}
      </p>
      <router-link :to="accountScopedUrl('settings/macros')">
-        <woot-button variant="smooth" icon="add" size="tiny" class="mt-1">
-          {{ $t('MACROS.HEADER_BTN_TXT') }}
-        </woot-button>
+        <NextButton
+          faded
+          xs
+          icon="i-lucide-plus"
+          class="mt-1"
+          :label="$t('MACROS.HEADER_BTN_TXT')"
+        />
      </router-link>
    </div>
    <div
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -2,10 +2,12 @@
 import { useAlert } from 'dashboard/composables';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
  components: {
    EmojiOrIcon,
+    NextButton,
  },
  props: {
    href: {
@@ -62,15 +64,13 @@ export default {
      <span v-else class="text-sm text-n-slate-11">
        {{ $t('CONTACT_PANEL.NOT_AVAILABLE') }}
      </span>
-
-      <woot-button
+      <NextButton
        v-if="showCopy"
-        type="submit"
-        variant="clear"
-        size="tiny"
-        color-scheme="secondary"
-        icon="clipboard"
-        class-names="p-0"
+        ghost
+        xs
+        slate
+        class="ltr:-ml-1 rtl:-mr-1"
+        icon="i-lucide-clipboard"
        @click="onCopy"
      />
    </a>
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 const props = defineProps({
  attributeType: {
@@ -318,17 +319,16 @@ const evenClass = [
      {{ emptyStateMessage }}
    </p>
    <!-- Show more and show less buttons show it if the combinedElements length is greater than 5 -->
-    <div v-if="combinedElements.length > 5" class="flex px-2 py-2">
-      <woot-button
-        size="small"
-        :icon="showAllAttributes ? 'chevron-up' : 'chevron-down'"
-        variant="clear"
-        color-scheme="primary"
-        class="!px-2 hover:!bg-transparent dark:hover:!bg-transparent"
+    <div v-if="combinedElements.length > 5" class="flex items-center px-2 py-2">
+      <NextButton
+        ghost
+        xs
+        :icon="
+          showAllAttributes ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
+        "
+        :label="toggleButtonText"
        @click="onClickToggle"
-      >
-        {{ toggleButtonText }}
-      </woot-button>
+      />
    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import SwitchLayout from './SwitchLayout.vue';
 import { frontendURL } from 'dashboard/helper/URLHelper';
+
 export default {
  components: {
    SwitchLayout,
@@ -37,7 +38,7 @@ export default {
      class="flex px-4 pb-1 justify-between items-center flex-row gap-1 pt-2.5 border-b border-transparent"
    >
      <woot-sidemenu-icon
-        size="tiny"
+        size="xs"
        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5 flex-shrink-0 focus:!bg-n-solid-3 dark:!hover:bg-n-solid-2 hover:!bg-n-alpha-2"
      />
      <router-link
--- a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
@@ -1,114 +0,0 @@
-<script>
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useAlert } from 'dashboard/composables';
-import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  props: {
-    filterType: {
-      type: Number,
-      default: 0,
-    },
-    customViewsQuery: {
-      type: Object,
-      default: () => {},
-    },
-    openLastSavedItem: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  emits: ['close'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      show: true,
-      name: '',
-    };
-  },
-
-  computed: {
-    isButtonDisabled() {
-      return this.v$.name.$invalid;
-    },
-  },
-
-  validations: {
-    name: {
-      required,
-      minLength: minLength(1),
-    },
-  },
-
-  methods: {
-    onClose() {
-      this.$emit('close');
-    },
-    async saveCustomViews() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      try {
-        await this.$store.dispatch('customViews/create', {
-          name: this.name,
-          filter_type: this.filterType,
-          query: this.customViewsQuery,
-        });
-        this.alertMessage =
-          this.filterType === 0
-            ? this.$t('FILTER.CUSTOM_VIEWS.ADD.API_FOLDERS.SUCCESS_MESSAGE')
-            : this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.SUCCESS_MESSAGE');
-        this.onClose();
-
-        useTrack(CONTACTS_EVENTS.SAVE_FILTER, {
-          type: this.filterType === 0 ? 'folder' : 'segment',
-        });
-      } catch (error) {
-        const errorMessage = error?.message;
-        this.alertMessage =
-          errorMessage || this.filterType === 0
-            ? errorMessage
-            : this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.ERROR_MESSAGE');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-      this.openLastSavedItem();
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal v-model:show="show" :on-close="onClose">
-    <woot-modal-header :header-title="$t('FILTER.CUSTOM_VIEWS.ADD.TITLE')" />
-    <form class="w-full" @submit.prevent="saveCustomViews">
-      <div class="w-full">
-        <woot-input
-          v-model="name"
-          :label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
-          type="text"
-          :error="
-            v$.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
-          "
-          :class="{ error: v$.name.$error }"
-          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
-          @blur="v$.name.$touch"
-        />
-
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button :disabled="isButtonDisabled">
-            {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
-          </woot-button>
-          <woot-button variant="clear" @click.prevent="onClose">
-            {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}
-          </woot-button>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
@@ -1,7 +1,12 @@
 <script>
 import { mapGetters } from 'vuex';
 import wootConstants from 'dashboard/constants/globals';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
  data() {
    return {
      helpCenterDocsURL: wootConstants.HELP_CENTER_DOCS_URL,
@@ -86,21 +91,15 @@ export default {
        v-if="isOnChatwootCloud"
        class="flex flex-row gap-3 justify-start items-center sm:justify-center"
      >
-        <woot-button
-          size="medium"
-          variant="hollow"
-          color-scheme="primary"
+        <NextButton
+          outline
+          :label="$t('HELP_CENTER.UPGRADE_PAGE.BUTTON.LEARN_MORE')"
          @click="openHelpCenterDocs"
-        >
-          {{ $t('HELP_CENTER.UPGRADE_PAGE.BUTTON.LEARN_MORE') }}
-        </woot-button>
-        <woot-button
-          size="medium"
-          color-scheme="primary"
+        />
+        <NextButton
+          :label="$t('HELP_CENTER.UPGRADE_PAGE.BUTTON.UPGRADE')"
          @click="openBillingPage"
-        >
-          {{ $t('HELP_CENTER.UPGRADE_PAGE.BUTTON.UPGRADE') }}
-        </woot-button>
+        />
      </div>
    </div>
    <div
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -3,10 +3,12 @@ import { mapGetters } from 'vuex';
 import NotificationPanelList from './NotificationPanelList.vue';
 import { useTrack } from 'dashboard/composables';
 import { ACCOUNT_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
  components: {
    NotificationPanelList,
+    NextButton,
  },
  emits: ['close'],
  data() {
@@ -148,28 +150,27 @@ export default {
          </span>
        </div>
        <div class="flex gap-2">
-          <woot-button
+          <NextButton
            v-if="!noUnreadNotificationAvailable"
-            color-scheme="primary"
-            variant="smooth"
-            size="tiny"
+            faded
+            xs
+            icon="i-lucide-list-check"
            :is-loading="uiFlags.isUpdating"
+            :label="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
            @click="onMarkAllDoneClick"
-          >
-            {{ $t('NOTIFICATIONS_PAGE.MARK_ALL_DONE') }}
-          </woot-button>
-          <woot-button
-            color-scheme="secondary"
-            variant="smooth"
-            size="tiny"
-            icon="settings"
+          />
+          <NextButton
+            faded
+            xs
+            slate
+            icon="i-lucide-settings"
            @click="openAudioNotificationSettings"
          />
-          <woot-button
-            color-scheme="secondary"
-            variant="link"
-            size="tiny"
-            icon="dismiss"
+          <NextButton
+            ghost
+            xs
+            slate
+            icon="i-lucide-x"
            @click="closeNotificationPanel"
          />
        </div>
@@ -186,25 +187,18 @@ export default {
        class="flex items-center justify-between px-5 py-1"
      >
        <div class="flex">
-          <woot-button
-            size="medium"
-            variant="clear"
-            color-scheme="secondary"
-            :is-disabled="inFirstPage"
+          <NextButton
+            ghost
+            slate
+            icon="i-lucide-chevrons-left"
+            :disabled="inFirstPage"
            @click="onClickFirstPage"
-          >
-            <fluent-icon icon="chevron-left" size="16" />
-            <fluent-icon
-              icon="chevron-left"
-              size="16"
-              class="rtl:-mr-3 ltr:-ml-3"
-            />
-          </woot-button>
-          <woot-button
-            color-scheme="secondary"
-            variant="clear"
-            size="medium"
-            icon="chevron-left"
+          />
+          <NextButton
+            ghost
+            slate
+            icon="i-lucide-chevron-left"
+            class="ltr:-ml-3 rtl:-mr-3"
            :disabled="inFirstPage"
            @click="onClickPreviousPage"
          />
@@ -213,28 +207,21 @@ export default {
          {{ currentPage }} - {{ lastPage }}
        </span>
        <div class="flex">
-          <woot-button
-            color-scheme="secondary"
-            variant="clear"
-            size="medium"
-            icon="chevron-right"
+          <NextButton
+            ghost
+            slate
+            icon="i-lucide-chevron-right"
+            class="ltr:-mr-3 rtl:-ml-3"
            :disabled="inLastPage"
            @click="onClickNextPage"
          />
-          <woot-button
-            size="medium"
-            variant="clear"
-            color-scheme="secondary"
+          <NextButton
+            ghost
+            slate
+            icon="i-lucide-chevrons-right"
            :disabled="inLastPage"
            @click="onClickLastPage"
-          >
-            <fluent-icon icon="chevron-right" size="16" />
-            <fluent-icon
-              icon="chevron-right"
-              size="16"
-              class="rtl:-mr-3 ltr:-ml-3"
-            />
-          </woot-button>
+          />
        </div>
      </div>
      <div v-else />
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
@@ -1,10 +1,12 @@
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { dynamicTime } from 'shared/helpers/timeHelper';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
  components: {
    Thumbnail,
+    NextButton,
  },
  props: {
    notificationItem: {
@@ -39,11 +41,10 @@ export default {

 <template>
  <div class="w-full">
-    <woot-button
-      size="expanded"
-      color-scheme="secondary"
-      variant="link"
-      class="w-full"
+    <NextButton
+      link
+      slate
+      class="!w-full !h-auto"
      @click="onClickOpenNotification()"
    >
      <div
@@ -100,6 +101,6 @@ export default {
          </span>
        </div>
      </div>
-    </woot-button>
+    </NextButton>
  </div>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
@@ -2,12 +2,14 @@
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import NotificationPanelItem from './NotificationPanelItem.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
  components: {
    NotificationPanelItem,
    Spinner,
    EmptyState,
+    NextButton,
  },
  props: {
    notifications: {
@@ -59,16 +61,13 @@ export default {
      v-if="showEmptyResult"
      :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
    />
-    <woot-button
+    <NextButton
      v-if="!isLoading && inLastPage"
-      size="expanded"
-      variant="clear"
-      color-scheme="primary"
-      class-names="mt-3"
+      ghost
+      class="!w-full mt-3"
+      :label="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS')"
      @click="openNotificationPage"
-    >
-      {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS') }}
-    </woot-button>
+    />
    <div
      v-if="isLoading"
      class="flex items-center justify-center mx-2 my-12 text-sm font-medium"
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
@@ -51,7 +51,8 @@ const closeDropdown = () => emit('closeDropdown');

 <template>
  <FilterButton
-    right-icon="chevron-down"
+    trailing-icon
+    icon="i-lucide-chevron-down"
    :button-text="name"
    @click="toggleDropdown"
  >
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
@@ -59,7 +59,11 @@ const closeDropdown = () => {
 </script>

 <template>
-  <FilterButton :button-text="name" left-icon="filter" @click="toggleDropdown">
+  <FilterButton
+    :button-text="name"
+    icon="i-lucide-filter"
+    @click="toggleDropdown"
+  >
    <!-- Dropdown with search and sub-dropdown -->
    <template v-if="showMenu" #dropdown>
      <FilterListDropdown
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -1,8 +1,11 @@
 <script>
 import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
  components: {
    SLAPopoverCard,
+    NextButton,
  },
  props: {
    slaEvents: {
@@ -34,13 +37,13 @@ export default {
    class="flex items-center col-span-2 text-slate-11 justify-end"
  >
    <div class="relative">
-      <woot-button
-        color-scheme="secondary"
-        variant="link"
+      <NextButton
+        link
+        slate
+        type="button"
+        :label="$t('SLA_REPORTS.TABLE.VIEW_DETAILS')"
        @click="openSlaEvents"
-      >
-        {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
-      </woot-button>
+      />
      <SLAPopoverCard
        v-if="showSlaPopoverCard"
        :sla-missed-events="slaEvents"
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
@@ -1,5 +1,6 @@
 <script setup>
 import BaseEmptyState from './BaseEmptyState.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 const emit = defineEmits(['primaryAction']);
 const primaryAction = () => emit('primaryAction');
@@ -10,13 +11,11 @@ const primaryAction = () => emit('primaryAction');
    <p class="max-w-xs text-sm font-medium text-center">
      {{ $t('SLA.LIST.404') }}
    </p>
-    <woot-button
-      color-scheme="primary"
-      icon="plus-sign"
-      class="px-5 mt-4 rounded-xl"
+    <NextButton
+      icon="i-lucide-plus"
+      class="mt-4"
+      :label="$t('SLA.ADD_ACTION_LONG')"
      @click="primaryAction"
-    >
-      {{ $t('SLA.ADD_ACTION_LONG') }}
-    </woot-button>
+    />
  </BaseEmptyState>
 </template>