diff --git a/src/utilities/styled/button.css b/src/utilities/styled/button.css
new file mode 100644
index 00000000000..12f5abad822
--- /dev/null
+++ b/src/utilities/styled/button.css
@@ -0,0 +1,38 @@
+/* group */
+.btn-group,
+.btn-group.btn-group-horizontal {
+ .btn:not(:first-of-type):not(:last-of-type) {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .btn:first-of-type {
+ @apply -ml-px -mt-0;
+ border-top-left-radius: var(--rounded-btn, 0.5rem);
+ border-top-right-radius: 0;
+ border-bottom-left-radius: var(--rounded-btn, 0.5rem);
+ border-bottom-right-radius: 0;
+ }
+ .btn:last-of-type {
+ border-top-left-radius: 0;
+ border-top-right-radius: var(--rounded-btn, 0.5rem);
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: var(--rounded-btn, 0.5rem);
+ }
+}
+.btn-group.btn-group-vertical {
+ .btn:first-of-type {
+ @apply -ml-0 -mt-px;
+ border-top-left-radius: var(--rounded-btn, 0.5rem);
+ border-top-right-radius: var(--rounded-btn, 0.5rem);
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .btn:last-of-type {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-left-radius: var(--rounded-btn, 0.5rem);
+ border-bottom-right-radius: var(--rounded-btn, 0.5rem);
+ }
+}
\ No newline at end of file
diff --git a/src/utilities/unstyled/button.css b/src/utilities/unstyled/button.css
index 2e1bf38595a..2727d065525 100644
--- a/src/utilities/unstyled/button.css
+++ b/src/utilities/unstyled/button.css
@@ -50,3 +50,11 @@
}
}
}
+
+/* group */
+.btn-group-horizontal {
+ @apply flex-row flex-wrap;
+}
+.btn-group-vertical {
+ @apply flex-col flex-nowrap;
+}