Updated design

app/assets/javascripts/issuable.js.coffee

@@ -11,13 +11,11 @@ issuable_created = false
   initTemplates: ->
     Issuable.labelRow = _.template(
       '<% _.each(labels, function(label){ %>
-        <span class="label-row">
-          <a href="#">
-            <span class="label color-label has-tooltip" style="background-color: <%= label.color %>; color: <%= label.text_color %>" title="<%= _.escape(label.description) %>" data-container="body">
-              <%= _.escape(label.title) %>
-            </span>
+        <span class="label-row btn-group" role="group" aria-label="<%= _.escape(label.title) %>" style="color: <%= label.text_color %>;">
+          <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%= label.color %>;" title="<%= _.escape(label.description) %>" data-container="body">
+            <%= _.escape(label.title) %>
           </a>
-          <button type="button" class="btn btn-sm btn-transparent append-right-5 js-label-filter-remove" data-label="<%= _.escape(label.title) %>">
+          <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%= label.color %>;" data-label="<%= _.escape(label.title) %>">
             <i class="fa fa-times"></i>
           </button>
         </span>

app/assets/stylesheets/pages/labels.scss

@@ -169,3 +169,20 @@
     }
   }
 }
+
+.filtered-labels {
+  .label-row {
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+  }
+
+  .label-remove {
+    border-left: 1px solid;
+    z-index: 3;
+  }
+
+  .btn {
+    color: inherit;
+  }
+}

app/views/shared/_labels_row.html.haml

@@ -1,5 +1,10 @@
 - labels.each do |label|
-  %span.label-row
-    = link_to_label(label, tooltip: true)
-    %button.btn.btn-sm.btn-transparent.append-right-5.js-label-filter-remove{ type: "button", data: { label: label.title } }
+  %span.label-row.btn-group{ role: "group", aria: { label: escape_once(label.name) }, style: "color: #{text_color_for_bg(label.color)}" }
+    = link_to namespace_project_label_path(@project.namespace, @project, label),
+      class: "btn btn-transparent has-tooltip",
+      style: "background-color: #{label.color};",
+      title: escape_once(label.description),
+      data: { container: "body" } do
+      = escape_once label.name
+    %button.btn.btn-transparent.label-remove.js-label-filter-remove{ type: "button", style: "background-color: #{label.color};", data: { label: label.title } }
       = icon("times")