Add a badge for action button and include utility classes

src/Resources/assets/styles/_tailwind.scss

@@ -83,6 +83,7 @@
     // Badges
     .whatwedo-utility-badge {
         @apply inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-primary-500 text-white;
+        text-wrap: nowrap;
 
         &--success {
             @apply bg-success-500;
@@ -105,6 +106,19 @@
         }
     }
 
+    .whatwedo-utility-button-badge {
+        @apply inline-flex items-center rounded-full px-2 py-0.5 ml-2 text-xs font-medium bg-primary-500 text-white;
+        text-wrap: nowrap;
+
+        &--primary {
+            @apply bg-primary-500 text-white;
+        }
+
+        &--white {
+            @apply bg-white text-primary-500;
+        }
+    }
+
     // Topbar
     .whatwedo-utility-topbar {
         @apply flex flex-grow-0 flex-auto px-4 py-2 md:py-4 md:min-h-[71px] justify-end items-center lg:justify-between;
@@ -212,6 +226,10 @@
             @apply text-neutral-700 bg-transparent hover:bg-neutral-200 font-semibold;
         }
     }
+
+    .whatwedo-utility-button-badge--white {
+        @extend .whatwedo-utility-button-badge--primary;
+    }
 }
 
 /* TomSelect */

src/Resources/views/includes/_action.html.twig

@@ -65,7 +65,12 @@
                     class: 'inline h-4 w-4'~(not actionLabel is empty ? ' mr-2' : '')
                 }) }}
             {% endif %}
-            <span class="2xl:block">{{ actionLabel }}</span>
+            <span class="2xl:block">
+                {{ actionLabel }}
+                {% if action.option('attr')['count'] is defined %}
+                    <span class="whatwedo-utility-button-badge whatwedo-utility-button-badge--white">{{ action.option('attr')['count'] }}</span>
+                {% endif %}
+            </span>
         </a>
     {% endif %}
 {% endblock %}