import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as i,o as p,c as e,r as b,H as s,w as n,l as a,a as o,k as y,Q as r}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const g={},d={class:"btn-group inline-flex rounded-md shadow-sm",role:"group"};function f(t,c){return p(),e("div",d,[b(t.$slots,"default")])}const u=i(g,[["render",f]]),_={class:"vp-raw"},w={__name:"FwbButtonGroupExample",setup(t){return(c,E)=>(p(),e("div",_,[s(a(u),null,{default:n(()=>[s(a(l),null,{default:n(()=>[o("Button Default")]),_:1}),s(a(l),{color:"purple"},{default:n(()=>[o(" Button Purple ")]),_:1}),s(a(l),{color:"alternative"},{default:n(()=>[o(" Button Alternative ")]),_:1}),s(a(l),{color:"red"},{default:n(()=>[o(" Button Red ")]),_:1})]),_:1})]))}},F={class:"vp-raw"},h=y("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[y("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"})],-1),B={__name:"FwbButtonGroupExampleIcon",setup(t){return(c,E)=>(p(),e("div",F,[s(a(u),null,{default:n(()=>[s(a(l),{outline:""},{default:n(()=>[o(" Button 1 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 2 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 3 ")]),_:1}),s(a(l),{outline:""},{suffix:n(()=>[h]),default:n(()=>[o(" Button 4 ")]),_:1})]),_:1})]))}},m=r('

Vue Button Group - Flowbite ​

Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line ​

TIP

Original reference: https://flowbite.com/docs/components/button-group/

The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.

Basic example ​

',6),v=r(`
vue
<template>
  <fwb-button-group>
    <fwb-button>Button Default</fwb-button>
    <fwb-button color="purple">Button Purple</fwb-button>
    <fwb-button color="alternative">Button Alternative</fwb-button>
    <fwb-button color="red">Button Red</fwb-button>
  </fwb-button-group>
</template>

<script setup>
import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
</script>
<template>
  <fwb-button-group>
    <fwb-button>Button Default</fwb-button>
    <fwb-button color="purple">Button Purple</fwb-button>
    <fwb-button color="alternative">Button Alternative</fwb-button>
    <fwb-button color="red">Button Red</fwb-button>
  </fwb-button-group>
</template>

<script setup>
import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
</script>

Buttons with icons ​

`,2),A=r(`
vue
<template>
  <fwb-button-group>
    <fwb-button outline>Button 1</fwb-button>
    <fwb-button outline>Button 2</fwb-button>
    <fwb-button outline>Button 3</fwb-button>
    <fwb-button outline>
      Button 4
      <template #suffix>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path clip-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" fill-rule="evenodd" />
        </svg>
      </template>
    </fwb-button>
  </fwb-button-group>
</template>

<script setup>
import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
</script>
<template>
  <fwb-button-group>
    <fwb-button outline>Button 1</fwb-button>
    <fwb-button outline>Button 2</fwb-button>
    <fwb-button outline>Button 3</fwb-button>
    <fwb-button outline>
      Button 4
      <template #suffix>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path clip-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" fill-rule="evenodd" />
        </svg>
      </template>
    </fwb-button>
  </fwb-button-group>
</template>

<script setup>
import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
</script>
`,1),P=JSON.parse('{"title":"Vue Button Group - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/button-group.md","filePath":"components/button-group.md"}'),q={name:"components/button-group.md"},S=Object.assign(q,{setup(t){return(c,E)=>(p(),e("div",null,[m,s(w),v,s(B),A]))}});export{P as __pageData,S as default};