diff --git a/app/assets/javascripts/search/topbar/components/search_box_by_type.vue b/app/assets/javascripts/search/topbar/components/search_box_by_type.vue
index f86e740c045199c4375320ded8605188ad259bd0..7c8ca2c414b9a38730148d6edca9d2a9afbc75e8 100644
--- a/app/assets/javascripts/search/topbar/components/search_box_by_type.vue
+++ b/app/assets/javascripts/search/topbar/components/search_box_by_type.vue
@@ -1,7 +1,3 @@
-<!--
-  this component should be here only temporary until this MR gets sorted:
-  https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3969
- -->
 <script>
 import { GlFormInput, GlIcon, GlLoadingIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
@@ -115,12 +111,6 @@ export default {
     showClearButton() {
       return this.hasValue && !this.disabled;
     },
-    regexButtonHighlightClass() {
-      return {
-        '!gl-bg-blue-50': this.regexButtonState,
-        '!gl-shadow-none': !this.regexButtonState,
-      };
-    },
   },
   methods: {
     isInputOrClearButton(element) {
@@ -194,8 +184,8 @@ export default {
           :title="$options.i18n.label"
           :aria-label="$options.i18n.label"
           class="gl-ml-2 gl-hidden sm:gl-block"
-          :class="regexButtonHighlightClass"
-          category="secondary"
+          :selected="regexButtonState"
+          category="tertiary"
           variant="default"
           size="small"
           icon="regular-expression"
diff --git a/spec/frontend/search/topbar/components/search_box_by_type_spec.js b/spec/frontend/search/topbar/components/search_box_by_type_spec.js
index b8af853fc2aea0bc9b25725988cb7480c296545a..80a18bfab3c1ede62995d9983f2d606cdda5c9e2 100644
--- a/spec/frontend/search/topbar/components/search_box_by_type_spec.js
+++ b/spec/frontend/search/topbar/components/search_box_by_type_spec.js
@@ -169,7 +169,7 @@ describe('search box by type component', () => {
     expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
-  describe('regular expression button', () => {
+  describe('regular expression button active', () => {
     const regexButtonHandlerSpy = jest.fn();
     beforeEach(() => {
       createComponent({
@@ -183,10 +183,6 @@ describe('search box by type component', () => {
       expect(findRegulareExpressionToggle().exists()).toBe(true);
     });
 
-    it('renders regular expression button state correctly', () => {
-      expect(findRegulareExpressionToggle().classes('!gl-bg-blue-50')).toBe(true);
-    });
-
     it('triggers correct action when clicked', () => {
       findRegulareExpressionToggle().vm.$emit('click');