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

Bootstrap button migration

See merge request gitlab-org/gitlab!56968

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>

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);

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;

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;
-  }
-}

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;

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 {

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;

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;

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')

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
 

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'
 

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"

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) } }

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

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')

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}}
 

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.')

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"

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) } }

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

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"

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')

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')

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')

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")

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}}
 

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')

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' }

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
 

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

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')

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,

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

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'),

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?

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.")

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?

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')

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

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

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

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'

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'

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' }

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.')

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.')

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.')

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

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"

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')

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)

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"

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,

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 }

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

app/views/shared/issuable/_search_bar.html.haml

@@ -30,7 +30,7 @@
                 - text = tag.span(sprite_icon('history'), class: "d-md-none") + tag.span(_('Recent searches'), class: "d-none d-md-inline")
                 = dropdown_tag(text,
                   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 } }
@@ -42,7 +42,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
@@ -52,7 +52,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 }}
@@ -68,10 +68,10 @@
                 #js-dropdown-assignee.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
@@ -84,10 +84,10 @@
                 #js-dropdown-reviewer.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
@@ -102,92 +102,92 @@
                 #js-dropdown-milestone.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.filter-dropdown-item{ data: { value: 'Upcoming' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Upcoming')
                     %li.filter-dropdown-item{ data: { value: 'Started' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Started')
                     %li.divider.droplab-item-ignore
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item
-                      %button.btn.btn-link.js-data-value{ type: 'button' }
+                      %button.gl-button.btn.btn-link.js-data-value{ type: 'button' }
                         {{title}}
                 = render_if_exists 'shared/issuable/filter_iteration', type: type
                 #js-dropdown-release.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
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item
-                      %button.btn.btn-link.js-data-value{ type: 'button' }
+                      %button.gl-button.btn.btn-link.js-data-value{ type: 'button' }
                         {{title}}
                 #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' }
                         = _('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
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         %span.dropdown-label-box{ style: 'background: {{color}}' }
                         %span.label-title.js-data-value
                           {{title}}
                 #js-dropdown-my-reaction.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
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         %gl-emoji
                         %span.js-data-value.gl-ml-3
                           {{name}}
                 #js-dropdown-wip.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul.filter-dropdown{ data: { dropdown: true } }
                     %li.filter-dropdown-item{ data: { value: 'yes', capitalize: true } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Yes')
                     %li.filter-dropdown-item{ data: { value: 'no', capitalize: true } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('No')
                 #js-dropdown-confidential.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul.filter-dropdown{ data: { dropdown: true } }
                     %li.filter-dropdown-item{ data: { value: 'yes', capitalize: true } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Yes')
                     %li.filter-dropdown-item{ data: { value: 'no', capitalize: true } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('No')
                 - unless disable_target_branch
                   #js-dropdown-target-branch.filtered-search-input-dropdown-menu.dropdown-menu
                     %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                       %li.filter-dropdown-item
-                        %button.btn.btn-link.js-data-value.monospace
+                        %button.gl-button.btn.btn-link.js-data-value.monospace
                           {{title}}
                 #js-dropdown-environment.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item
-                      %button.btn.btn-link.js-data-value{ type: 'button' }
+                      %button.gl-button.btn.btn-link.js-data-value{ type: 'button' }
                         {{title}}
 
                 = render_if_exists 'shared/issuable/filter_weight', type: type

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

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

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?

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

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')

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'

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

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}" }

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}" }

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')

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?') }

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?

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'

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

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

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? }"

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"

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"

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'

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)}"

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")

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' }

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')

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 }}

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')

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')

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')

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

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')

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'

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'

ee/changelogs/unreleased/bootstrap-button-migration.yml

+---
+title: Bootstrap button migration
+merge_request: 56968
+author:
+type: other

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')

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
 

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}"