diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
index 2995871a9f..e2f3407d5e 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
@@ -1,56 +1,32 @@
 <template>
 
   <div>
-    <ConfirmationDialog
-      v-model="restoreDialog"
-      title="Restore channel"
-      :text="`Are you sure you want to restore ${name} and make it active again?`"
-      data-test="confirm-restore"
-      confirmButtonText="Restore"
-      @confirm="restoreHandler"
-    />
+    <KModal
+      v-if="activeDialog"
+      :title="dialogConfig.title"
+      :submitText="dialogConfig.submitText"
+      cancelText="Cancel"
+      data-test="confirm-dialog"
+      :submitDisabled="dialogConfig.submitDisabled"
+      @submit="handleSubmit"
+      @cancel="activeDialog = null"
+    >
+      <p>{{ dialogConfig.message }}</p>
+      <StudioBanner
+        v-if="dialogConfig.errorMessage"
+        error
+      >
+        {{ dialogConfig.errorMessage }}
+      </StudioBanner>
+    </KModal>
 
-    <ConfirmationDialog
-      v-model="makePublicDialog"
-      title="Make channel public"
-      :text="`All users will be able to view and import content from ${name}.`"
-      :error-text="communityChannelErrorMessage"
-      :disable-submit="isCommunityChannel"
-      data-test="confirm-public"
-      confirmButtonText="Make public"
-      @confirm="makePublicHandler"
-    />
-    <ConfirmationDialog
-      v-model="makePrivateDialog"
-      title="Make channel private"
-      :text="`Only users with view-only or edit permissions will be able to access ${name}.`"
-      data-test="confirm-private"
-      confirmButtonText="Make private"
-      @confirm="makePrivateHandler"
-    />
-    <ConfirmationDialog
-      v-model="deleteDialog"
-      title="Permanently delete channel"
-      :text="`Are you sure you want to permanently delete ${name}?  This can not be undone.`"
-      data-test="confirm-delete"
-      confirmButtonText="Delete permanently"
-      @confirm="deleteHandler"
-    />
-    <ConfirmationDialog
-      v-model="softDeleteDialog"
-      title="Permanently delete channel"
-      :text="`Are you sure you want to delete ${name}?`"
-      data-test="confirm-softdelete"
-      confirmButtonText="Delete"
-      @confirm="softDeleteHandler"
-    />
     <BaseMenu>
       <template #activator="{ on }">
         <VBtn
           v-bind="$attrs"
           v-on="on"
         >
-          actions
+          Actions
           <Icon
             icon="dropdown"
             class="ml-1"
@@ -61,13 +37,13 @@
         <template v-if="channel.deleted">
           <VListTile
             data-test="restore"
-            @click="restoreDialog = true"
+            @click="openDialog('restore')"
           >
             <VListTileTitle>Restore</VListTileTitle>
           </VListTile>
           <VListTile
             data-test="delete"
-            @click="deleteDialog = true"
+            @click="openDialog('permanentDelete')"
           >
             <VListTileTitle>Delete permanently</VListTileTitle>
           </VListTile>
@@ -94,21 +70,21 @@
           <VListTile
             v-if="channel.public"
             data-test="private"
-            @click="makePrivateDialog = true"
+            @click="openDialog('makePrivate')"
           >
             <VListTileTitle>Make private</VListTileTitle>
           </VListTile>
           <VListTile
             v-else
             data-test="public"
-            @click="makePublicDialog = true"
+            @click="openDialog('makePublic')"
           >
             <VListTileTitle>Make public</VListTileTitle>
           </VListTile>
           <VListTile
             v-if="!channel.public"
             data-test="softdelete"
-            @click="softDeleteDialog = true"
+            @click="openDialog('softDelete')"
           >
             <VListTileTitle>Delete channel</VListTileTitle>
           </VListTile>
@@ -123,15 +99,15 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import ConfirmationDialog from '../../components/ConfirmationDialog';
   import { RouteNames } from '../../constants';
   import { channelExportMixin } from 'shared/views/channel/mixins';
   import { CommunityLibraryStatus } from 'shared/constants';
+  import StudioBanner from 'shared/views/StudioBanner';
 
   export default {
     name: 'ChannelActionsDropdown',
     components: {
-      ConfirmationDialog,
+      StudioBanner,
     },
     mixins: [channelExportMixin],
     props: {
@@ -141,11 +117,7 @@
       },
     },
     data: () => ({
-      deleteDialog: false,
-      makePublicDialog: false,
-      makePrivateDialog: false,
-      restoreDialog: false,
-      softDeleteDialog: false,
+      activeDialog: null,
     }),
     computed: {
       ...mapGetters('channel', ['getChannel']),
@@ -163,6 +135,43 @@
           },
         };
       },
