Merge branch 'bootstrap-button-migration' into 'master'

Bootstrap button migration See merge request gitlab-org/gitlab!56968

Merge branch 'bootstrap-button-migration' into 'master'
Bootstrap button migration See merge request gitlab-org/gitlab!56968
2475e8bc · Ezekiel Kigbo · 3bc07e26 · a01441e7 · 2475e8bc · 2475e8bc
Commit 2475e8bc authored Apr 10, 2021 by Ezekiel Kigbo
91 changed files
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -446,7 +446,7 @@ export class AwardsHandler {

  createAwardButtonForVotesBlock(votesBlock, emojiName) {
    const buttonHtml = `
-      <button class="btn award-control js-emoji-btn has-tooltip active" title="You">
+      <button class="gl-button btn btn-default award-control js-emoji-btn has-tooltip active" title="You">
        ${this.emoji.glEmojiTag(emojiName)}
        <span class="award-control-text js-counter">1</span>
      </button>

--- a/app/assets/javascripts/blob/stl_viewer.js
+++ b/app/assets/javascripts/blob/stl_viewer.js
@@ -9,8 +9,8 @@ export default () => {

      e.preventDefault();

-      document.querySelector('.js-material-changer.active').classList.remove('active');
-      target.classList.add('active');
+      document.querySelector('.js-material-changer.selected').classList.remove('selected');
+      target.classList.add('selected');
      target.blur();

      viewer.changeObjectMaterials(target.dataset.type);

--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -122,12 +122,8 @@
  }
 }

-.award-control {
+.gl-button.btn.award-control {
  margin: 4px 8px 4px 0;
-  outline: 0;
-  position: relative;
-  display: block;
-  float: left;

  &.disabled {
    cursor: default;
@@ -145,15 +141,6 @@
  &:hover,
  &:active,
  &.is-active {
-    background-color: $blue-50;
-    border-color: $blue-200;
-    box-shadow: none;
-    outline: 0;
-
-    .award-control-icon svg {
-      fill: $blue-500;
-    }
-
    .award-control-icon-neutral {
      opacity: 0;
    }
@@ -164,6 +151,14 @@
    }
  }

+  &.active,
+  &.is-active,
+  &:active {
+    background-color: $blue-50;
+    border-color: $blue-200;
+    box-shadow: inset 0 0 2px $blue-200;
+  }
+
  &.is-active {
    .award-control-icon-positive {
      opacity: 0;
@@ -192,10 +187,6 @@
    &:focus {
      outline: 0;
    }
-
-    .award-control-icon {
-      margin: 0;
-    }
  }

  &.is-loading {
@@ -213,9 +204,7 @@
  gl-emoji,
  .award-control-icon {
    vertical-align: middle;
-    margin-right: 0.15em;
-    font-size: 1.5em;
-    line-height: 1;
+    line-height: 0.5em;
  }

  .award-control-icon-loading {
@@ -224,11 +213,8 @@

  .award-control-icon {
    color: $border-gray-normal;
-    margin-top: 1px;
-    padding: 0 2px;

    svg {
-      margin-bottom: 3px;
      height: $default-icon-size;
      width: $default-icon-size;
      border-radius: 50%;
@@ -239,10 +225,8 @@
  .award-control-icon-positive,
  .award-control-icon-super-positive {
    @include transition(opacity, transform);
-    position: absolute;
-    left: 10px;
-    bottom: 6px;
    opacity: 0;
+    position: absolute;

    path {
      fill: $award-emoji-positive-add-lines;

--- a/app/assets/stylesheets/framework/ci_variable_list.scss
+++ b/app/assets/stylesheets/framework/ci_variable_list.scss
@@ -75,26 +75,3 @@
  padding-top: 5px;
  padding-bottom: 5px;
 }
-
-.ci-variable-row-remove-button {
-  @include transition(color);
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: $ci-variable-remove-button-width;
-  height: $input-height;
-  padding: 0;
-  background: transparent;
-  color: $gl-text-color-secondary;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    color: $gl-text-color;
-  }
-
-  &[disabled] {
-    color: $gl-text-color-disabled;
-  }
-}
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -133,13 +133,15 @@
  }
 }

-.dropdown-menu-toggle {
+// This is double classed to solve a specificity issue with the gitlab ui buttons
+.dropdown-menu-toggle.dropdown-menu-toggle {
  @extend .dropdown-toggle;
+  justify-content: flex-start;
+  overflow: hidden;
  padding-right: 25px;
  position: relative;
-  width: 160px;
  text-overflow: ellipsis;
-  overflow: hidden;
+  width: 160px;

  .fa {
    position: absolute;
@@ -376,11 +378,13 @@
      }

      > a,
-      > button {
+      > button,
+      > .gl-button {
        display: flex;
+        justify-content: flex-start;
        margin: 0;
-        text-overflow: inherit;
        text-align: left;
+        text-overflow: inherit;

        &.btn .fa:not(:last-child) {
          margin-left: 5px;

--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -290,14 +290,14 @@
  flex-direction: column;
 }

-.filtered-search-history-dropdown-toggle-button {
-  flex: 1;
-  width: auto;
+.filtered-search-history-dropdown-toggle-button.gl-button {
  border-radius: $border-radius-default 0 0 $border-radius-default;
-  border: 0;
  border-right: 1px solid $border-color;
+  box-shadow: none;
  color: $gl-text-color-secondary;
+  flex: 1;
  transition: color 0.1s linear;
+  width: auto;

  &:hover,
  &:focus {
@@ -338,12 +338,6 @@
  }
 }

-.filter-dropdown-container {
-  .dropdown-toggle {
-    line-height: 22px;
-  }
-}
-
 @include media-breakpoint-down(sm) {
  .issues-details-filters,
  .epics-details-filters {

--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -665,7 +665,7 @@ code {
  font-size: 95%;
 }

-.git-revision-dropdown .dropdown-content ul li a {
+.git-revision-dropdown .dropdown-content li:not(.dropdown-menu-empty-item) a {
  font-family: $monospace-font;
  font-size: 95%;
  word-break: break-all;

--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -173,11 +173,10 @@ ul.related-merge-requests > li {
    margin-top: 4px;

    // override dropdown item styles
-    .btn.btn-success {
+    .btn.btn-confirm {
      @include btn-default;
-      @include btn-green;
+      @include btn-blue;

-      border-style: solid;
      border-width: 1px;
      line-height: $line-height-base;
      width: auto;

--- a/app/helpers/snippets_helper.rb
+++ b/app/helpers/snippets_helper.rb
@@ -11,16 +11,6 @@ module SnippetsHelper
    end
  end

-  def download_raw_snippet_button(snippet)
-    link_to(sprite_icon('download'),
-            gitlab_raw_snippet_path(snippet, inline: false),
-            target: '_blank',
-            rel: 'noopener noreferrer',
-            class: "btn btn-sm has-tooltip",
-            title: 'Download',
-            data: { container: 'body' })
-  end
-
  # Return the path of a snippets index for a user or for a project
  #
  # @returns String, path to snippet index
@@ -54,7 +44,7 @@ module SnippetsHelper

    link_to(external_snippet_icon('doc-code'),
            gitlab_raw_snippet_blob_url(snippet, blob.path),
-            class: 'btn',
+            class: 'gl-button btn btn-default',
            target: '_blank',
            rel: 'noopener noreferrer',
            title: 'Open raw')
@@ -63,7 +53,7 @@ module SnippetsHelper
  def embedded_snippet_download_button(snippet, blob)
    link_to(external_snippet_icon('download'),
            gitlab_raw_snippet_blob_url(snippet, blob.path, nil, inline: false),
-            class: 'btn',
+            class: 'gl-button btn btn-default',
            target: '_blank',
            title: 'Download',
            rel: 'noopener noreferrer')

--- a/app/helpers/sorting_helper.rb
+++ b/app/helpers/sorting_helper.rb
@@ -231,7 +231,7 @@ module SortingHelper
  end

  def sort_direction_button(reverse_url, reverse_sort, sort_value)
-    link_class = 'btn btn-default has-tooltip reverse-sort-btn qa-reverse-sort rspec-reverse-sort'
+    link_class = 'gl-button btn btn-default btn-icon has-tooltip reverse-sort-btn qa-reverse-sort rspec-reverse-sort'
    icon = sort_direction_icon(sort_value)
    url = reverse_url


--- a/app/helpers/wiki_helper.rb
+++ b/app/helpers/wiki_helper.rb
@@ -22,7 +22,7 @@ module WikiHelper
  end

  def wiki_sidebar_toggle_button
-    content_tag :button, class: 'btn btn-default sidebar-toggle js-sidebar-wiki-toggle', role: 'button', type: 'button' do
+    content_tag :button, class: 'gl-button btn btn-default btn-icon sidebar-toggle js-sidebar-wiki-toggle', role: 'button', type: 'button' do
      sprite_icon('chevron-double-lg-left')
    end
  end
@@ -61,7 +61,7 @@ module WikiHelper

  def wiki_sort_controls(wiki, sort, direction)
    sort ||= Wiki::TITLE_ORDER
-    link_class = 'btn btn-default has-tooltip reverse-sort-btn qa-reverse-sort rspec-reverse-sort'
+    link_class = 'gl-button btn btn-default btn-icon has-tooltip reverse-sort-btn qa-reverse-sort rspec-reverse-sort'
    reversed_direction = direction == 'desc' ? 'asc' : 'desc'
    icon_class = direction == 'desc' ? 'highest' : 'lowest'


--- a/app/views/admin/abuse_reports/_abuse_report.html.haml
+++ b/app/views/admin/abuse_reports/_abuse_report.html.haml
@@ -25,10 +25,10 @@
  %td
    - if user
      = link_to _('Remove user & report'), admin_abuse_report_path(abuse_report, remove_user: true),
-        data: { confirm: _("USER %{user} WILL BE REMOVED! Are you sure?") % { user: user.name } }, remote: true, method: :delete, class: "gl-button btn btn-sm btn-block btn-danger js-remove-tr"
+        data: { confirm: _("USER %{user} WILL BE REMOVED! Are you sure?") % { user: user.name } }, remote: true, method: :delete, class: "gl-button btn btn-block btn-danger js-remove-tr"
    - if user && !user.blocked?
-      = link_to _('Block user'), block_admin_user_path(user), data: {confirm: _('USER WILL BE BLOCKED! Are you sure?')}, method: :put, class: "gl-button btn btn-sm btn-block"
+      = link_to _('Block user'), block_admin_user_path(user), data: {confirm: _('USER WILL BE BLOCKED! Are you sure?')}, method: :put, class: "gl-button btn btn-default btn-block"
    - else
-      .btn.btn-sm.disabled.btn-block
+      .gl-button.btn.btn-default.disabled.btn-block
        = _('Already blocked')
-    = link_to _('Remove report'), [:admin, abuse_report], remote: true, method: :delete, class: "gl-button btn btn-sm btn-block btn-close js-remove-tr"
+    = link_to _('Remove report'), [:admin, abuse_report], remote: true, method: :delete, class: "gl-button btn btn-default btn-block btn-close js-remove-tr"
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -27,7 +27,7 @@
            - usage_ping_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: usage_ping_path }
            %p.mb-2= s_('%{usage_ping_link_start}Learn more%{usage_ping_link_end} about what information is shared with GitLab Inc.').html_safe % { usage_ping_link_start: usage_ping_link_start, usage_ping_link_end: '</a>'.html_safe }

-            %button.btn.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
+            %button.gl-button.btn.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
              .spinner.js-spinner.d-none
              .js-text.d-inline= _('Preview payload')
            %pre.usage-data.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }

--- a/app/views/admin/dev_ops_report/_callout.html.haml
+++ b/app/views/admin/dev_ops_report/_callout.html.haml
 .gl-mt-3
 .user-callout{ data: { uid: 'dev_ops_report_intro_callout_dismissed' } }
  .bordered-box.landing.content-block
-    %button.btn.btn-default.close.js-close-callout{ type: 'button',
+    %button.gl-button.btn.btn-default-tertiary.close.js-close-callout{ type: 'button',
      'aria-label' => _('Dismiss DevOps Report introduction') }
      = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
    .user-callout-copy

--- a/app/views/admin/runners/_runner.html.haml
+++ b/app/views/admin/runners/_runner.html.haml
@@ -65,15 +65,15 @@
  .table-section.table-button-footer.section-10
    .btn-group.table-action-buttons
      .btn-group
-        = link_to admin_runner_path(runner), class: 'gl-button btn btn-default has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
-          = sprite_icon('pencil')
+        = link_to admin_runner_path(runner), class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
+          = sprite_icon('pencil', css_class: 'gl-icon')
      .btn-group
        - if runner.active?
-          = link_to [:pause, :admin, runner], method: :post, class: 'gl-button btn btn-default btn-svg has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
-            = sprite_icon('pause')
+          = link_to [:pause, :admin, runner], method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+            = sprite_icon('pause', css_class: 'gl-icon')
        - else
-          = link_to [:resume, :admin, runner], method: :post, class: 'gl-button btn btn-default btn-svg has-tooltip gl-px-3', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
-            = sprite_icon('play')
+          = link_to [:resume, :admin, runner], method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip gl-px-3', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
+            = sprite_icon('play', css_class: 'gl-icon')
      .btn-group
-        = link_to [:admin, runner], method: :delete, class: 'gl-button btn btn-danger has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
-          = sprite_icon('close')
+        = link_to [:admin, runner], method: :delete, class: 'gl-button btn btn-danger btn-icon has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+          = sprite_icon('close', css_class: 'gl-icon')
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -50,7 +50,7 @@
        .filtered-search-box
          = dropdown_tag(_('Recent searches'),
            options: { wrapper_class: 'filtered-search-history-dropdown-wrapper',
-            toggle_class: 'btn filtered-search-history-dropdown-toggle-button',
+            toggle_class: 'gl-button btn btn-default filtered-search-history-dropdown-toggle-button',
            dropdown_class: 'filtered-search-history-dropdown',
            content_class: 'filtered-search-history-dropdown-content' }) do
            .js-filtered-search-history-dropdown{ data: { full_path: admin_runners_path } }
@@ -72,7 +72,7 @@
            #js-dropdown-operator.filtered-search-input-dropdown-menu.dropdown-menu
              %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
                %li.filter-dropdown-item{ data: { value: "{{ title }}" } }
-                  %button.btn.btn-link{ type: 'button' }
+                  %button.gl-button.btn.btn-link{ type: 'button' }
                    {{ title }}
                    %span.btn-helptext
                      {{ help }}
@@ -100,12 +100,12 @@
          #js-dropdown-runner-tag.filtered-search-input-dropdown-menu.dropdown-menu
            %ul{ data: { dropdown: true } }
              %li.filter-dropdown-item{ data: { value: 'none' } }
-                %button.btn.btn-link
+                %button.gl-button.btn.btn-link
                  = _('No Tag')
              %li.divider.droplab-item-ignore
            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
              %li.filter-dropdown-item
-                %button.btn.btn-link.js-data-value
+                %button.gl-button.btn.btn-link.js-data-value
                  %span.dropdown-light-content
                    {{name}}


--- a/app/views/admin/serverless/domains/index.html.haml
+++ b/app/views/admin/serverless/domains/index.html.haml
@@ -10,7 +10,7 @@
  .settings-header
    %h4
      = _('Serverless domain')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
      = expanded ? _('Collapse') : _('Expand')
    %p
      = _('Set an instance-wide domain that will be available to all clusters when installing Knative.')

--- a/app/views/admin/spam_logs/_spam_log.html.haml
+++ b/app/views/admin/spam_logs/_spam_log.html.haml
@@ -27,13 +27,13 @@
        data: { confirm: "USER #{user.name} WILL BE REMOVED! Are you sure?" }, method: :delete, class: "gl-button btn btn-sm btn-danger"
  %td
    - if spam_log.submitted_as_ham?
-      .btn.btn-sm.disabled
+      .gl-button.btn.btn-default.btn-sm.disabled.gl-mb-3
        Submitted as ham
    - else
-      = link_to 'Submit as ham', mark_as_ham_admin_spam_log_path(spam_log), method: :post, class: 'gl-button btn btn-sm btn-warning'
+      = link_to 'Submit as ham', mark_as_ham_admin_spam_log_path(spam_log), method: :post, class: 'gl-button btn btn-default btn-sm gl-mb-3'
    - if user && !user.blocked?
-      = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: "gl-button btn btn-sm"
+      = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: "gl-button btn btn-default btn-sm gl-mb-3"
    - else
-      .btn.btn-sm.disabled
+      .gl-button.btn.btn-default.btn-sm.disabled.gl-mb-3
        Already blocked
-    = link_to 'Remove log', [:admin, spam_log], remote: true, method: :delete, class: "gl-button btn btn-sm btn-close js-remove-tr"
+    = link_to 'Remove log', [:admin, spam_log], remote: true, method: :delete, class: "gl-button btn btn-default btn-sm btn-close js-remove-tr"
--- a/app/views/admin/users/_user.html.haml
+++ b/app/views/admin/users/_user.html.haml
@@ -39,18 +39,18 @@
                    = link_to s_('AdminUsers|Approve'), approve_admin_user_path(user), method: :put
                    = link_to s_('AdminUsers|Reject'), reject_admin_user_path(user), method: :delete
                  - else
-                    %button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_unblock_data(user) }
+                    %button.gl-button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_unblock_data(user) }
                      = s_('AdminUsers|Unblock')
                - else
-                  %button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_block_data(user, user_block_effects) }
+                  %button.gl-button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_block_data(user, user_block_effects) }
                    = s_('AdminUsers|Block')
              - if user.can_be_deactivated?
                %li
-                  %button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_deactivation_data(user, user_deactivation_effects) }
+                  %button.gl-button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_deactivation_data(user, user_deactivation_effects) }
                    = s_('AdminUsers|Deactivate')
              - elsif user.deactivated?
                %li
-                  %button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_activation_data(user) }
+                  %button.gl-button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_activation_data(user) }
                    = s_('AdminUsers|Activate')
              - if user.access_locked?
                %li
@@ -59,13 +59,13 @@
              %li.divider
              - if user.can_be_removed?
                %li
-                  %button.js-delete-user-modal-button.btn.btn-default-tertiary.text-danger{ data: { 'gl-modal-action': 'delete',
+                  %button.js-delete-user-modal-button.gl-button.btn.btn-danger-tertiary{ data: { 'gl-modal-action': 'delete',
                    delete_user_url: admin_user_path(user),
                    block_user_url: block_admin_user_path(user),
                    username: sanitize_name(user.name) } }
                    = s_('AdminUsers|Delete user')
                %li
-                  %button.js-delete-user-modal-button.btn.btn-default-tertiary.text-danger{ data: { 'gl-modal-action': 'delete-with-contributions',
+                  %button.js-delete-user-modal-button.gl-button.btn.btn-danger-tertiary{ data: { 'gl-modal-action': 'delete-with-contributions',
                    delete_user_url: admin_user_path(user, hard_delete: true),
                    block_user_url: block_admin_user_path(user),
                    username: sanitize_name(user.name) } }

--- a/app/views/authentication/_authenticate.html.haml
+++ b/app/views/authentication/_authenticate.html.haml
 #js-authenticate-token-2fa
-%a.btn.btn-block.btn-info#js-login-2fa-device{ href: '#' }= _("Sign in via 2FA code")
+%a.gl-button.btn.btn-block.btn-confirm#js-login-2fa-device{ href: '#' }= _("Sign in via 2FA code")

 %script#js-authenticate-token-2fa-in-progress{ type: "text/template" }
  %p= _("Trying to communicate with your device. Plug it in (if you haven't already) and press the button on the device now.")
@@ -7,7 +7,7 @@
 %script#js-authenticate-token-2fa-error{ type: "text/template" }
  %div
    %p <%= error_message %> (<%= error_name %>)
-    %a.btn.gl-button.btn-block.btn-warning#js-token-2fa-try-again= _("Try again?")
+    %a.btn.btn-default.gl-button.btn-block#js-token-2fa-try-again= _("Try again?")

 %script#js-authenticate-token-2fa-authenticated{ type: "text/template" }
  %div

--- a/app/views/authentication/_register.html.haml
+++ b/app/views/authentication/_register.html.haml
@@ -21,7 +21,7 @@
  %div
    %p
      %span <%= error_message %> (<%= error_name %>)
-    %a.btn.gl-button.btn-warning#js-token-2fa-try-again= _("Try again?")
+    %a.btn.btn-default.gl-button#js-token-2fa-try-again= _("Try again?")

 %script#js-register-token-2fa-registered{ type: "text/template" }
  .row.gl-mb-3
@@ -33,4 +33,4 @@
            = text_field_tag 'device_registration[name]', nil, class: 'form-control', placeholder: _("Pick a name")
          .col-md-3
            = hidden_field_tag 'device_registration[device_response]', nil, class: 'form-control', required: true, id: "js-device-response"
-            = submit_tag _("Register device"), class: "btn btn-success"
+            = submit_tag _("Register device"), class: "gl-button btn btn-confirm"
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -8,7 +8,7 @@
  - grouped_emojis = awardable.grouped_awards(with_thumbs: inline)
  .awards.js-awards-block{ class: ("hidden" if !inline && grouped_emojis.empty?), data: { award_url: toggle_award_url(awardable) } }
    - awards_sort(grouped_emojis).each do |emoji, awards|
-      %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button",
+      %button.gl-button.btn.btn-default.award-control.js-emoji-btn.has-tooltip{ type: "button",
        class: [(award_state_class(awardable, awards, current_user))],
        data: { title: award_user_list(awards, current_user) } }
        = emoji_icon(emoji)
@@ -17,7 +17,7 @@

    - if can?(current_user, :award_emoji, awardable)
      .award-menu-holder.js-award-holder
-        %button.btn.award-control.has-tooltip.js-add-award{ type: 'button',
+        %button.gl-button.btn.btn-default.award-control.has-tooltip.js-add-award{ type: 'button',
          'aria-label': _('Add reaction'),
          data: { title: _('Add reaction') } }
          %span{ class: "award-control-icon award-control-icon-neutral" }= sprite_icon('slight-smile')

--- a/app/views/ci/variables/_url_query_variable_row.html.haml
+++ b/app/views/ci/variables/_url_query_variable_row.html.haml
@@ -24,5 +24,5 @@
        name: value_input_name,
        placeholder: s_('CiVariables|Input variable value') }
        = value
-    %button.btn.btn-svg.btn-item-remove.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
+    %button.gl-button.btn.btn-default.btn-icon.btn-item-remove.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
      = sprite_icon('close')
--- a/app/views/ci/variables/_variable_row.html.haml
+++ b/app/views/ci/variables/_variable_row.html.haml
@@ -60,5 +60,5 @@
            value: is_masked,
            data: { default: is_masked_default.to_s } }
      = render_if_exists 'ci/variables/environment_scope', form_field: form_field, variable: variable
-    %button.btn.btn-svg.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
+    %button.gl-button.btn.btn-default.btn-icon.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
      = sprite_icon('close')
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -37,5 +37,5 @@
      .home-panel-description
        .home-panel-description-markdown.read-more-container{ itemprop: 'description' }
          = markdown_field(@group, :description)
-        %button.btn.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
+        %button.gl-button.btn.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
          = _("Read more")
--- a/app/views/groups/runners/_index.html.haml
+++ b/app/views/groups/runners/_index.html.haml
@@ -19,7 +19,7 @@
        .filtered-search-box
          = dropdown_tag(_('Recent searches'),
            options: { wrapper_class: 'filtered-search-history-dropdown-wrapper',
-            toggle_class: 'btn filtered-search-history-dropdown-toggle-button',
+            toggle_class: 'gl-button btn btn-default filtered-search-history-dropdown-toggle-button',
            dropdown_class: 'filtered-search-history-dropdown',
            content_class: 'filtered-search-history-dropdown-content' }) do
            .js-filtered-search-history-dropdown{ data: { full_path: group_settings_ci_cd_path } }
@@ -31,7 +31,7 @@
            #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                %li.filter-dropdown-item{ data: {hint: "#{'{{hint}}'}", tag: "#{'{{tag}}'}", action: "#{'{{hint === \'search\' ? \'submit\' : \'\' }}'}" } }
-                  = button_tag class: 'btn btn-link' do
+                  = button_tag class: 'gl-button btn btn-link' do
                    -# Encapsulate static class name `{{icon}}` inside #{} to bypass
                    -# haml lint's ClassAttributeWithStaticValue
                    %svg
@@ -41,7 +41,7 @@
            #js-dropdown-operator.filtered-search-input-dropdown-menu.dropdown-menu
              %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
                %li.filter-dropdown-item{ data: { value: "{{ title }}" } }
-                  = button_tag class: 'btn btn-link' do
+                  = button_tag class: 'gl-button btn btn-link' do
                    {{ title }}
                    %span.btn-helptext
                      {{ help }}
@@ -49,7 +49,7 @@
              %ul{ data: { dropdown: true } }
                - Ci::Runner::AVAILABLE_STATUSES.each do |status|
                  %li.filter-dropdown-item{ data: { value: status } }
-                    = button_tag class: 'btn btn-link' do
+                    = button_tag class: 'gl-button btn btn-link' do
                      = status.titleize

            #js-dropdown-admin-runner-type.filtered-search-input-dropdown-menu.dropdown-menu
@@ -57,18 +57,18 @@
                - Ci::Runner::AVAILABLE_TYPES.each do |runner_type|
                  - next if runner_type == 'instance_type'
                  %li.filter-dropdown-item{ data: { value: runner_type } }
-                    = button_tag class: 'btn btn-link' do
+                    = button_tag class: 'gl-button btn btn-link' do
                      = runner_type.titleize

          #js-dropdown-runner-tag.filtered-search-input-dropdown-menu.dropdown-menu
            %ul{ data: { dropdown: true } }
              %li.filter-dropdown-item{ data: { value: 'none' } }
-                = button_tag class: 'btn btn-link' do
+                = button_tag class: 'gl-button btn btn-link' do
                  = _('No Tag')
              %li.divider.droplab-item-ignore
            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
              %li.filter-dropdown-item
-                = button_tag class: 'btn btn-link js-data-value' do
+                = button_tag class: 'gl-button btn btn-link js-data-value' do
                  %span.dropdown-light-content
                    {{name}}


--- a/app/views/groups/runners/_runner.html.haml
+++ b/app/views/groups/runners/_runner.html.haml
@@ -67,21 +67,21 @@
  .table-section.table-button-footer.section-10
    .btn-group.table-action-buttons
      .btn-group
-        = link_to edit_group_runner_path(@group, runner), class: 'btn btn-default has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
-          = sprite_icon('pencil')
+        = link_to edit_group_runner_path(@group, runner), class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
+          = sprite_icon('pencil', css_class: 'gl-icon')
      .btn-group
        - if runner.active?
-          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'btn btn-default has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
-            = sprite_icon('pause')
+          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+            = sprite_icon('pause', css_class: 'gl-icon')
        - else
-          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'btn btn-default has-tooltip', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
-            = sprite_icon('play')
+          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
+            = sprite_icon('play', css_class: 'gl-icon')
      - if runner.belongs_to_more_than_one_project?
        - delete_runner_tooltip = _('Multi-project Runners cannot be removed')
        .btn-group.has-tooltip{ data: { container: 'body', placement: 'top' }, title: delete_runner_tooltip }
-          .btn.btn-danger{ 'aria-label' => delete_runner_tooltip, disabled: 'disabled' }
-            = sprite_icon('close')
+          .gl-button.btn.btn-danger.btn-icon{ 'aria-label' => delete_runner_tooltip, disabled: 'disabled' }
+            = sprite_icon('close', css_class: 'gl-icon')
      - else
        .btn-group
-          = link_to group_runner_path(@group, runner), method: :delete, class: 'btn btn-danger has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
-            = sprite_icon('close')
+          = link_to group_runner_path(@group, runner), method: :delete, class: 'gl-button btn btn-danger btn-icon has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+            = sprite_icon('close', css_class: 'gl-icon')
--- a/app/views/groups/settings/_general.html.haml
+++ b/app/views/groups/settings/_general.html.haml
@@ -26,7 +26,7 @@
    = render 'shared/choose_avatar_button', f: f
    - if @group.avatar?
      %hr
-      = link_to _('Remove avatar'), group_avatar_path(@group.to_param), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
+      = link_to _('Remove avatar'), group_avatar_path(@group.to_param), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'gl-button btn btn-danger-secondary'

  = render 'shared/visibility_level', f: f, visibility_level: @group.visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
  = f.submit _('Save changes'), class: 'btn gl-button btn-confirm mt-4 js-dirty-submit', data: { qa_selector: 'save_name_visibility_settings_button' }
--- a/app/views/jira_connect/users/show.html.haml
+++ b/app/views/jira_connect/users/show.html.haml
@@ -5,7 +5,7 @@
  %p= s_('Integrations|You can now close this window and return to the GitLab for Jira application.')

  - if @jira_app_link
-    %p= external_link s_('Integrations|Return to GitLab for Jira'), @jira_app_link, class: 'btn btn-success'
+    %p= external_link s_('Integrations|Return to GitLab for Jira'), @jira_app_link, class: 'gl-button btn btn-confirm'

  %p= link_to _('Sign out'), destroy_user_session_path, method: :post


--- a/app/views/layouts/header/_current_user_dropdown.html.haml
+++ b/app/views/layouts/header/_current_user_dropdown.html.haml
@@ -11,7 +11,7 @@
  %li.divider
  - if can?(current_user, :update_user_status, current_user)
    %li
-      %button.btn.menu-item.js-set-status-modal-trigger{ type: 'button' }
+      %button.gl-button.btn.btn-link.menu-item.js-set-status-modal-trigger{ type: 'button' }
        - if show_status_emoji?(current_user.status) || user_status_set_to_busy?(current_user.status)
          = s_('SetStatusModal|Edit status')
        - else

--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -113,7 +113,7 @@
            %li.nav-item
              %div
                - sign_in_text = allow_signup? ? _('Sign in / Register') : _('Sign in')
-                = link_to sign_in_text, new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in'
+                = link_to sign_in_text, new_session_path(:user, redirect_to_referer: 'yes'), class: 'gl-button btn btn-default btn-sign-in'

      %button.navbar-toggler.d-block.d-sm-none{ type: 'button' }
        %span.sr-only= _('Toggle navigation')

--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -69,7 +69,7 @@
      = render 'users/deletion_guidance', user: current_user

      -# Delete button here
-      %button#delete-account-button.btn.btn-danger.disabled{ data: { qa_selector: 'delete_account_button' } }
+      %button#delete-account-button.gl-button.btn.btn-danger.disabled{ data: { qa_selector: 'delete_account_button' } }
        = s_('Profiles|Delete account')

      #delete-account-modal{ data: { action_url: user_registration_path,

--- a/app/views/projects/blob/viewers/_stl.html.haml
+++ b/app/views/projects/blob/viewers/_stl.html.haml
@@ -3,7 +3,7 @@
    = loading_icon(size: "md", css_class: "gl-mt-4 gl-mb-3")
  .text-center.gl-mt-3.gl-mb-3.stl-controls
    .btn-group
-      %button.btn.btn-default.btn-sm.js-material-changer{ data: { type: 'wireframe' } }
+      %button.gl-button.btn.btn-default.btn-sm.js-material-changer{ data: { type: 'wireframe' } }
        Wireframe
-      %button.btn.btn-default.btn-sm.active.js-material-changer{ data: { type: 'default' } }
+      %button.gl-button.btn.btn-default.btn-sm.selected.js-material-changer{ data: { type: 'default' } }
        Solid
--- a/app/views/projects/branches/_delete_protected_modal.html.haml
+++ b/app/views/projects/branches/_delete_protected_modal.html.haml
@@ -34,7 +34,7 @@
        = text_field_tag 'delete_branch_input', '', class: 'form-control js-delete-branch-input'

      .modal-footer
-        %button.btn{ data: { dismiss: 'modal' } } Cancel
+        %button.gl-button.btn.btn-default{ data: { dismiss: 'modal' } } Cancel
        = link_to s_('Branches|Delete protected branch'), '',
          class: "gl-button btn btn-danger js-delete-branch",
          title: s_('Branches|Delete branch'),

--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -20,7 +20,7 @@
  %li.commit-header.js-commit-header
    %span.font-weight-bold= n_("%d previously merged commit", "%d previously merged commits", context_commits.count) % context_commits.count
    - if project.context_commits_enabled? && can_update_merge_request
-      %button.btn.btn-default.ml-3.add-review-item-modal-trigger{ type: "button", data: { context_commits_empty: 'false' } }
+      %button.gl-button.btn.btn-default.ml-3.add-review-item-modal-trigger{ type: "button", data: { context_commits_empty: 'false' } }
        = _('Add/remove')

  %li.commits-row
@@ -33,7 +33,7 @@
    = n_('%s additional commit has been omitted to prevent performance issues.', '%s additional commits have been omitted to prevent performance issues.', hidden) % number_with_delimiter(hidden)

 - if project.context_commits_enabled? && can_update_merge_request && context_commits&.empty?
-  %button.btn.btn-default.mt-3.add-review-item-modal-trigger{ type: "button", data: { context_commits_empty: 'true' } }
+  %button.gl-button.btn.btn-default.mt-3.add-review-item-modal-trigger{ type: "button", data: { context_commits_empty: 'true' } }
    = _('Add previously merged commits')

 - if commits.size == 0 && context_commits.nil?

--- a/app/views/projects/diffs/viewers/_collapsed.html.haml
+++ b/app/views/projects/diffs/viewers/_collapsed.html.haml
 .nothing-here-block.diff-collapsed{ data: { diff_for_path: collapsed_diff_url(viewer.diff_file) } }
  = _("This diff is collapsed.")
-  %button.click-to-expand.btn.btn-link= _("Click to expand it.")
+  %button.click-to-expand.gl-button.btn.btn-link= _("Click to expand it.")
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -58,7 +58,7 @@
              %span.js-ref-message.form-text.text-muted

            .form-group
-              %button.btn.gl-button.btn-success.js-create-target{ type: 'button', data: { action: 'create-mr' } }
+              %button.btn.gl-button.btn-confirm.js-create-target{ type: 'button', data: { action: 'create-mr' } }
                = create_mr_text

            - if can_create_confidential_merge_request?

--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -21,7 +21,7 @@
      #js-issuable-header-warnings
      = issuable_meta(@merge_request, @project)

-    %a.btn.btn-default.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
+    %a.gl-button.btn.btn-default.btn-icon.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
      = sprite_icon('chevron-double-lg-left')

  .detail-page-header-actions.js-issuable-actions
@@ -50,4 +50,4 @@
      - if can_update_merge_request && !are_close_and_open_buttons_hidden
        = render 'projects/merge_requests/close_reopen_draft_report_toggle'
      - elsif !@merge_request.merged?
-        = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-md-display-block gl-button btn btn-warning-secondary float-right gl-ml-3', title: _('Report abuse')
+        = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-md-display-block gl-button btn btn-default float-right gl-ml-3', title: _('Report abuse')
--- a/app/views/projects/pages_domains/_dns.html.haml
+++ b/app/views/projects/pages_domains/_dns.html.haml
@@ -23,7 +23,7 @@
          - text, status = domain_presenter.unverified? ? [_('Unverified'), 'badge-danger'] : [_('Verified'), 'badge-success']
          .badge{ class: status }
            = text
-          = link_to sprite_icon("redo"), verify_project_pages_domain_path(@project, domain_presenter), method: :post, class: "btn has-tooltip", title: _("Retry verification")
+          = link_to sprite_icon("redo"), verify_project_pages_domain_path(@project, domain_presenter), method: :post, class: "gl-button btn btn-default has-tooltip", title: _("Retry verification")
        .input-group
          = text_field_tag :domain_verification, verification_record, class: "monospace js-select-on-focus form-control", readonly: true
          .input-group-append

--- a/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
+++ b/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
@@ -9,7 +9,7 @@
                = sprite_icon('warning-solid', css_class: ' mr-2 gl-text-orange-600')
                = _("Something went wrong while obtaining the Let's Encrypt certificate.")
              .row.mx-0.mt-3
-                = link_to s_('GitLabPagesDomains|Retry'), retry_auto_ssl_project_pages_domain_path(@project, domain_presenter), class: "btn btn-sm btn-grouped btn-warning", method: :post
+                = link_to s_('GitLabPagesDomains|Retry'), retry_auto_ssl_project_pages_domain_path(@project, domain_presenter), class: "gl-button btn btn-default btn-sm btn-grouped", method: :post
    - elsif !domain_presenter.certificate_gitlab_provided?
      .form-group.border-section.js-shown-if-auto-ssl{ class: ("d-none" unless auto_ssl_available_and_enabled) }
        .row

--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -11,12 +11,12 @@
  .form-group.row
    .col-md-9
      = f.label :cron_timezone, _('Cron Timezone'), class: 'label-bold'
-      = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'btn js-timezone-dropdown w-100', dropdown_class: 'w-100', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
+      = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'gl-button btn btn-default js-timezone-dropdown w-100', dropdown_class: 'w-100', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
      = f.text_field :cron_timezone, value: @schedule.cron_timezone, id: 'schedule_cron_timezone', class: 'hidden', name: 'schedule[cron_timezone]', required: true
  .form-group.row
    .col-md-9
      = f.label :ref, _('Target Branch'), class: 'label-bold'
-      = dropdown_tag(_("Select target branch"), options: { toggle_class: 'btn js-target-branch-dropdown w-100', dropdown_class: 'git-revision-dropdown w-100', title: _("Select target branch"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: @project.repository.branch_names, default_branch: @project.default_branch } } )
+      = dropdown_tag(_("Select target branch"), options: { toggle_class: 'gl-button btn btn-default js-target-branch-dropdown w-100', dropdown_class: 'git-revision-dropdown w-100', title: _("Select target branch"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: @project.repository.branch_names, default_branch: @project.default_branch } } )
      = f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true
  .form-group.row.js-ci-variable-list-section
    .col-md-9
@@ -27,7 +27,7 @@
          = render 'ci/variables/variable_row', form_field: 'schedule', variable: variable, only_key_value: true
        = render 'ci/variables/variable_row', form_field: 'schedule', only_key_value: true
      - if @schedule.variables.size > 0
-        %button.btn.btn-info.btn-inverted.gl-mt-3.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@schedule.variables.size == 0}" } }
+        %button.gl-button.btn.btn-confirm-secondary.gl-mt-3.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@schedule.variables.size == 0}" } }
          - if @schedule.variables.size == 0
            = n_('Hide value', 'Hide values', @schedule.variables.size)
          - else

--- a/app/views/projects/protected_tags/shared/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
@@ -19,4 +19,4 @@

  - if can? current_user, :admin_project, @project
    %td
-      = link_to 'Unprotect', [@project, protected_tag, { update_section: 'js-protected-tags-settings' }], data: { confirm: 'Tag will be writable for developers. Are you sure?' }, method: :delete, class: 'btn btn-warning'
+      = link_to 'Unprotect', [@project, protected_tag, { update_section: 'js-protected-tags-settings' }], data: { confirm: 'Tag will be writable for developers. Are you sure?' }, method: :delete, class: 'gl-button btn btn-danger-secondary'
--- a/app/views/projects/services/slack_slash_commands/_help.html.haml
+++ b/app/views/projects/services/slack_slash_commands/_help.html.haml
@@ -58,7 +58,7 @@
          = label_tag nil, _('Customize icon'), class: 'col-12 col-form-label label-bold'
          .col-12
            = image_tag(asset_url('slash-command-logo.png', skip_pipeline: true), width: 36, height: 36, class: 'mr-3')
-            = link_to(_('Download image'), asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank', rel: 'noopener noreferrer')
+            = link_to(_('Download image'), asset_url('gitlab_logo.png'), class: 'gl-button btn btn-default btn-sm', target: '_blank', rel: 'noopener noreferrer')

        .form-group
          = label_tag nil, _('Autocomplete'), class: 'col-12 col-form-label label-bold'

--- a/app/views/projects/settings/_general.html.haml
+++ b/app/views/projects/settings/_general.html.haml
@@ -37,6 +37,6 @@
    = render 'shared/choose_avatar_button', f: f
    - if @project.avatar?
      %hr
-      = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
+      = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'gl-button btn btn-danger-secondary'

  = f.submit _('Save changes'), class: "gl-button btn btn-confirm gl-mt-6", data: { qa_selector: 'save_naming_topics_avatar_button' }
--- a/app/views/projects/settings/operations/_alert_management.html.haml
+++ b/app/views/projects/settings/operations/_alert_management.html.haml
@@ -7,7 +7,7 @@
  .settings-header
    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
      = _('Alert integrations')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
      = _('Expand')
    %p
      = _('Display alerts from all configured monitoring tools.')

--- a/app/views/projects/settings/operations/_error_tracking.html.haml
+++ b/app/views/projects/settings/operations/_error_tracking.html.haml
@@ -6,7 +6,7 @@
  .settings-header
    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
      = _('Error tracking')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
      = _('Expand')
    %p
      = _('To link Sentry to GitLab, enter your Sentry URL and Auth Token.')

--- a/app/views/projects/settings/operations/_prometheus.html.haml
+++ b/app/views/projects/settings/operations/_prometheus.html.haml
@@ -2,7 +2,7 @@
  .settings-header
    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
      = _('Prometheus')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
      = _('Expand')
    %p
      = _('Link Prometheus monitoring to GitLab.')

--- a/app/views/projects/settings/operations/_tracing.html.haml
+++ b/app/views/projects/settings/operations/_tracing.html.haml
@@ -5,7 +5,7 @@
  .settings-header{ :class => "border-top" }
    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
      = _("Jaeger tracing")
-    %button.btn.gl-button.js-settings-toggle{ type: 'button' }
+    %button.btn.btn-default.gl-button.js-settings-toggle{ type: 'button' }
      = _('Expand')
    %p
      - if has_jaeger_url

--- a/app/views/projects/triggers/_form.html.haml
+++ b/app/views/projects/triggers/_form.html.haml
@@ -8,4 +8,4 @@
  .form-group
    = f.label :key, "Description", class: "label-bold"
    = f.text_field :description, class: 'form-control gl-form-input', required: true, title: 'Trigger description is required.', placeholder: "Trigger description"
-  = f.submit btn_text, class: "btn btn-success"
+  = f.submit btn_text, class: "gl-button btn btn-confirm"
--- a/app/views/projects/triggers/_trigger.html.haml
+++ b/app/views/projects/triggers/_trigger.html.haml
@@ -30,8 +30,8 @@
  %td.text-right.trigger-actions
    - revoke_trigger_confirmation = "By revoking a trigger you will break any processes making use of it. Are you sure?"
    - if can?(current_user, :admin_trigger, trigger)
-      = link_to edit_project_trigger_path(@project, trigger), method: :get, title: "Edit", class: "btn btn-default btn-sm" do
+      = link_to edit_project_trigger_path(@project, trigger), method: :get, title: "Edit", class: "gl-button btn btn-default btn-sm" do
        = sprite_icon('pencil')
    - if can?(current_user, :manage_trigger, trigger)
-      = link_to project_trigger_path(@project, trigger), data: { confirm: revoke_trigger_confirmation, testid: 'trigger_revoke_button' }, method: :delete, title: "Revoke", class: "btn btn-default btn-warning btn-sm btn-trigger-revoke" do
+      = link_to project_trigger_path(@project, trigger), data: { confirm: revoke_trigger_confirmation, testid: 'trigger_revoke_button' }, method: :delete, title: "Revoke", class: "gl-button btn btn-default btn-sm btn-trigger-revoke" do
        = sprite_icon('remove')
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -5,10 +5,10 @@
        %span.js-clone-dropdown-label
          = enabled_protocol_button(container, enabled_protocol)
    - else
-      %a#clone-dropdown.input-group-text.btn.gl-button.btn-default.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
+      %a#clone-dropdown.input-group-text.gl-button.btn.btn-default.btn-icon.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
        %span.js-clone-dropdown-label
          = default_clone_protocol.upcase
-        = sprite_icon('chevron-down')
+        = sprite_icon('chevron-down', css_class: 'gl-icon')
      %ul.dropdown-menu.dropdown-menu-selectable.clone-options-dropdown
        %li
          = ssh_clone_button(container)

--- a/app/views/shared/_confirm_modal.html.haml
+++ b/app/views/shared/_confirm_modal.html.haml
@@ -18,4 +18,4 @@
        .form-group
          = text_field_tag 'confirm_name_input', '', class: 'form-control js-confirm-danger-input qa-confirm-input'
        .form-actions
-          = submit_tag _('Confirm'), class: "btn btn-danger js-confirm-danger-submit qa-confirm-button"
+          = submit_tag _('Confirm'), class: "gl-button btn btn-danger js-confirm-danger-submit qa-confirm-button"
--- a/app/views/shared/_delete_label_modal.html.haml
+++ b/app/views/shared/_delete_label_modal.html.haml
@@ -11,7 +11,7 @@
          = html_escape(_('%{label_name} %{span_open}will be permanently deleted from %{subject_name}. This cannot be undone.%{span_close}')) % { label_name: tag.strong(label.name), subject_name: label.subject_name, span_open: '<span>'.html_safe, span_close: '</span>'.html_safe }

      .modal-footer
-        %a{ href: '#', data: { dismiss: 'modal' }, class: 'btn gl-button btn-default' }= _('Cancel')
+        %a{ href: '#', data: { dismiss: 'modal' }, class: 'gl-button btn btn-default' }= _('Cancel')

        = link_to _('Delete label'),
          label.destroy_path,

--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -29,7 +29,7 @@
            %ul
              - if label.project_label? && label.project.group && can?(current_user, :admin_label, label.project.group)
                %li
-                  %button.js-promote-project-label-button.btn.btn-transparent{ disabled: true, type: 'button',
+                  %button.js-promote-project-label-button.gl-button.btn.btn-default-tertiary{ disabled: true, type: 'button',
                    data: { url: promote_project_label_path(label.project, label),
                            label_title: label.title,
                            label_color: label.color,
@@ -53,10 +53,10 @@
            .dropdown-menu.dropdown-open-left
              %ul
                %li
-                  %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_project_label_path(@project, label) } }
+                  %button.js-subscribe-button.label-subscribe-button.gl-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_project_label_path(@project, label) } }
                    %span= _('Subscribe at project level')
                %li
-                  %button.js-subscribe-button.js-group-level.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } }
+                  %button.js-subscribe-button.js-group-level.label-subscribe-button.gl-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } }
                    %span= _('Subscribe at group level')
        - else
          %button.gl-button.js-subscribe-button.label-subscribe-button.btn.btn-default.gl-ml-3{ data: { status: status, url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }

--- a/app/views/shared/issuable/_approved_by_dropdown.html.haml
+++ b/app/views/shared/issuable/_approved_by_dropdown.html.haml
 #js-dropdown-approved-by.filtered-search-input-dropdown-menu.dropdown-menu
  %ul{ data: { dropdown: true } }
    %li.filter-dropdown-item{ data: { value: 'None' } }
-      %button.btn.btn-link{ type: 'button' }
+      %button.gl-button.btn.btn-link{ type: 'button' }
        = _('None')
    %li.filter-dropdown-item{ data: { value: 'Any' } }
-      %button.btn.btn-link{ type: 'button' }
+      %button.gl-button.btn.btn-link{ type: 'button' }
        = _('Any')
    %li.divider.droplab-item-ignore
    - if current_user

--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
--- a/app/views/shared/issuable/_sort_dropdown.html.haml
+++ b/app/views/shared/issuable/_sort_dropdown.html.haml
@@ -5,7 +5,7 @@
 .dropdown.inline.gl-ml-3.issue-sort-dropdown
  .btn-group{ role: 'group' }
    .btn-group{ role: 'group' }
-      %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }
+      %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'gl-button btn btn-default' }
        = sort_title
        = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
      %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort

--- a/app/views/shared/issuable/_user_dropdown_item.html.haml
+++ b/app/views/shared/issuable/_user_dropdown_item.html.haml
@@ -2,7 +2,7 @@
 - avatar = local_assigns.fetch(:avatar, { })

 %li.filter-dropdown-item{ class: ('js-current-user' if user == current_user) }
-  %button.btn.btn-link.dropdown-user{ type: :button }
+  %button.gl-button.btn.btn-link.dropdown-user{ type: :button }
    .avatar-container.s40
      = user_avatar_without_link(user: user, lazy: avatar[:lazy], url: avatar[:url], size: 40, has_tooltip: false)
    .dropdown-user-details

--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -67,7 +67,7 @@
        - if member.can_resend_invite?
          = link_to sprite_icon('paper-airplane'), polymorphic_path([:resend_invite, member]),
                    method: :post,
-                    class: 'btn btn-default align-self-center mr-sm-2',
+                    class: 'gl-button btn btn-default align-self-center mr-sm-2',
                    title: _('Resend invite')

        - if user != current_user && member.can_update?

--- a/app/views/shared/projects/_sort_dropdown.html.haml
+++ b/app/views/shared/projects/_sort_dropdown.html.haml
@@ -3,7 +3,7 @@

 .btn-group.w-100{ role: "group" }
  .btn-group.w-100.dropdown.js-project-filter-dropdown-wrap{ role: "group" }
-    %button#sort-projects-dropdown.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
+    %button#sort-projects-dropdown.gl-button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
      = toggle_text
      = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
    %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable

--- a/app/views/shared/promotions/_promote_servicedesk.html.haml
+++ b/app/views/shared/promotions/_promote_servicedesk.html.haml
 .user-callout.promotion-callout.js-service-desk-callout#promote_service_desk{ data: { uid: 'promote_service_desk_dismissed' } }
  .bordered-box.content-block
-    %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => 'Dismiss Service Desk promotion' }
+    %button.gl-button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => 'Dismiss Service Desk promotion' }
      = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
    .svg-container
      = custom_icon('icon_service_desk')

--- a/app/views/shared/runners/_form.html.haml
+++ b/app/views/shared/runners/_form.html.haml
@@ -59,4 +59,4 @@
      .col-sm-10
        = f.text_field :private_projects_minutes_cost_factor, class: 'form-control'
  .form-actions
-    = f.submit _('Save changes'), class: 'btn btn-success'
+    = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
--- a/app/views/sherlock/queries/_general.html.haml
+++ b/app/views/sherlock/queries/_general.html.haml
@@ -26,7 +26,7 @@
  .card
    .card-header
      .float-right
-        %button.js-clipboard-trigger.btn.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
+        %button.js-clipboard-trigger.gl-button.btn.btn-default.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
          = sprite_icon('copy-to-clipboard')
        %pre.hidden
          = @query.formatted_query
@@ -41,7 +41,7 @@
  .card
    .card-header
      .float-right
-        %button.js-clipboard-trigger.btn.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
+        %button.js-clipboard-trigger.gl-button.btn.btn-default.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
          = sprite_icon('copy-to-clipboard')
        %pre.hidden
          = @query.explain

--- a/ee/app/views/admin/geo/projects/_registry_failed.html.haml
+++ b/ee/app/views/admin/geo/projects/_registry_failed.html.haml
@@ -24,7 +24,7 @@

 .project-card-errors
  .card-header.bg-transparent.border-bottom-0.border-top
-    %button.btn.btn-link.btn-card-header.collapsed.d-flex{ type: 'button',
+    %button.gl-button.btn.btn-link.btn-card-header.collapsed.d-flex{ type: 'button',
        data: { toggle: 'collapse', target: "#project-errors-#{project_registry.project_id}" },
        'aria-expanded' => 'false',
        'aria-controls' => "project-errors-#{project_registry.project_id}" }

--- a/ee/app/views/admin/geo/projects/_registry_never.html.haml
+++ b/ee/app/views/admin/geo/projects/_registry_never.html.haml
@@ -25,7 +25,7 @@
 - if project_registry.last_repository_sync_failure || project_registry.last_repository_verification_failure
  .project-card-errors
    .card-header.bg-transparent.border-bottom-0.border-top
-      %button.btn.btn-link.btn-card-header.collapsed.d-flex{ type: 'button',
+      %button.gl-button.btn.btn-link.btn-card-header.collapsed.d-flex{ type: 'button',
          data: { toggle: 'collapse', target: "#project-errors-#{project_registry.project_id}" },
          'aria-expanded' => 'false',
          'aria-controls' => "project-errors-#{project_registry.project_id}" }

--- a/ee/app/views/admin/users/_admin_export_user_permissions.html.haml
+++ b/ee/app/views/admin/users/_admin_export_user_permissions.html.haml
 - return unless current_user&.can?(:export_user_permissions)

-= link_to admin_user_permission_exports_path(format: :csv), { class: 'gl-button btn btn-default', data: { toggle: "tooltip", placement: "top", container: "body" }, title: s_("AdminUsers|Export permissions as CSV") } do
+= link_to admin_user_permission_exports_path(format: :csv), { class: 'gl-button btn btn-default btn-icon', data: { toggle: "tooltip", placement: "top", container: "body" }, title: s_("AdminUsers|Export permissions as CSV") } do
  .gl-button-icon
    = sprite_icon('upload')
--- a/ee/app/views/groups/hooks/edit.html.haml
+++ b/ee/app/views/groups/hooks/edit.html.haml
@@ -9,6 +9,6 @@
    = form_for [@group, @hook], as: :hook, url: group_hook_path(@group, @hook) do |f|
      = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }

-      %span>= f.submit _('Save changes'), class: 'btn btn-success gl-mr-3'
+      %span>= f.submit _('Save changes'), class: 'gl-button btn btn-confirm gl-mr-3'
      = render 'shared/web_hooks/test_button', hook: @hook
      = link_to _('Delete'), group_hook_path(@group, @hook), method: :delete, class: 'gl-button btn btn-danger float-right', data: { confirm: _('Are you sure?') }
--- a/ee/app/views/groups/hooks/index.html.haml
+++ b/ee/app/views/groups/hooks/index.html.haml
@@ -8,7 +8,7 @@
    .col-lg-9.gl-mb-3
      = form_for @hook, as: :hook, url: polymorphic_path([@group, :hooks]) do |f|
        = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
-        = f.submit _('Add webhook'), class: 'btn btn-success'
+        = f.submit _('Add webhook'), class: 'gl-button btn btn-confirm'

      = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class
 - elsif show_promotions?

--- a/ee/app/views/groups/ldap_group_settings/_form.html.haml
+++ b/ee/app/views/groups/ldap_group_settings/_form.html.haml
@@ -8,4 +8,4 @@
            = f.label :unlock_membership_to_ldap, class: 'form-check-label' do
              = _('Allow owners to manually add users outside of LDAP')
    .form-actions
-      = f.submit _('Save'), class: 'btn btn-success qa-save'
+      = f.submit _('Save'), class: 'gl-button btn btn-confirm qa-save'
--- a/ee/app/views/groups/saml_providers/_form.html.haml
+++ b/ee/app/views/groups/saml_providers/_form.html.haml
@@ -63,6 +63,6 @@
        = s_('GroupSAML|This will be set as the access level of users added to the group.')

    .mt-3
-      = f.submit _("Save changes"), class: 'btn btn-success', data: { qa_selector: 'save_changes_button' }
+      = f.submit _("Save changes"), class: 'gl-button btn btn-confirm', data: { qa_selector: 'save_changes_button' }
      #js-saml-test-button.has-tooltip.float-right
        = render 'test_button', saml_provider: @saml_provider
--- a/ee/app/views/groups/saml_providers/_response_debug.html.haml
+++ b/ee/app/views/groups/saml_providers/_response_debug.html.haml
@@ -11,7 +11,7 @@
    = s_("GroupSAML|SAML Response XML")
    .file-actions
      .btn-group
-        = clipboard_button(text: indented_xml, class: "btn btn-sm js-copy-blob-source-btn", title: s_('GroupSAML|Copy SAML Response XML'))
+        = clipboard_button(text: indented_xml, class: "gl-button btn btn-sm js-copy-blob-source-btn btn-default", title: s_('GroupSAML|Copy SAML Response XML'))
  .file-content.code.js-syntax-highlight.qa-file-content
    .blob-content
      %pre.code.highlight

--- a/ee/app/views/groups/saml_providers/_test_button.html.haml
+++ b/ee/app/views/groups/saml_providers/_test_button.html.haml
-= saml_link_for_provider _('Verify SAML Configuration'), saml_provider, redirect: ::OmniAuth::Strategies::GroupSaml::VERIFY_SAML_RESPONSE, html_class: "btn qa-saml-settings-test-button #{ 'd-none' unless saml_provider.persisted? }"
+= saml_link_for_provider _('Verify SAML Configuration'), saml_provider, redirect: ::OmniAuth::Strategies::GroupSaml::VERIFY_SAML_RESPONSE, html_class: "gl-button btn btn-default qa-saml-settings-test-button #{ 'd-none' unless saml_provider.persisted? }"
--- a/ee/app/views/groups/settings/_restore.html.haml
+++ b/ee/app/views/groups/settings/_restore.html.haml
@@ -8,4 +8,4 @@
  %p
    = _("Restoring the group will prevent the group, its subgroups and projects from being removed on this date.")
    = form_tag(group_restore_path(group), method: :post) do
-      = button_to _('Restore group'), '#', class: "btn btn-warning"
+      = button_to _('Restore group'), '#', class: "gl-button btn btn-default"
--- a/ee/app/views/groups/sso/_register_pane.html.haml
+++ b/ee/app/views/groups/sso/_register_pane.html.haml
@@ -36,7 +36,7 @@
          = render 'user_info'

        .submit-container
-          = f.submit _("Sign out & Register"), class: "btn-success btn qa-new-user-register-button", data: { qa_selector: 'sign_out_and_register_button' }
+          = f.submit _("Sign out & Register"), class: "btn-confirm gl-button btn qa-new-user-register-button", data: { qa_selector: 'sign_out_and_register_button' }
      - else
        .submit-container
-          = f.submit _("Register"), class: "btn-success btn qa-new-user-register-button"
+          = f.submit _("Register"), class: "btn-confirm gl-button btn qa-new-user-register-button"
--- a/ee/app/views/ldap_group_links/_form.html.haml
+++ b/ee/app/views/ldap_group_links/_form.html.haml
@@ -54,4 +54,4 @@
            You can manage permission levels for individual group members in the Members tab.

    .form-actions.gl-mb-5
-      = f.submit 'Add synchronization', class: 'btn btn-success qa-add-sync-button'
+      = f.submit 'Add synchronization', class: 'gl-button btn btn-confirm qa-add-sync-button'
--- a/ee/app/views/ldap_group_links/_ldap_group_link.html.haml
+++ b/ee/app/views/ldap_group_links/_ldap_group_link.html.haml
 %li
  .float-right
-    = link_to group_ldap_group_link_path(group, ldap_group_link), method: :delete, class: 'btn btn-danger btn-sm' do
+    = link_to group_ldap_group_link_path(group, ldap_group_link), method: :delete, class: 'gl-button btn btn-danger btn-sm' do
      = sprite_icon('unlink', size: 12, css_class: 'gl-m-0!')
      %span= _('Remove')
  %strong= ldap_group_link.cn ? "Group: #{ldap_group_link.cn}" : "Filter: #{truncate(ldap_group_link.filter, length: 70)}"

--- a/ee/app/views/projects/mirrors/_table_pull_row.html.haml
+++ b/ee/app/views/projects/mirrors/_table_pull_row.html.haml
@@ -19,11 +19,11 @@
    .btn-group.mirror-actions-group.float-right{ role: 'group' }
      - ssh_public_key = @project.import_data.ssh_public_key
      - if ssh_public_key
-        = clipboard_button(text: ssh_public_key, class: 'btn btn-default rspec-copy-ssh-public-key', title: _('Copy SSH public key'), qa_selector: 'copy_public_key_button')
+        = clipboard_button(text: ssh_public_key, class: 'gl-button btn btn-default rspec-copy-ssh-public-key', title: _('Copy SSH public key'), qa_selector: 'copy_public_key_button')
      - if import_state.mirror_update_due? || import_state.updating_mirror?
-        %button.btn.btn-icon.gl-button.disabled{ type: 'button', data: { container: 'body', toggle: 'tooltip', qa_selector: 'updating_button' }, title: _('Updating') }= sprite_icon("retry", css_class: "spin")
+        %button.btn.btn-default.btn-icon.gl-button.disabled{ type: 'button', data: { container: 'body', toggle: 'tooltip', qa_selector: 'updating_button' }, title: _('Updating') }= sprite_icon("retry", css_class: "spin")
      - elsif @project.archived?
-        %button.btn.btn-icon.gl-button.disabled{ type: 'button', data: { container: 'body', toggle: 'tooltip', qa_selector: 'update_now_button' }, title: _('This Project is currently archived and read-only. Please unarchive the project first if you want to resume Pull mirroring') }= sprite_icon("retry")
+        %button.btn.btn-default.btn-icon.gl-button.disabled{ type: 'button', data: { container: 'body', toggle: 'tooltip', qa_selector: 'update_now_button' }, title: _('This Project is currently archived and read-only. Please unarchive the project first if you want to resume Pull mirroring') }= sprite_icon("retry")
      - else
        = link_to update_now_project_mirror_path(@project), method: :post, class: 'btn gl-button btn-icon btn-default js-force-update-mirror', data: { container: 'body', toggle: 'tooltip', qa_selector: 'update_now_button' }, title: _('Update now') do
          = sprite_icon("retry")

--- a/ee/app/views/registrations/welcome/_button.html.haml
+++ b/ee/app/views/registrations/welcome/_button.html.haml
-= button_tag welcome_submit_button_text, class: %w[btn btn-success w-100], data: { qa_selector: 'get_started_button' }
+= button_tag welcome_submit_button_text, class: %w[gl-button btn btn-confirm w-100], data: { qa_selector: 'get_started_button' }
--- a/ee/app/views/shared/_ultimate_trial_callout_content.html.haml
+++ b/ee/app/views/shared/_ultimate_trial_callout_content.html.haml
@@ -16,6 +16,6 @@
        = link_to _('Start your trial'), new_trial_registration_path(glm_source: 'gitlab.com', glm_content: 'gold-callout'), class: "btn btn-confirm gl-button mt-2 mt-sm-0 #{button_css_class}", target: '_blank'

      - if is_dismissable
-        %button.btn.btn-default.close.js-close{ type: 'button',
+        %button.gl-button.btn.btn-default.close.js-close{ type: 'button',
          'aria-label' => _('Dismiss trial promotion') }
          = sprite_icon('close', css_class: 'dismiss-icon')
--- a/ee/app/views/shared/epic/_search_bar.html.haml
+++ b/ee/app/views/shared/epic/_search_bar.html.haml
@@ -32,7 +32,7 @@
        .filtered-search-box
          = dropdown_tag(_('Recent searches'),
            options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
-            toggle_class: "btn filtered-search-history-dropdown-toggle-button",
+            toggle_class: "gl-button btn btn-default filtered-search-history-dropdown-toggle-button",
            dropdown_class: "filtered-search-history-dropdown",
            content_class: "filtered-search-history-dropdown-content" }) do
            .js-filtered-search-history-dropdown{ data: { full_path: search_history_storage_prefix } }
@@ -44,7 +44,7 @@
            #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                %li.filter-dropdown-item{ data: {hint: "#{'{{hint}}'}", tag: "#{'{{tag}}'}", action: "#{'{{hint === \'search\' ? \'submit\' : \'\' }}'}" } }
-                  %button.btn.btn-link{ type: 'button' }
+                  %button.gl-button.btn.btn-link{ type: 'button' }
                    -# Encapsulate static class name `{{icon}}` inside #{} to bypass
                    -# haml lint's ClassAttributeWithStaticValue
                    %svg
@@ -54,7 +54,7 @@
            #js-dropdown-operator.filtered-search-input-dropdown-menu.dropdown-menu
              %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
                %li.filter-dropdown-item{ data: { value: "{{ title }}" } }
-                  %button.btn.btn-link{ type: 'button' }
+                  %button.gl-button.btn.btn-link{ type: 'button' }
                    {{ title }}
                    %span.btn-helptext
                      {{ help }}
@@ -70,12 +70,12 @@
            #js-dropdown-label.filtered-search-input-dropdown-menu.dropdown-menu
              %ul{ data: { dropdown: true } }
                %li.filter-dropdown-item{ data: { value: 'none' } }
-                  %button.btn.btn-link{ type: 'button' }
+                  %button.gl-button.btn.btn-link{ type: 'button' }
                    = _("No label")
                %li.divider.droplab-item-ignore
              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                %li.filter-dropdown-item{ type: 'button' }
-                  %button.btn.btn-link
+                  %button.gl-button.btn.btn-link
                    %span.dropdown-label-box{ style: 'background: {{color}}' }
                    %span.label-title.js-data-value
                      {{ title }}

--- a/ee/app/views/shared/epic/_sort_dropdown.html.haml
+++ b/ee/app/views/shared/epic/_sort_dropdown.html.haml
@@ -4,7 +4,7 @@
 .dropdown.gl-new-dropdown.gl-ml-3
  .btn-group.d-flex.d-md-inline-flex
    .btn-group
-      %button.btn.gl-button.btn-default.dropdown-toggle.epics-sort-btn{ type: 'button', data: { toggle: 'dropdown' } }
+      %button.btn.gl-button.btn-default.epics-sort-btn{ type: 'button', data: { toggle: 'dropdown' } }
        %span.gl-new-dropdown-button-text
          = sorted_by
        = sprite_icon('chevron-down', css_class: 'gl-button-icon dropdown-chevron gl-icon s16')

--- a/ee/app/views/shared/promotions/_promote_advanced_search.html.haml
+++ b/ee/app/views/shared/promotions/_promote_advanced_search.html.haml
 - if show_advanced_search_promotion?
  .user-callout.promotion-callout.promotion-advanced-search.js-mr-approval-callout#promote_advanced_search{ data: { uid: 'promote_advanced_search_dismissed' } }
    .bordered-box.content-block
-      %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => _('Dismiss merge request promotion') }
+      %button.btn.btn-default-tertiary.btn-icon.btn-sm.close.gl-banner-close.gl-button.js-close-callout{ type: 'button', 'aria-label' => _('Dismiss') }
        = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
      .svg-container
        = custom_icon('icon_search_avatar')

--- a/ee/app/views/shared/promotions/_promote_burndown_charts.html.haml
+++ b/ee/app/views/shared/promotions/_promote_burndown_charts.html.haml
@@ -3,7 +3,7 @@
 - if show_burndown_charts_promotion?(milestone) && show_callout?(callout_id)
  .user-callout.promotion-callout#promote_burndown_charts{ data: { uid: callout_id } }
    .bordered-box.content-block.promotion-burndown-charts-content
-      %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => s_('Promotions|Dismiss burndown charts promotion') }
+      %button.gl-button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => s_('Promotions|Dismiss burndown charts promotion') }
        = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
      .svg-container
        = custom_icon('icon_burndown_charts')

--- a/ee/app/views/shared/promotions/_promote_mr_features.html.haml
+++ b/ee/app/views/shared/promotions/_promote_mr_features.html.haml
 - if show_promotions? && show_callout?('promote_mr_features_dismissed') && !@project.feature_available?(:merge_request_approvers)
  .user-callout.promotion-callout.append-bottom-20.js-mr-approval-callout#promote_mr_features{ data: { uid: 'promote_mr_features_dismissed' } }
    .bordered-box.content-block
-      %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => _('Dismiss merge request promotion') }
+      %button.gl-button.btn.btn-default-tertiary.close.js-close-callout{ type: 'button', 'aria-label' => _('Dismiss merge request promotion') }
        = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
      .user-callout-copy
        %h4

--- a/ee/app/views/shared/promotions/_promote_repository_features.html.haml
+++ b/ee/app/views/shared/promotions/_promote_repository_features.html.haml
 - if show_promotions? && show_callout?('promote_repository_features_dismissed') && (!@project.feature_available?(:push_rules) || !@project.feature_available?(:repository_mirrors) || !@project.feature_available?(:protected_refs_for_users))
  .user-callout.promotion-callout{ id: 'promote_repository_features', data: { uid: 'promote_repository_features_dismissed' } }
    .bordered-box.content-block
-      %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => 'Dismiss repository features promotion' }
+      %button.gl-button.btn.btn-default-tertiary.close.js-close-callout{ type: 'button', 'aria-label' => 'Dismiss repository features promotion' }
        = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
      .svg-container
        = custom_icon('icon_push_rules')

--- a/ee/app/views/trials/select.html.haml
+++ b/ee/app/views/trials/select.html.haml
@@ -29,6 +29,6 @@
        .gl-form-checkbox.form-check.form-check-inline
          = radio_button_tag :trial_entity, :individual, params[:trial_entity]=='individual', required: true, class: 'form-check-input'
          = label_tag :trial_entity_individual, _('No'), class: 'form-check-label'
-  = submit_tag _('Start your free trial'), class: 'btn btn-success btn-block'
+  = submit_tag _('Start your free trial'), class: 'gl-button btn btn-confirm btn-block'

 = render 'skip_trial'
--- a/ee/app/views/unsubscribes/show.html.haml
+++ b/ee/app/views/unsubscribes/show.html.haml
@@ -8,4 +8,4 @@
    %strong= @email
    from any further admin emails.
  .form-actions
-    = submit_tag 'Unsubscribe', class: 'btn btn-success'
+    = submit_tag 'Unsubscribe', class: 'gl-button btn btn-confirm'
--- a/ee/changelogs/unreleased/bootstrap-button-migration.yml
+++ b/ee/changelogs/unreleased/bootstrap-button-migration.yml
+---
+title: Bootstrap button migration
+merge_request: 56968
+author:
+type: other
--- a/ee/spec/features/groups/group_roadmap_spec.rb
+++ b/ee/spec/features/groups/group_roadmap_spec.rb
@@ -58,7 +58,7 @@ RSpec.describe 'group epic roadmap', :js do
      it 'renders the sort dropdown correctly' do
        page.within('.content-wrapper .content .epics-other-filters') do
          expect(page).to have_css('.filter-dropdown-container')
-          find('.dropdown-toggle').click
+          find('.epics-sort-btn').click
          page.within('.dropdown-menu') do
            expect(page).to have_selector('li a', count: 2)
            expect(page).to have_content('Start date')

--- a/spec/helpers/snippets_helper_spec.rb
+++ b/spec/helpers/snippets_helper_spec.rb
@@ -32,7 +32,7 @@ RSpec.describe SnippetsHelper do
    end

    def download_link(url)
-      "<a class=\"btn\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"Open raw\" href=\"#{url}\">#{external_snippet_icon('doc-code')}</a>"
+      "<a class=\"gl-button btn btn-default\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"Open raw\" href=\"#{url}\">#{external_snippet_icon('doc-code')}</a>"
    end
  end

@@ -59,31 +59,7 @@ RSpec.describe SnippetsHelper do
    end

    def download_link(url)
-      "<a class=\"btn\" target=\"_blank\" title=\"Download\" rel=\"noopener noreferrer\" href=\"#{url}?inline=false\">#{external_snippet_icon('download')}</a>"
-    end
-  end
-
-  describe '#download_raw_snippet_button' do
-    subject { download_raw_snippet_button(snippet) }
-
-    context 'with personal snippet' do
-      let(:snippet) { public_personal_snippet }
-
-      it 'returns the download button' do
-        expect(subject).to eq(download_link("/-/snippets/#{snippet.id}/raw"))
-      end
-    end
-
-    context 'with project snippet' do
-      let(:snippet) { public_project_snippet }
-
-      it 'returns the download button' do
-        expect(subject).to eq(download_link("/#{snippet.project.path_with_namespace}/-/snippets/#{snippet.id}/raw"))
-      end
-    end
-
-    def download_link(url)
-      "<a target=\"_blank\" rel=\"noopener noreferrer\" class=\"btn btn-sm has-tooltip\" title=\"Download\" data-container=\"body\" href=\"#{url}?inline=false\">#{sprite_icon('download')}</a>"
+      "<a class=\"gl-button btn btn-default\" target=\"_blank\" title=\"Download\" rel=\"noopener noreferrer\" href=\"#{url}?inline=false\">#{external_snippet_icon('download')}</a>"
    end
  end


--- a/spec/helpers/wiki_helper_spec.rb
+++ b/spec/helpers/wiki_helper_spec.rb
@@ -76,7 +76,7 @@ RSpec.describe WikiHelper do
  describe '#wiki_sort_controls' do
    let(:wiki) { create(:project_wiki) }
    let(:wiki_link) { helper.wiki_sort_controls(wiki, sort, direction) }
-    let(:classes) { "btn btn-default has-tooltip reverse-sort-btn qa-reverse-sort rspec-reverse-sort" }
+    let(:classes) { "gl-button btn btn-default btn-icon has-tooltip reverse-sort-btn qa-reverse-sort rspec-reverse-sort" }

    def expected_link(sort, direction, icon_class)
      path = "/#{wiki.project.full_path}/-/wikis/pages?direction=#{direction}&sort=#{sort}"