diff --git a/src/backend/views/components/button.twig b/src/backend/views/components/button.twig
index 95273998..4bdf0b91 100644
--- a/src/backend/views/components/button.twig
+++ b/src/backend/views/components/button.twig
@@ -24,7 +24,7 @@
 
 <{{tag}}
   {{ name is not empty ? 'name="' ~ name ~ '"': '' }}
-  class="{{ mainClass }} {{ mainClass }}--{{ style|default('primary') }} {{ mainClass }}--{{ size|default('default') }} {{ icon ? mainClass ~ '--with-icon' : '' }} {{ class ?? '' }}"
+  class="{{ mainClass }} {{ mainClass }}--{{ style|default('primary') }} {{ mainClass }}--{{ size|default('default') }} {{ icon ? mainClass ~ '--with-icon' : '' }} {{label ? mainClass ~ '--with-label' : ''}} {{ class ?? '' }}"
   {{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
 >
   {% if icon %}
diff --git a/src/frontend/styles/components/button.pcss b/src/frontend/styles/components/button.pcss
index c28031f9..6e807a42 100644
--- a/src/frontend/styles/components/button.pcss
+++ b/src/frontend/styles/components/button.pcss
@@ -23,7 +23,6 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-right: 4px;
 
     svg {
       width: 24px;
@@ -32,13 +31,16 @@
     }
   }
 
+  &--with-label &__icon {
+    margin-right: 4px;
+  }
+
   &--default {
     --height: 40px;
   }
 
   &--small {
     --height: 32px;
-    padding-right: 10px;
   }
 
   &--primary {
@@ -77,7 +79,27 @@
     }
   }
 
-  &--with-icon {
+  &--with-icon&--with-label {
+    padding-left: 8px;
+  }
+
+  &--with-icon:not(&--with-label) {
+    padding-right: 8px;
     padding-left: 8px;
   }
+
+  &--small&--with-icon&--with-label {
+    padding-left: 6px;
+    padding-right: 10px;
+  }
+
+  &--small&--with-icon:not(&--with-label) {
+    padding-right: 6px;
+    padding-left: 6px;
+  }
+
+  &--small&--with-label:not(&--with-icon) {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
 }