2 files changed, 30 insertions, 0 deletions

diff --git a/tpl/objects/overflow-button.pug b/tpl/objects/overflow-button.pug
index f52f12b..301c6b3 100644
--- a/tpl/objects/overflow-button.pug
+++ b/tpl/objects/overflow-button.pug
@@ -7,6 +7,9 @@ mixin overflow-button
             'u-d-block':         attributes.block,
             'is-selected':       attributes.selected
         }
+        if (attributes.variant) {
+            classes['o-overflow-button--' + attributes.variant] = true
+        }
         if (attributes.class) {
             classes[attributes.class] = true;
         }
diff --git a/tpl/views/overflow-button.pug b/tpl/views/overflow-button.pug
index 112aaab..6eb63a4 100644
--- a/tpl/views/overflow-button.pug
+++ b/tpl/views/overflow-button.pug
@@ -8,3 +8,30 @@ mixin view-overflow-button
             +overflow-button(icon='trash' disabled=true)= 'Disabled'
             = ' '
             +overflow-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
+
+        .c-box
+            +overflow-button(icon='trash' variant='red')= '123'
+            = ' '
+            +overflow-button(icon='trash' variant='red' selected=true)= 'Delete'
+            = ' '
+            +overflow-button(icon='trash' variant='red' disabled=true)= 'Disabled'
+            = ' '
+            +overflow-button(icon='trash' variant='red' selected=true disabled=true)= 'Selected + disabled'
+
+        .c-box
+            +overflow-button(icon='trash' variant='blue')= '123'
+            = ' '
+            +overflow-button(icon='trash' variant='blue' selected=true)= 'Delete'
+            = ' '
+            +overflow-button(icon='trash' variant='blue' disabled=true)= 'Disabled'
+            = ' '
+            +overflow-button(icon='trash' variant='blue' selected=true disabled=true)= 'Selected + disabled'
+
+        .c-box
+            +overflow-button(icon='trash' variant='green')= '123'
+            = ' '
+            +overflow-button(icon='trash' variant='green' selected=true)= 'Delete'
+            = ' '
+            +overflow-button(icon='trash' variant='green' disabled=true)= 'Disabled'
+            = ' '
+            +overflow-button(icon='trash' variant='green' selected=true disabled=true)= 'Selected + disabled'