diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
index 8c18cad9b5..7b7274b8ea 100755
--- a/src/definitions/elements/button.less
+++ b/src/definitions/elements/button.less
@@ -262,61 +262,64 @@
     right: 0;
   }
 
-  /* Vertical */
-  .ui.vertical.animated.button .visible.content,
-  .ui.vertical.animated.button .hidden.content {
-    transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
-  }
-  .ui.vertical.animated.button .visible.content {
-    transform: translateY(0%);
-    right: auto;
-  }
-  .ui.vertical.animated.button .hidden.content {
-    top: -50%;
-    left: 0;
-    right: auto;
-  }
-  .ui.vertical.animated.button:focus .visible.content,
-  .ui.vertical.animated.button:hover .visible.content {
-    transform: translateY(200%);
-    right: auto;
-  }
-  .ui.vertical.animated.button:focus .hidden.content,
-  .ui.vertical.animated.button:hover .hidden.content {
-    top: 50%;
-    right: auto;
-  }
-
-  /* Fade */
-  .ui.fade.animated.button .visible.content,
-  .ui.fade.animated.button .hidden.content {
-    transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
-  }
-  .ui.fade.animated.button .visible.content {
-    left: auto;
-    right: auto;
-    opacity: 1;
-    transform: scale(1);
-  }
-  .ui.fade.animated.button .hidden.content {
-    opacity: 0;
-    left: 0;
-    right: auto;
-    transform: scale(@fadeScaleHigh);
-  }
-  .ui.fade.animated.button:focus .visible.content,
-  .ui.fade.animated.button:hover .visible.content {
-    left: auto;
-    right: auto;
-    opacity: 0;
-    transform: scale(@fadeScaleLow);
+  & when (@variationButtonVertical) {
+    /* Vertical */
+    .ui.vertical.animated.button .visible.content,
+    .ui.vertical.animated.button .hidden.content {
+      transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+    }
+    .ui.vertical.animated.button .visible.content {
+      transform: translateY(0%);
+      right: auto;
+    }
+    .ui.vertical.animated.button .hidden.content {
+      top: -50%;
+      left: 0;
+      right: auto;
+    }
+    .ui.vertical.animated.button:focus .visible.content,
+    .ui.vertical.animated.button:hover .visible.content {
+      transform: translateY(200%);
+      right: auto;
+    }
+    .ui.vertical.animated.button:focus .hidden.content,
+    .ui.vertical.animated.button:hover .hidden.content {
+      top: 50%;
+      right: auto;
+    }
   }
-  .ui.fade.animated.button:focus .hidden.content,
-  .ui.fade.animated.button:hover .hidden.content {
-    left: 0;
-    right: auto;
-    opacity: 1;
-    transform: scale(1);
+  & when (@variationButtonAnimatedFade) {
+    /* Fade */
+    .ui.fade.animated.button .visible.content,
+    .ui.fade.animated.button .hidden.content {
+      transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+    }
+    .ui.fade.animated.button .visible.content {
+      left: auto;
+      right: auto;
+      opacity: 1;
+      transform: scale(1);
+    }
+    .ui.fade.animated.button .hidden.content {
+      opacity: 0;
+      left: 0;
+      right: auto;
+      transform: scale(@fadeScaleHigh);
+    }
+    .ui.fade.animated.button:focus .visible.content,
+    .ui.fade.animated.button:hover .visible.content {
+      left: auto;
+      right: auto;
+      opacity: 0;
+      transform: scale(@fadeScaleLow);
+    }
+    .ui.fade.animated.button:focus .hidden.content,
+    .ui.fade.animated.button:hover .hidden.content {
+      left: 0;
+      right: auto;
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 }
 
@@ -332,20 +335,23 @@
     text-shadow: none !important;
   }
 
-  /* Group */
-  .ui.inverted.buttons .button {
-    margin: @invertedGroupButtonOffset;
-  }
-  .ui.inverted.buttons .button:first-child {
-    margin-left: 0;
-  }
-  .ui.inverted.vertical.buttons .button {
-    margin: @invertedVerticalGroupButtonOffset;
-  }
-  .ui.inverted.vertical.buttons .button:first-child {
-    margin-top: 0;
+  & when (@variationButtonGroups) {
+    /* Group */
+    .ui.inverted.buttons .button {
+      margin: @invertedGroupButtonOffset;
+    }
+    .ui.inverted.buttons .button:first-child {
+      margin-left: 0;
+    }
+    & when (@variationButtonVertical) {
+      .ui.inverted.vertical.buttons .button {
+        margin: @invertedVerticalGroupButtonOffset;
+      }
+      .ui.inverted.vertical.buttons .button:first-child {
+        margin-top: 0;
+      }
+    }
   }
-
   /* States */
 
   /* Hover */
@@ -748,8 +754,10 @@
     vertical-align: top;
   }
 }
-.ui.animated.button > .content > .icon {
-  vertical-align: top;
+& when (@variationButtonAnimated) {
+  .ui.animated.button > .content > .icon {
+    vertical-align: top;
+  }
 }
 
 & when (@variationButtonBasic) {
@@ -767,15 +775,17 @@
     text-shadow: none !important;
     box-shadow: @basicBoxShadow;
   }
+  & when (@variationButtonGroups) {
+    .ui.basic.buttons {
+      box-shadow: @basicGroupBoxShadow;
+      border: @basicGroupBorder;
+      border-radius: @borderRadius;
+      border-right: none;
+    }
 
-  .ui.basic.buttons {
-    box-shadow: @basicGroupBoxShadow;
-    border: @basicGroupBorder;
-    border-radius: @borderRadius;
-  }
-
-  .ui.basic.buttons .button {
-    border-radius: 0;
+    .ui.basic.buttons .button {
+      border-radius: 0;
+    }
   }
 
   .ui.basic.buttons .button:hover,
@@ -810,18 +820,19 @@
   .ui.basic.active.button:hover {
     background-color: @transparentBlack;
   }
+  & when (@variationButtonGroups) {
 
-  /* Vertical */
-  .ui.basic.buttons .button:hover {
-    box-shadow: @basicHoverBoxShadow inset;
-  }
+    .ui.basic.buttons .button:hover {
+      box-shadow: @basicHoverBoxShadow inset;
+    }
 
-  .ui.basic.buttons .button:active {
-    box-shadow: @basicDownBoxShadow inset;
-  }
+    .ui.basic.buttons .button:active {
+      box-shadow: @basicDownBoxShadow inset;
+    }
 
-  .ui.basic.buttons .active.button {
-    box-shadow: @basicActiveBoxShadow;
+    .ui.basic.buttons .active.button {
+      box-shadow: @basicActiveBoxShadow;
+    }
   }
   & when (@variationButtonInverted) {
     /* Standard Basic Inverted */
@@ -867,21 +878,23 @@
     }
   }
 
-  & when (@variationButtonBasic) {
+  & when (@variationButtonGroups) {
     /* Basic Group */
-    .ui.basic.buttons .button {
-      border-left: @basicGroupBorder;
+    .ui.basic.buttons:not(.inverted) .button:not(.basic) {
+      border-right: @basicGroupBorder;
       box-shadow: none;
     }
 
-    .ui.basic.vertical.buttons .button {
-      border-left: none;
-      border-left-width: 0;
-      border-top: @basicGroupBorder;
-    }
+    & when (@variationButtonVertical) {
+      .ui.basic.vertical.buttons .button {
+        border-left: none;
+        border-left-width: 0;
+        border-top: @basicGroupBorder;
+      }
 
-    .ui.basic.vertical.buttons .button:first-child {
-      border-top-width: 0;
+      .ui.basic.vertical.buttons:not(.spaced) .button:first-child {
+        border-top: none;
+      }
     }
   }
 }
@@ -1220,7 +1233,7 @@
 
   /* Top / Bottom */
   .ui[class*="top attached"].buttons {
-    margin-bottom: @attachedOffset;
+    margin-bottom: @topAttachedOffset;
     border-radius: @borderRadius @borderRadius 0 0;
   }
 
@@ -1233,7 +1246,7 @@
   }
 
   .ui[class*="bottom attached"].buttons {
-    margin-top: @attachedOffset;
+    margin-top: @bottomAttachedOffset;
     border-radius: 0 0 @borderRadius @borderRadius;
   }
 
@@ -1539,10 +1552,6 @@
         box-shadow: 0 0 0 @basicColoredBorderSize @d inset;
         color: @d;
       }
-
-      .ui.buttons:not(.vertical) > .basic.@{color}.button:not(:first-child) {
-        margin-left: -@basicColoredBorderSize;
-      }
     }
     & when (@variationButtonInverted) {
       /* Inverted */
@@ -1898,8 +1907,10 @@
       float: none;
       width: 100%;
       margin: @verticalGroupOffset;
-      box-shadow: @verticalBoxShadow;
       border-radius: 0;
+      &:not(.basic) {
+        box-shadow: @verticalBoxShadow;
+      }
     }
 
     .ui.vertical.buttons .button:first-child {
@@ -1916,6 +1927,119 @@
     .ui.vertical.buttons .button:only-child {
       border-radius: @borderRadius;
     }
+    & when (@variationButtonBasic) {
+      .ui.vertical.buttons .basic.button:not(:first-child) {
+        border-top: none;
+      }
+    }
+  }
+
+  & when (@variationButtonWrapping) {
+    .ui.wrapping.buttons {
+      flex-wrap: wrap;
+    }
+    & when (@variationButtonBasic) {
+      .ui.wrapping.basic.buttons {
+        border-bottom: none;
+        & .button {
+          border-bottom: @basicGroupBorder;
+          &:hover {
+            background: transparent !important;
+          }
+        }
+      }
+    }
+    & when (@variationButtonCompact) {
+      .ui.compact.wrapping.buttons .button {
+        flex: none;
+      }
+    }
+  }
+  & when (@variationButtonWrapped) {
+    .ui.wrapped.buttons:not(.spaced) {
+      border-top-right-radius: 0;
+      & .button {
+        &:first-child {
+          border-radius: @basicBorderRadius 0 0 0;
+        }
+        &:last-child {
+          border-radius: 0 0 @basicBorderRadius 0;
+        }
+      }
+    }
+    & when (@variationButtonAttached) {
+      .ui.wrapped[class*="top attached"].buttons {
+        border-radius: @basicBorderRadius 0 0 0;
+        & .button:last-child {
+          border-radius: 0;
+        }
+      }
+      .ui.wrapped[class*="bottom attached"].buttons {
+        border-radius: 0 0 0 @basicBorderRadius;
+        & .button:first-child {
+          border-radius: 0;
+        }
+      }
+    }
+  }
+  & when (@variationButtonSpaced) {
+    .ui.spaced.buttons .ui.button {
+      margin-bottom: @spacedMargin;
+      margin-right: @spacedMargin;
+      border-radius: @basicBorderRadius;
+    }
+    & when (@variationButtonBasic) {
+      .ui.spaced.basic.buttons {
+        border: none;
+        & .button {
+          border: @basicGroupBorder;
+          &.basic {
+            border: none;
+          }
+        }
+      }
+      & when (@variationButtonVertical) {
+        .ui.spaced.basic.vertical.buttons .button:first-child {
+          border-top: @basicGroupBorder;
+        }
+      }
+      & when (@variationButtonWrapping) {
+        .ui.spaced.basic.wrapping.buttons .button:not(.basic) {
+          border-top: @basicGroupBorder;
+          border-right: @basicGroupBorder;
+          &:first-child {
+            border-left: @basicGroupBorder;
+          }
+        }
+      }
+      & when (@variationButtonInverted) {
+        .ui.spaced.basic.inverted.buttons .basic.button {
+          margin-bottom: e(%("calc(%d + %d)", @spacedMargin, @basicColoredBorderSize));
+          margin-top: @basicColoredBorderSize;
+        }
+      }
+    }
+  }
+
+  & when (@variationButtonBasic) {
+    .ui.basic.buttons:not(.vertical).inverted .button,
+    .ui.basic.buttons:not(.vertical) .basic.button {
+      margin-left: -@basicColoredBorderSize;
+      border-right: none;
+    }
+    .ui.basic.buttons:not(.vertical):not(.spaced):not(.inverted) .basic.button {
+      margin-top: -@basicColoredBorderSize;
+      border-bottom: none;
+    }
+    & when (@variationButtonAttached) or (@variationButtonInverted) {
+      .ui.inverted.basic.buttons:not(.spaced) .button,
+      .ui.attached.basic.buttons:not(.wrapping):not(.inverted) .basic.button {
+        margin-bottom: @attachedOffset;
+      }
+    }
+    .ui.basic.buttons:not(.vertical):not(.attached):not(.spaced):not(.wrapping):not(.inverted) .basic.button {
+      margin-bottom: -@basicColoredBorderSize;
+    }
   }
 }
 .loadUIOverrides();
diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables
index b74d900e6f..5aab806792 100644
--- a/src/themes/default/elements/button.variables
+++ b/src/themes/default/elements/button.variables
@@ -377,6 +377,8 @@
 
 /* Attached */
 @attachedOffset: -1px;
+@topAttachedOffset: 0;
+@bottomAttachedOffset: @attachedOffset;
 @attachedBoxShadow: 0 0 0 1px @borderColor;
 @attachedHorizontalPadding: 0.75em;
 @attachedZIndex: auto;
@@ -403,3 +405,6 @@
 /* Circular */
 @circularBorderRadius: 10em;
 @circularIconWidth: 1em;
+
+/* Spaced */
+@spacedMargin: 1em;
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
index 08daa31309..a73673db73 100644
--- a/src/themes/default/globals/variation.variables
+++ b/src/themes/default/globals/variation.variables
@@ -15,6 +15,7 @@
 /* Button */
 @variationButtonDisabled: true;
 @variationButtonAnimated: true;
+@variationButtonAnimatedFade: true;
 @variationButtonInverted: true;
 @variationButtonSocial: true;
 @variationButtonFloated: true;
@@ -34,6 +35,9 @@
 @variationButtonCircular: true;
 @variationButtonGroups: true;
 @variationButtonStackable: true;
+@variationButtonWrapping: true;
+@variationButtonWrapped: true;
+@variationButtonSpaced: true;
 @variationButtonSizes: @variationAllSizes;
 @variationButtonColors: @variationAllColors;