+      dialogConfig() {
+        const configs = {
+          restore: {
+            title: 'Restore channel',
+            submitText: 'Restore',
+            message: `Are you sure you want to restore ${this.name} and make it active again?`,
+            handler: this.restoreHandler,
+          },
+          makePublic: {
+            title: 'Make channel public',
+            submitText: 'Make public',
+            message: `All users will be able to view and import content from ${this.name}.`,
+            handler: this.makePublicHandler,
+            errorMessage: this.communityChannelErrorMessage,
+            submitDisabled: this.isCommunityChannel,
+          },
+          makePrivate: {
+            title: 'Make channel private',
+            submitText: 'Make private',
+            message: `Only users with view-only or edit permissions will be able to access ${this.name}.`,
+            handler: this.makePrivateHandler,
+          },
+          permanentDelete: {
+            title: 'Permanently delete channel',
+            submitText: 'Delete permanently',
+            message: `Are you sure you want to permanently delete ${this.name}? This can not be undone.`,
+            handler: this.deleteHandler,
+          },
+          softDelete: {
+            title: 'Delete channel',
+            submitText: 'Delete',
+            message: `Are you sure you want to delete ${this.name}?`,
+            handler: this.softDeleteHandler,
+          },
+        };
+        return configs[this.activeDialog] || {};
+      },
       isCommunityChannel() {
         const status = this.channel.latest_community_library_submission_status;
         return status === CommunityLibraryStatus.APPROVED || status === CommunityLibraryStatus.LIVE;
@@ -180,6 +189,15 @@
         'deleteChannel',
         'updateChannel',
       ]),
