feat: button group

docs/.vitepress/config.ts

@@ -17,6 +17,7 @@ function buildSidebar() {
 function getComponents() {
   return [
     { text: 'Button', link: '/guide/button/button.md' },
+    { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
     { text: 'Spinner', link: '/guide/spinner/spinner.md' },
   ]
 }

docs/guide/buttonGroup/buttonGroup.md

@@ -0,0 +1,49 @@
+<script setup>
+import ButtonGroupBasicExample from './examples/ButtonGroupBasicExample.vue';
+import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
+</script>
+
+# Button Group
+
+reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/)
+
+## Basic example
+
+<ButtonGroupBasicExample />
+
+```vue
+<script setup>
+import { ButtonGroup, Button } from 'flowbite-vue'
+</script>
+<template>
+  <button-group>
+    <Button>hello world</Button>
+    <Button color="purple">hello world</Button>
+    <Button color="alternative">hello world</Button>
+    <Button color="red">hello world</Button>
+  </button-group>
+</template>
+```
+
+## Buttons with icons
+
+<ButtonGroupIconExample />
+
+```vue
+<script setup>
+import { ButtonGroup, Button } from 'flowbite-vue'
+</script>
+<template>
+  <button-group>
+    <Button outline>Button1</Button>
+    <Button outline>Button2</Button>
+    <Button outline>Button3</Button>
+    <Button outline>
+      hello world
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </template>
+    </Button>
+  </button-group>
+</template>
+```

docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue

@@ -0,0 +1,11 @@
+<template>
+  <button-group>
+    <Button>hello world</Button>
+    <Button color="purple">hello world</Button>
+    <Button color="alternative">hello world</Button>
+    <Button color="red">hello world</Button>
+  </button-group>
+</template>
+<script setup>
+import { ButtonGroup, Button } from '../../../../src/index'
+</script>

docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue

@@ -0,0 +1,16 @@
+<template>
+  <button-group>
+    <Button outline>Button1</Button>
+    <Button outline>Button2</Button>
+    <Button outline>Button3</Button>
+    <Button outline>
+      hello world
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </template>
+    </Button>
+  </button-group>
+</template>
+<script setup>
+import { ButtonGroup, Button } from '../../../../src/index'
+</script>

src/components/ButtonGroup/ButtonGroup.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="btn-group inline-flex rounded-md shadow-sm" role="group">
+   <slot />
+  </div>
+</template>
+<!-- TODO: maybe use provide/inject to control styles -->
+<style>
+@tailwind components;
+
+@layer components {
+  .btn-group > button {
+    @apply rounded-none
+  }
+  .btn-group > button:first-child {
+    @apply rounded-l-lg
+  }
+  .btn-group > button:last-child {
+    @apply rounded-r-lg
+  }
+}
+</style>

src/index.ts

@@ -1,2 +1,3 @@
 export { default as Button } from './components/Button/Button.vue'
 export { default as Spinner } from './components/Spinner/Spinner.vue'
+export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'