Fix badge + action button combo

4 files changed, 21 insertions, 6 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index bb23f7e..eebf136 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -77,6 +77,8 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
+        margin-top:       -.5em;
+        margin-bottom:    -.5em;
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
         border-radius:    fn.dim(--rounding);
         background-color: fn.color(--bg);
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
index 53e972c..04fd8eb 100644
--- a/tpl/objects/badge.pug
+++ b/tpl/objects/badge.pug
@@ -12,5 +12,9 @@ mixin badge(variant)
             classes['o-badge--' + variant] = true
         }
 
-    a(href="#", class=classes)
-        block
+    if attributes.href
+        a(href=attributes.href class=classes)
+            block
+    else
+        span(class=classes)
+            block
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 7bffe72..faa53bc 100644
--- a/tpl/views/action-button.pug
+++ b/tpl/views/action-button.pug
@@ -53,3 +53,12 @@ mixin view-action-button
             +action-button(quiet=true icon='trash' disabled=true)
             = ' '
             +action-button(quiet=true icon='trash' selected=true disabled=true)
+
+        .c-box
+            +action-button= 'Idle'
+            = ' '
+            +action-button(icon='trash')
+            = ' '
+            +action-button
+                = 'Idle'
+                +badge('primary')= '12'
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index 4c44af2..d4ca4b0 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -9,13 +9,13 @@ mixin view-badge
             = ' '
             +badge('accent-quiet')= 'new'
             = ' '
-            +badge(size=200)= '100'
+            +badge(size=200 href='#')= '100'
             = ' '
-            +badge('primary')(size=200)= 'new'
+            +badge('primary')(size=200 href='#')= 'new'
             = ' '
-            +badge('accent')(size=200)= 'new'
+            +badge('accent')(size=200 href='#')= 'new'
             = ' '
-            +badge('accent-quiet')(size=200)= 'new'
+            +badge('accent-quiet')(size=200 href='#')= 'new'
 
         .c-box
             +badge(pill=true)= '100'