+      openDialog(type) {
+        this.activeDialog = type;
+      },
+      handleSubmit() {
+        if (this.dialogConfig.handler) {
+          this.dialogConfig.handler();
+        }
+        this.activeDialog = null;
+      },
       async downloadPDF() {
         this.$store.dispatch('showSnackbarSimple', 'Generating PDF...');
         const channelList = await this.getAdminChannelListDetails([this.channel.id]);
@@ -191,7 +209,6 @@
         return this.generateChannelsCSV(channelList);
       },
       restoreHandler() {
-        this.restoreDialog = false;
         this.updateChannel({
           id: this.channelId,
           deleted: false,
@@ -200,7 +217,6 @@
         });
       },
       softDeleteHandler() {
-        this.softDeleteDialog = false;
         this.updateChannel({
           id: this.channelId,
           deleted: true,
@@ -209,14 +225,12 @@
         });
       },
       deleteHandler() {
-        this.deleteDialog = false;
         this.$emit('deleted');
         return this.deleteChannel(this.channelId).then(() => {
           this.$store.dispatch('showSnackbarSimple', 'Channel deleted permanently');
         });
       },
       makePublicHandler() {
-        this.makePublicDialog = false;
         this.updateChannel({
           id: this.channelId,
           isPublic: true,
@@ -225,7 +239,6 @@
         });
       },
       makePrivateHandler() {
-        this.makePrivateDialog = false;
         this.updateChannel({
           id: this.channelId,
           isPublic: false,
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js b/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js
index 01113d2371..f4bf9e91e0 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelActionsDropdown.spec.js
@@ -1,9 +1,12 @@
-import { mount } from '@vue/test-utils';
-import router from '../../../router';
-import { factory } from '../../../store';
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
 import ChannelActionsDropdown from '../ChannelActionsDropdown';
 
-const store = factory();
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
 const channelId = '11111111111111111111111111111111';
 const channel = {
@@ -19,125 +22,295 @@ const channel = {
   source_url: 'source.com',
 };
 
-function makeWrapper(channelProps = {}) {
-  const mocks = {
-    restore() {
-      for (const key of Object.keys(this)) {
-        if (key === 'restore') continue;
-        this[key].mockRestore();
-      }
+jest.mock('shared/views/channel/mixins', () => ({
+  channelExportMixin: {
+    methods: {
+      generateChannelsPDF: jest.fn(() => Promise.resolve()),
+      generateChannelsCSV: jest.fn(() => Promise.resolve()),
     },
-  };
-  mocks.downloadPDF = jest.spyOn(ChannelActionsDropdown.methods, 'downloadPDF').mockResolvedValue();
-  mocks.downloadCSV = jest.spyOn(ChannelActionsDropdown.methods, 'downloadCSV').mockResolvedValue();
-  mocks.deleteChannel = jest
-    .spyOn(ChannelActionsDropdown.methods, 'deleteChannel')
-    .mockResolvedValue();
-  mocks.updateChannel = jest
-    .spyOn(ChannelActionsDropdown.methods, 'updateChannel')
-    .mockResolvedValue();
-
-  const wrapper = mount(ChannelActionsDropdown, {
-    router,
-    store,
-    propsData: { channelId },
-    computed: {
-      channel() {
-        return {
-          ...channel,
-          ...channelProps,
-        };
+  },
+}));
+
+const mockActions = {
+  updateChannel: jest.fn(() => Promise.resolve()),
+  deleteChannel: jest.fn(() => Promise.resolve()),
+  getAdminChannelListDetails: jest.fn(() => Promise.resolve([channel])),
+  showSnackbarSimple: jest.fn(() => Promise.resolve()),
+};
+
+const createMockStore = (channelProps = {}) => {
+  const mergedChannel = { ...channel, ...channelProps };
+
+  return new Vuex.Store({
+    modules: {
+      channel: {
+        namespaced: true,
+        state: {
+          channelsMap: { [channelId]: mergedChannel },
+        },
+        getters: {
+          getChannel: state => id => state.channelsMap[id],
+        },
+      },
+      channelAdmin: {
+        namespaced: true,
+        actions: {
+          updateChannel: mockActions.updateChannel,
+          deleteChannel: mockActions.deleteChannel,
+          getAdminChannelListDetails: mockActions.getAdminChannelListDetails,
+        },
       },
     },
+    actions: {
+      showSnackbarSimple: mockActions.showSnackbarSimple,
+    },
   });
+};
 
-  return [wrapper, mocks];
-}
+const createMockRouter = () => {
+  return new VueRouter({
+    routes: [
+      {
+        name: 'USERS',
+        path: '/users',
+      },
+    ],
+  });
+};
 
-describe('channelActionsDropdown', () => {
-  let wrapper, mocks;
+const renderComponent = (props = {}) => {
+  const store = createMockStore(props.channelProps);
+  const router = createMockRouter();
+
+  return render(ChannelActionsDropdown, {
+    localVue,
+    store,
+    props: { channelId },
+    routes: router,
+  });
+};
 
-  afterEach(() => {
-    if (mocks) {
-      mocks.restore();
-    }
+describe('channelActionsDropdown', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
 
-  describe('deleted channel actions', () => {
-    beforeEach(() => {
-      [wrapper, mocks] = makeWrapper({ deleted: true });
+  describe('menu visibility', () => {
+    it('should show correct menu items for live private channel', () => {
+      renderComponent({ channelProps: { public: false, deleted: false } });
+      expect(screen.getByText('Download PDF')).toBeVisible();
+      expect(screen.getByText('Download CSV')).toBeVisible();
+      expect(screen.getByText('Make public')).toBeVisible();
+      expect(screen.getByText('Delete channel')).toBeVisible();
+      expect(screen.queryByText('Restore')).not.toBeInTheDocument();
     });
 
-    it('restore channel should open restore confirmation', async () => {
-      await wrapper.findComponent('[data-test="restore"]').trigger('click');
-      expect(wrapper.vm.restoreDialog).toBe(true);
+    it('should show correct menu items for live public channel', () => {
+      renderComponent({ channelProps: { public: true, deleted: false } });
+      expect(screen.getByText('Download PDF')).toBeVisible();
+      expect(screen.getByText('Download CSV')).toBeVisible();
+      expect(screen.getByText('Make private')).toBeVisible();
+      expect(screen.queryByText('Delete channel')).not.toBeInTheDocument();
+      expect(screen.queryByText('Restore')).not.toBeInTheDocument();
     });
 
-    it('confirm restore channel should call updateChannel with deleted = false', () => {
-      wrapper.findComponent('[data-test="confirm-restore"]').vm.$emit('confirm');
-      expect(mocks.updateChannel).toHaveBeenCalledWith({ id: channelId, deleted: false });
+    it('should show correct menu items for deleted channel', () => {
+      renderComponent({ channelProps: { deleted: true } });
+      expect(screen.getByText('Restore')).toBeVisible();
+      expect(screen.getByText('Delete permanently')).toBeVisible();
+      expect(screen.queryByText('Download PDF')).not.toBeInTheDocument();
+      expect(screen.queryByText('Make public')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('restore channel dialog', () => {
+    let user;
+    const dialogMessage = `Are you sure you want to restore Channel Test and make it active again?`;
+
+    beforeEach(async () => {
+      user = userEvent.setup();
+      renderComponent({ channelProps: { deleted: true } });
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByText(dialogMessage)).not.toBeInTheDocument();
+      await user.click(screen.getByText('Restore'));
     });
 
-    it('delete channel should open delete confirmation', async () => {
-      await wrapper.findComponent('[data-test="delete"]').trigger('click');
-      expect(wrapper.vm.deleteDialog).toBe(true);
+    it('should open confirmation modal and call updateChannel action when confirmed', async () => {
+      expect(screen.getByText(dialogMessage)).toBeInTheDocument();
+      expect(screen.getByText('Restore channel')).toBeVisible();
+
+      const confirmButton = screen.getByRole('button', { name: 'Restore' });
+      await user.click(confirmButton);
+
+      expect(mockActions.updateChannel).toHaveBeenCalledWith(expect.any(Object), {
+        id: channelId,
+        deleted: false,
+      });
     });
 
-    it('confirm delete channel should call deleteChannel', () => {
-      wrapper.findComponent('[data-test="confirm-delete"]').vm.$emit('confirm');
-      expect(mocks.deleteChannel).toHaveBeenCalledWith(channelId);
+    it('should close the dialog when confirm button is clicked', async () => {
+      const confirmButton = screen.getByRole('button', { name: 'Restore' });
+      await user.click(confirmButton);
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByText(dialogMessage)).not.toBeInTheDocument();
     });
   });
 
-  describe('live channel actions', () => {
-    beforeEach(() => {
-      [wrapper, mocks] = makeWrapper({ public: false, deleted: false });
+  describe('delete permanently dialog', () => {
+    let user;
+    const dialogMessage = `Are you sure you want to permanently delete Channel Test? This can not be undone.`;
+
+    beforeEach(async () => {
+      user = userEvent.setup();
+      renderComponent({ channelProps: { deleted: true } });
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByText(dialogMessage)).not.toBeInTheDocument();
+      await user.click(screen.getByText('Delete permanently'));
     });
 
-    it('download PDF button should call downloadPDF', async () => {
-      await wrapper.findComponent('[data-test="pdf"]').trigger('click');
-      expect(mocks.downloadPDF).toHaveBeenCalled();
+    it('should open confirmation modal and call deleteChannel action when confirmed', async () => {
+      expect(screen.getByText(dialogMessage)).toBeInTheDocument();
+      expect(screen.getByText('Permanently delete channel')).toBeVisible();
+
+      const confirmButton = screen.getByRole('button', { name: 'Delete permanently' });
+      await user.click(confirmButton);
+
+      expect(mockActions.deleteChannel).toHaveBeenCalledWith(expect.any(Object), channelId);
     });
 
-    it('download CSV button should call downloadCSV', async () => {
-      await wrapper.findComponent('[data-test="csv"]').trigger('click');
-      expect(mocks.downloadCSV).toHaveBeenCalled();
+    it('should close the dialog when confirm button is clicked', async () => {
+      const confirmButton = screen.getByRole('button', { name: 'Delete permanently' });
+      await user.click(confirmButton);
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByText(dialogMessage)).not.toBeInTheDocument();
     });
+  });
+
+  describe('make public dialog', () => {
+    let user;
+    const dialogMessage = `All users will be able to view and import content from Channel Test.`;
+
+    beforeEach(async () => {
+      user = userEvent.setup();
+      renderComponent({ channelProps: { public: false, deleted: false } });
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByText(dialogMessage)).not.toBeInTheDocument();
+      await user.click(screen.getByText('Make public'));
+    });
+
+    it('should open confirmation modal and call updateChannel action when confirmed', async () => {
+      expect(screen.getByText(dialogMessage)).toBeInTheDocument();
+      expect(screen.getByText('Make channel public')).toBeVisible();
+
+      const confirmButton = screen.getByRole('button', { name: 'Make public' });
+      await user.click(confirmButton);
+
+      expect(mockActions.updateChannel).toHaveBeenCalledWith(expect.any(Object), {
+        id: channelId,
+        isPublic: true,
+      });
+    });
+
+    it('should close the dialog when confirm button is clicked', async () => {
+      const confirmButton = screen.getByRole('button', { name: 'Make public' });
+      await user.click(confirmButton);
 
-    it('make public button should open make public confirmation', async () => {
-      await wrapper.findComponent('[data-test="public"]').trigger('click');
-      expect(wrapper.vm.makePublicDialog).toBe(true);
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByText(dialogMessage)).not.toBeInTheDocument();
     });
+  });
+
+  describe('delete channel dialog', () => {
+    let user;
+    const dialogMessage = `Are you sure you want to delete Channel Test?`;
 
-    it('confirm make public should call updateChannel with isPublic = true', () => {
-      wrapper.findComponent('[data-test="confirm-public"]').vm.$emit('confirm');
-      expect(mocks.updateChannel).toHaveBeenCalledWith({ id: channelId, isPublic: true });
+    beforeEach(async () => {
+      user = userEvent.setup();
+      renderComponent({ channelProps: { public: false, deleted: false } });
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByText(dialogMessage)).not.toBeInTheDocument();
+      await user.click(screen.getByText('Delete channel'));
     });
 
-    it('soft delete button should open soft delete confirmation', async () => {
-      await wrapper.findComponent('[data-test="softdelete"]').trigger('click');
-      expect(wrapper.vm.softDeleteDialog).toBe(true);
+    it('should open confirmation modal and call updateChannel action when confirmed', async () => {
+      expect(screen.getByText(dialogMessage)).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: 'Delete channel' })).toBeVisible();
+
+      const confirmButton = screen.getByRole('button', { name: 'Delete' });
+      await user.click(confirmButton);
+
+      expect(mockActions.updateChannel).toHaveBeenCalledWith(expect.any(Object), {
+        id: channelId,
+        deleted: true,
+      });
     });
 
-    it('confirm soft delete button should call updateChannel with deleted = true', () => {
-      wrapper.findComponent('[data-test="confirm-softdelete"]').vm.$emit('confirm');
-      expect(mocks.updateChannel).toHaveBeenCalledWith({ id: channelId, deleted: true });
+    it('should close the dialog when confirm button is clicked', async () => {
+      const confirmButton = screen.getByRole('button', { name: 'Delete' });
+      await user.click(confirmButton);
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByText(dialogMessage)).not.toBeInTheDocument();
     });
   });
 
-  describe('public channel actions', () => {
-    beforeEach(() => {
-      [wrapper, mocks] = makeWrapper();
+  describe('make private dialog', () => {
+    let user;
+    const dialogMessage = `Only users with view-only or edit permissions will be able to access Channel Test.`;
+
+    beforeEach(async () => {
+      user = userEvent.setup();
+      renderComponent();
+      expect(screen.queryByText(dialogMessage)).not.toBeInTheDocument();
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      await user.click(screen.getByText('Make private'));
     });
 
-    it('make private button should open make private confirmation', async () => {
-      await wrapper.findComponent('[data-test="private"]').trigger('click');
-      expect(wrapper.vm.makePrivateDialog).toBe(true);
+    it('should open confirmation modal and call updateChannel action when confirmed', async () => {
+      expect(screen.getByText(dialogMessage)).toBeInTheDocument();
+      expect(screen.getByText('Make channel private')).toBeVisible();
+
+      const confirmButton = screen.getByRole('button', { name: 'Make private' });
+      await user.click(confirmButton);
+
+      expect(mockActions.updateChannel).toHaveBeenCalledWith(expect.any(Object), {
+        id: channelId,
+        isPublic: false,
+      });
     });
 
-    it('confirm make private should call updateChannel with isPublic = false', () => {
-      wrapper.findComponent('[data-test="confirm-private"]').vm.$emit('confirm');
-      expect(mocks.updateChannel).toHaveBeenCalledWith({ id: channelId, isPublic: false });
+    it('should close the dialog when confirm button is clicked', async () => {
+      const confirmButton = screen.getByRole('button', { name: 'Make private' });
+      await user.click(confirmButton);
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByText(dialogMessage)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('download functionality', () => {
+    it('should call getAdminChannelListDetails when Download PDF is clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent({ channelProps: { public: false, deleted: false } });
+
+      await user.click(screen.getByText('Download PDF'));
+
+      expect(mockActions.getAdminChannelListDetails).toHaveBeenCalledWith(expect.any(Object), [
+        channelId,
+      ]);
+    });
+
+    it('should call getAdminChannelListDetails when Download CSV is clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent({ channelProps: { public: false, deleted: false } });
+
+      await user.click(screen.getByText('Download CSV'));
+
+      expect(mockActions.getAdminChannelListDetails).toHaveBeenCalledWith(expect.any(Object), [
+        channelId,
+      ]);
     });
   });
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioBanner.vue b/contentcuration/contentcuration/frontend/shared/views/StudioBanner.vue
index 5800501c20..bef1b213fe 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioBanner.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioBanner.vue
@@ -3,7 +3,10 @@
   <div
     class="banner"
     data-testid="studio-banner"
-    :style="{ backgroundColor: error ? $themePalette.red.v_100 : '' }"
+    :style="{
+      backgroundColor: error ? $themePalette.red.v_100 : '',
+      color: error ? $themeTokens.error : '',
+    }"
   >
     <slot>
       {{ text }}