Added round button variant

3 files changed, 29 insertions, 1 deletions

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index f35bc50..df1438f 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -157,5 +157,11 @@
                 color:            fn.color(--any --key-focus --label);
             }
         }
+    
+        @include iro.bem-modifier('round') {
+            padding-right: fn.dim(--pad-y);
+            padding-left:  fn.dim(--pad-y);
+            border-radius: 100em;
+        }
     }
 }
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 8cae2f1..e99e5ab 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -3,7 +3,8 @@ mixin a-button
         let classes = {
             'o-button':          true,
             'o-button--block':   attributes.block,
-            'o-button--outline': attributes.outline
+            'o-button--outline': attributes.outline,
+            'o-button--round':   !!attributes.icon
         }
         if (attributes.variant) {
             classes['o-button--' + attributes.variant] = true
@@ -12,4 +13,7 @@ mixin a-button
         let href = attributes.disabled ? null : '#';
 
     a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled))
+        if attributes.icon
+            +icon(attributes.icon)(block=!block)
+            = ' '
         block
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 9deba01..2a1bd57 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -8,13 +8,31 @@ mixin view-button
                 +a-button(variant='accent' outline=true disabled=true)= 'Button'
             br
             .l-button-group
+                +a-button(variant='accent' icon='trash')
+                +a-button(variant='accent' disabled=true icon='trash')
+                +a-button(variant='accent' outline=true icon='trash')
+                +a-button(variant='accent' outline=true disabled=true icon='trash')
+            br
+            .l-button-group
                 +a-button(variant='primary')= 'Button'
                 +a-button(variant='primary' disabled=true)= 'Button'
                 +a-button(variant='primary' outline=true)= 'Button'
                 +a-button(variant='primary' outline=true disabled=true)= 'Button'
             br
             .l-button-group
+                +a-button(variant='primary' icon='trash')
+                +a-button(variant='primary' disabled=true icon='trash')
+                +a-button(variant='primary' outline=true icon='trash')
+                +a-button(variant='primary' outline=true disabled=true icon='trash')
+            br
+            .l-button-group
                 +a-button(variant='secondary')= 'Button'
                 +a-button(variant='secondary' disabled=true)= 'Button'
                 +a-button(variant='secondary' outline=true)= 'Button'
                 +a-button(variant='secondary' outline=true disabled=true)= 'Button'
+            br
+            .l-button-group
+                +a-button(variant='secondary' icon='trash')
+                +a-button(variant='secondary' disabled=true icon='trash')
+                +a-button(variant='secondary' outline=true icon='trash')
+                +a-button(variant='secondary' outline=true disabled=true icon='trash')