Vertical support

Author: mdo

scss/buttons/_button-group.scss

@@ -33,18 +33,40 @@
     > [class*="btn-"] + [class*="btn-"] {
       &::before {
         position: absolute;
-        top: 25%;
-        bottom: 25%;
-        left: calc(var(--btn-border-width) * -1);
+        // top: 25%;
+        // bottom: 25%;
+        // left: calc(var(--btn-border-width) * -1);
         z-index: 3;
-        width: var(--btn-border-width);
+        // width: var(--btn-border-width);
         content: "";
         background-color: var(--btn-color);
         opacity: .25;
       }
     }
   }
 
+  .btn-group:where(.btn-group-divider) {
+    > [class*="btn-"] + [class*="btn-"] {
+      &::before {
+        top: 25%;
+        bottom: 25%;
+        left: calc(var(--btn-border-width) * -1);
+        width: var(--btn-border-width);
+      }
+    }
+  }
+
+  .btn-group-vertical:where(.btn-group-divider) {
+    > [class*="btn-"] + [class*="btn-"] {
+      &::before {
+        top: calc(var(--btn-border-width) * -1);
+        right: var(--btn-padding-x);
+        left: var(--btn-padding-x);
+        height: var(--btn-border-width);
+      }
+    }
+  }
+
   // Optional: Group multiple button groups together for a toolbar
   .btn-toolbar {
     display: flex;

site/src/content/docs/components/button-group.mdx

@@ -46,6 +46,19 @@ Add a divider between buttons by adding the `.btn-group-divider` class to the `.
     <button type="button" class="btn-solid theme-secondary">Right</button>
   </div>`} />
 
+Works with vertical button groups, too.
+
+<Example class="d-flex align-items-start gap-2" code={`<div class="btn-group-vertical btn-group-divider" role="group" aria-label="Basic example">
+    <button type="button" class="btn-solid theme-primary">Left</button>
+    <button type="button" class="btn-solid theme-primary active">Active</button>
+    <button type="button" class="btn-solid theme-primary">Right</button>
+  </div>
+
+  <div class="btn-group-vertical btn-group-divider" role="group" aria-label="Basic example">
+    <button type="button" class="btn-solid theme-secondary">Left</button>
+    <button type="button" class="btn-solid theme-secondary">Right</button>
+  </div>`} />
+
 ## Theme variants
 
 Ue the `.theme-{color}` classes to apply a theme color to a set of buttons.