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{o as e,c,H as s,w as n,a as o,l as a,d,h as F,k as t,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={class:"vp-raw flex flex-wrap gap-2"},b={__name:"FwbButtonExampleColor",setup(E){return(p,y)=>(e(),c("div",g,[s(a(l),{color:"default"},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"alternative"},{default:n(()=>[o(" Alternative ")]),_:1}),s(a(l),{color:"dark"},{default:n(()=>[o(" Dark ")]),_:1}),s(a(l),{color:"light"},{default:n(()=>[o(" Light ")]),_:1}),s(a(l),{color:"green"},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{color:"red"},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{color:"yellow"},{default:n(()=>[o(" Yellow ")]),_:1}),s(a(l),{color:"purple"},{default:n(()=>[o(" Purple ")]),_:1}),s(a(l),{color:"pink"},{default:n(()=>[o(" Pink ")]),_:1})]))}},w={class:"vp-raw flex flex-wrap gap-2"},q={__name:"FwbButtonExampleDisabled",setup(E){return(p,y)=>(e(),c("div",w,[s(a(l),{color:"default",disabled:""},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"default",outline:"",disabled:""},{default:n(()=>[o(" Default outline ")]),_:1}),s(a(l),{gradient:"red",disabled:""},{default:n(()=>[o(" Red gradient ")]),_:1}),s(a(l),{gradient:"red-yellow",disabled:""},{default:n(()=>[o(" Red to yellow gradient ")]),_:1}),s(a(l),{gradient:"red-yellow",outline:"",disabled:""},{default:n(()=>[o(" Red to yellow outline ")]),_:1})]))}},f={class:"vp-raw flex flex-wrap gap-2"},C={__name:"FwbButtonExampleGradientDuotone",setup(E){return(p,y)=>(e(),c("div",f,[s(a(l),{gradient:"purple-blue"},{default:n(()=>[o(" Purple to blue ")]),_:1}),s(a(l),{gradient:"cyan-blue"},{default:n(()=>[o(" Cyan to blue ")]),_:1}),s(a(l),{gradient:"green-blue"},{default:n(()=>[o(" Green to blue ")]),_:1}),s(a(l),{gradient:"purple-pink"},{default:n(()=>[o(" Purple to pink ")]),_:1}),s(a(l),{gradient:"pink-orange"},{default:n(()=>[o(" Pink to orange ")]),_:1}),s(a(l),{gradient:"teal-lime"},{default:n(()=>[o(" Teal to lime ")]),_:1}),s(a(l),{gradient:"red-yellow"},{default:n(()=>[o(" Red to yellow ")]),_:1})]))}},B={class:"vp-raw flex flex-wrap gap-2"},h={__name:"FwbButtonExampleGradientMonochrome",setup(E){return(p,y)=>(e(),c("div",B,[s(a(l),{gradient:"blue"},{default:n(()=>[o(" Blue ")]),_:1}),s(a(l),{gradient:"cyan"},{default:n(()=>[o(" Cyan ")]),_:1}),s(a(l),{gradient:"green"},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{gradient:"lime"},{default:n(()=>[o(" Lime ")]),_:1}),s(a(l),{gradient:"pink"},{default:n(()=>[o(" Pink ")]),_:1}),s(a(l),{gradient:"purple"},{default:n(()=>[o(" Purple ")]),_:1}),s(a(l),{gradient:"red"},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{gradient:"teal"},{default:n(()=>[o(" Teal ")]),_:1})]))}},_={class:"vp-raw flex flex-wrap gap-2"},m={__name:"FwbButtonExampleLink",setup(E){return(p,y)=>(e(),c("div",_,[s(a(l),{href:"https://google.com",target:"_blank"},{default:n(()=>[o(" Google.com ")]),_:1})]))}},v={class:"vp-raw flex flex-wrap items-center gap-2"},A=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("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"})],-1),D=d({__name:"FwbButtonExampleLoading",setup(E){const p=F(!1);return(y,u)=>(e(),c("div",v,[s(a(l),{disabled:p.value,loading:p.value,gradient:"purple-blue",outline:"",size:"xs",onClick:u[0]||(u[0]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["disabled","loading"]),s(a(l),{loading:p.value,gradient:"red-yellow",size:"sm",onClick:u[1]||(u[1]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["loading"]),s(a(l),{loading:p.value,color:"default","loading-position":"suffix",outline:"",onClick:u[2]||(u[2]=i=>p.value=!p.value)},{suffix:n(()=>[A]),default:n(()=>[o(" Click me ")]),_:1},8,["loading"]),s(a(l),{loading:p.value,gradient:"green-blue",size:"lg",onClick:u[3]||(u[3]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["loading"]),s(a(l),{loading:p.value,gradient:"pink",size:"xl",onClick:u[4]||(u[4]=i=>p.value=!p.value)},{default:n(()=>[o(" Click me ")]),_:1},8,["loading"])]))}}),k={class:"vp-raw flex flex-wrap gap-2"},x={__name:"FwbButtonExampleOutline",setup(E){return(p,y)=>(e(),c("div",k,[s(a(l),{color:"default",outline:""},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"dark",outline:""},{default:n(()=>[o(" Dark ")]),_:1}),s(a(l),{color:"green",outline:""},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{color:"red",outline:""},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{color:"yellow",outline:""},{default:n(()=>[o(" Yellow ")]),_:1}),s(a(l),{color:"purple",outline:""},{default:n(()=>[o(" Purple ")]),_:1})]))}},P={class:"vp-raw flex flex-wrap gap-2"},T={__name:"FwbButtonExampleOutlineGradient",setup(E){return(p,y)=>(e(),c("div",P,[s(a(l),{gradient:"purple-blue",outline:""},{default:n(()=>[o(" Purple to blue ")]),_:1}),s(a(l),{gradient:"cyan-blue",outline:""},{default:n(()=>[o(" Cyan to blue ")]),_:1}),s(a(l),{gradient:"green-blue",outline:""},{default:n(()=>[o(" Green to blue ")]),_:1}),s(a(l),{gradient:"purple-pink",outline:""},{default:n(()=>[o(" Purple to pink ")]),_:1}),s(a(l),{gradient:"pink-orange",outline:""},{default:n(()=>[o(" Pink to orange ")]),_:1}),s(a(l),{gradient:"teal-lime",outline:""},{default:n(()=>[o(" Teal to lime ")]),_:1}),s(a(l),{gradient:"red-yellow",outline:""},{default:n(()=>[o(" Red to yellow ")]),_:1})]))}},S={class:"vp-raw flex flex-wrap gap-2"},z={__name:"FwbButtonExamplePill",setup(E){return(p,y)=>(e(),c("div",S,[s(a(l),{color:"default",pill:""},{default:n(()=>[o(" Default ")]),_:1}),s(a(l),{color:"alternative",pill:""},{default:n(()=>[o(" Alternative ")]),_:1}),s(a(l),{color:"dark",pill:""},{default:n(()=>[o(" Dark ")]),_:1}),s(a(l),{color:"light",pill:""},{default:n(()=>[o(" Light ")]),_:1}),s(a(l),{color:"green",pill:""},{default:n(()=>[o(" Green ")]),_:1}),s(a(l),{color:"red",pill:""},{default:n(()=>[o(" Red ")]),_:1}),s(a(l),{color:"yellow",pill:""},{default:n(()=>[o(" Yellow ")]),_:1}),s(a(l),{color:"purple",pill:""},{default:n(()=>[o(" Purple ")]),_:1})]))}},L={class:"vp-raw flex flex-wrap gap-2"},R={__name:"FwbButtonExampleShadow",setup(E){return(p,y)=>(e(),c("div",L,[s(a(l),{gradient:"blue",shadow:""},{default:n(()=>[o(" Blue with blue ")]),_:1}),s(a(l),{gradient:"cyan",shadow:""},{default:n(()=>[o(" Cyan with cyan ")]),_:1}),s(a(l),{gradient:"green",shadow:""},{default:n(()=>[o(" Green with green ")]),_:1}),s(a(l),{gradient:"lime",shadow:""},{default:n(()=>[o(" Lime with lime ")]),_:1}),s(a(l),{gradient:"pink",shadow:""},{default:n(()=>[o(" Pink with pink ")]),_:1}),s(a(l),{gradient:"purple",shadow:""},{default:n(()=>[o(" Purple with purple ")]),_:1}),s(a(l),{gradient:"red",shadow:""},{default:n(()=>[o(" Red with red ")]),_:1}),s(a(l),{gradient:"teal",shadow:""},{default:n(()=>[o(" Teal with teal ")]),_:1}),s(a(l),{gradient:"blue",shadow:"red"},{default:n(()=>[o(" Blue with red ")]),_:1}),s(a(l),{gradient:"cyan",shadow:"teal"},{default:n(()=>[o(" Cyan with teal ")]),_:1}),s(a(l),{gradient:"teal",shadow:"purple"},{default:n(()=>[o(" Teal with purple ")]),_:1})]))}},H={class:"vp-raw flex flex-wrap gap-2 items-center"},$={__name:"FwbButtonExampleSize",setup(E){return(p,y)=>(e(),c("div",H,[s(a(l),{size:"xs"},{default:n(()=>[o(" Extra Small - xs ")]),_:1}),s(a(l),{size:"sm"},{default:n(()=>[o(" Small - sm ")]),_:1}),s(a(l),{size:"md"},{default:n(()=>[o(" Medium - md ")]),_:1}),s(a(l),{size:"lg"},{default:n(()=>[o(" Large - lg ")]),_:1}),s(a(l),{size:"xl"},{default:n(()=>[o(" Extra Large - xl ")]),_:1})]))}},M={class:"vp-raw flex flex-wrap gap-2"},V=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("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"})],-1),I=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("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"})],-1),G=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("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"})],-1),N={__name:"FwbButtonExampleSlot",setup(E){return(p,y)=>(e(),c("div",M,[s(a(l),{gradient:"purple-blue",square:""},{default:n(()=>[V]),_:1}),s(a(l),{color:"default",pill:"",square:""},{default:n(()=>[I]),_:1}),s(a(l),{gradient:"green-blue",square:""},{default:n(()=>[o(" Close something ")]),_:1}),s(a(l),{color:"default",outline:"",pill:"",square:""},{suffix:n(()=>[G]),default:n(()=>[o(" Open something ")]),_:1})]))}},Y={class:"vp-raw"},O=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("path",{d:"M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"})],-1),Q={__name:"FwbButtonExampleSlotPrefix",setup(E){return(p,y)=>(e(),c("div",Y,[s(a(l),null,{prefix:n(()=>[O]),default:n(()=>[o(" Buy ")]),_:1})]))}},U={class:"vp-raw"},j=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("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"})],-1),J={__name:"FwbButtonExampleSlotSuffix",setup(E){return(p,y)=>(e(),c("div",U,[s(a(l),null,{suffix:n(()=>[j]),default:n(()=>[o(" Choose plan ")]),_:1})]))}},K={class:"vp-raw flex flex-wrap gap-2"},W=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("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"})],-1),X=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("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"})],-1),Z=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("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"})],-1),ss=t("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[t("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),ns={__name:"FwbButtonExampleSquare",setup(E){return(p,y)=>(e(),c("div",K,[s(a(l),{gradient:"red-yellow",square:""},{default:n(()=>[W]),_:1}),s(a(l),{color:"default",pill:"",square:""},{default:n(()=>[X]),_:1}),s(a(l),{color:"dark",outline:"",square:""},{default:n(()=>[Z]),_:1}),s(a(l),{color:"yellow",outline:"",pill:"",square:""},{default:n(()=>[ss]),_:1})]))}},ls=r('

Vue Button - Flowbite

TIP

Original reference: https://flowbite.com/docs/components/buttons/

The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.

Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.

Prop - color

',7),as=r(`

vue

<template>
  <fwb-button color="default">Default</fwb-button>
  <fwb-button color="alternative">Alternative</fwb-button>
  <fwb-button color="dark">Dark</fwb-button>
  <fwb-button color="light">Light</fwb-button>
  <fwb-button color="green">Green</fwb-button>
  <fwb-button color="red">Red</fwb-button>
  <fwb-button color="yellow">Yellow</fwb-button>
  <fwb-button color="purple">Purple</fwb-button>
  <fwb-button color="pink">Pink</fwb-button>
</template>

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

<template>
  <fwb-button color="default">Default</fwb-button>
  <fwb-button color="alternative">Alternative</fwb-button>
  <fwb-button color="dark">Dark</fwb-button>
  <fwb-button color="light">Light</fwb-button>
  <fwb-button color="green">Green</fwb-button>
  <fwb-button color="red">Red</fwb-button>
  <fwb-button color="yellow">Yellow</fwb-button>
  <fwb-button color="purple">Purple</fwb-button>
  <fwb-button color="pink">Pink</fwb-button>
</template>

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

Prop - size

`,2),os=r(`

vue

<template>
  <fwb-button size="xs">Extra Small - xs</fwb-button>
  <fwb-button size="sm">Small - sm</fwb-button>
  <fwb-button size="md">Medium - md</fwb-button>
  <fwb-button size="lg">Large - lg</fwb-button>
  <fwb-button size="xl">Extra Large - xl</fwb-button>
</template>

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

<template>
  <fwb-button size="xs">Extra Small - xs</fwb-button>
  <fwb-button size="sm">Small - sm</fwb-button>
  <fwb-button size="md">Medium - md</fwb-button>
  <fwb-button size="lg">Large - lg</fwb-button>
  <fwb-button size="xl">Extra Large - xl</fwb-button>
</template>

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

Prop - pill

`,2),ps=r(`

vue

<template>
  <fwb-button color="default" pill>Default</fwb-button>
  <fwb-button color="alternative" pill>Alternative</fwb-button>
  <fwb-button color="dark" pill>Dark</fwb-button>
  <fwb-button color="light" pill>Light</fwb-button>
  <fwb-button color="green" pill>Green</fwb-button>
  <fwb-button color="red" pill>Red</fwb-button>
  <fwb-button color="yellow" pill>Yellow</fwb-button>
  <fwb-button color="purple" pill>Purple</fwb-button>
</template>

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

<template>
  <fwb-button color="default" pill>Default</fwb-button>
  <fwb-button color="alternative" pill>Alternative</fwb-button>
  <fwb-button color="dark" pill>Dark</fwb-button>
  <fwb-button color="light" pill>Light</fwb-button>
  <fwb-button color="green" pill>Green</fwb-button>
  <fwb-button color="red" pill>Red</fwb-button>
  <fwb-button color="yellow" pill>Yellow</fwb-button>
  <fwb-button color="purple" pill>Purple</fwb-button>
</template>

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

Prop - gradient (monochrome)

`,2),ts=r(`

vue

<template>
  <fwb-button gradient="blue">Blue</fwb-button>
  <fwb-button gradient="cyan">Cyan</fwb-button>
  <fwb-button gradient="green">Green</fwb-button>
  <fwb-button gradient="lime">Lime</fwb-button>
  <fwb-button gradient="pink">Pink</fwb-button>
  <fwb-button gradient="purple">Purple</fwb-button>
  <fwb-button gradient="red">Red</fwb-button>
  <fwb-button gradient="teal">Teal</fwb-button>
</template>

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

<template>
  <fwb-button gradient="blue">Blue</fwb-button>
  <fwb-button gradient="cyan">Cyan</fwb-button>
  <fwb-button gradient="green">Green</fwb-button>
  <fwb-button gradient="lime">Lime</fwb-button>
  <fwb-button gradient="pink">Pink</fwb-button>
  <fwb-button gradient="purple">Purple</fwb-button>
  <fwb-button gradient="red">Red</fwb-button>
  <fwb-button gradient="teal">Teal</fwb-button>
</template>

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

Prop - gradient (duotone)

`,2),es=r(`

vue

<template>
  <fwb-button gradient="purple-blue">Purple to blue</fwb-button>
  <fwb-button gradient="cyan-blue">Cyan to blue</fwb-button>
  <fwb-button gradient="green-blue">Green to blue</fwb-button>
  <fwb-button gradient="purple-pink">Purple to pink</fwb-button>
  <fwb-button gradient="pink-orange">Pink to orange</fwb-button>
  <fwb-button gradient="teal-lime">Teal to lime</fwb-button>
  <fwb-button gradient="red-yellow">Red to yellow</fwb-button>
</template>

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

<template>
  <fwb-button gradient="purple-blue">Purple to blue</fwb-button>
  <fwb-button gradient="cyan-blue">Cyan to blue</fwb-button>
  <fwb-button gradient="green-blue">Green to blue</fwb-button>
  <fwb-button gradient="purple-pink">Purple to pink</fwb-button>
  <fwb-button gradient="pink-orange">Pink to orange</fwb-button>
  <fwb-button gradient="teal-lime">Teal to lime</fwb-button>
  <fwb-button gradient="red-yellow">Red to yellow</fwb-button>
</template>

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

Prop - outline

`,2),cs=r(`

vue

<template>
  <fwb-button color="default" outline>Default</fwb-button>
  <fwb-button color="dark" outline>Dark</fwb-button>
  <fwb-button color="green" outline>Green</fwb-button>
  <fwb-button color="red" outline>Red</fwb-button>
  <fwb-button color="yellow" outline>Yellow</fwb-button>
  <fwb-button color="purple" outline>Purple</fwb-button>
</template>

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

<template>
  <fwb-button color="default" outline>Default</fwb-button>
  <fwb-button color="dark" outline>Dark</fwb-button>
  <fwb-button color="green" outline>Green</fwb-button>
  <fwb-button color="red" outline>Red</fwb-button>
  <fwb-button color="yellow" outline>Yellow</fwb-button>
  <fwb-button color="purple" outline>Purple</fwb-button>
</template>

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

Prop - outline (gradient)

`,2),rs=r(`

vue

<template>
  <fwb-button gradient="purple-blue" outline>Purple to blue</fwb-button>
  <fwb-button gradient="cyan-blue" outline>Cyan to blue</fwb-button>
  <fwb-button gradient="green-blue" outline>Green to blue</fwb-button>
  <fwb-button gradient="purple-pink" outline>Purple to pink</fwb-button>
  <fwb-button gradient="pink-orange" outline>Pink to orange</fwb-button>
  <fwb-button gradient="teal-lime" outline>Teal to lime</fwb-button>
  <fwb-button gradient="red-yellow" outline>Red to yellow</fwb-button>
</template>

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

<template>
  <fwb-button gradient="purple-blue" outline>Purple to blue</fwb-button>
  <fwb-button gradient="cyan-blue" outline>Cyan to blue</fwb-button>
  <fwb-button gradient="green-blue" outline>Green to blue</fwb-button>
  <fwb-button gradient="purple-pink" outline>Purple to pink</fwb-button>
  <fwb-button gradient="pink-orange" outline>Pink to orange</fwb-button>
  <fwb-button gradient="teal-lime" outline>Teal to lime</fwb-button>
  <fwb-button gradient="red-yellow" outline>Red to yellow</fwb-button>
</template>

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

Prop - shadow

`,2),Es=r(`

vue

<template>
  <fwb-button gradient="blue" shadow>Blue with blue</fwb-button>
  <fwb-button gradient="cyan" shadow>Cyan with cyan</fwb-button>
  <fwb-button gradient="green" shadow>Green with green</fwb-button>
  <fwb-button gradient="lime" shadow>Lime with lime</fwb-button>
  <fwb-button gradient="pink" shadow>Pink with pink</fwb-button>
  <fwb-button gradient="purple" shadow>Purple with purple</fwb-button>
  <fwb-button gradient="red" shadow>Red with red</fwb-button>
  <fwb-button gradient="teal" shadow>Teal with teal</fwb-button>
  <fwb-button gradient="blue" shadow="red">Blue with red</fwb-button>
  <fwb-button gradient="cyan" shadow="teal">Cyan with teal</fwb-button>
  <fwb-button gradient="teal" shadow="purple">Teal with purple</fwb-button>
</template>

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

<template>
  <fwb-button gradient="blue" shadow>Blue with blue</fwb-button>
  <fwb-button gradient="cyan" shadow>Cyan with cyan</fwb-button>
  <fwb-button gradient="green" shadow>Green with green</fwb-button>
  <fwb-button gradient="lime" shadow>Lime with lime</fwb-button>
  <fwb-button gradient="pink" shadow>Pink with pink</fwb-button>
  <fwb-button gradient="purple" shadow>Purple with purple</fwb-button>
  <fwb-button gradient="red" shadow>Red with red</fwb-button>
  <fwb-button gradient="teal" shadow>Teal with teal</fwb-button>
  <fwb-button gradient="blue" shadow="red">Blue with red</fwb-button>
  <fwb-button gradient="cyan" shadow="teal">Cyan with teal</fwb-button>
  <fwb-button gradient="teal" shadow="purple">Teal with purple</fwb-button>
</template>

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

Prop - square

`,2),ys=r(`

vue

<template>
  <fwb-button gradient="red-yellow" square>
    <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>
  </fwb-button>
  <fwb-button color="default" pill square>
    <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>
  </fwb-button>
  <fwb-button color="dark" outline square>
    <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>
  </fwb-button>
  <fwb-button color="yellow" outline pill square>
    <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" />
    </svg>
  </fwb-button>
</template>

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

<template>
  <fwb-button gradient="red-yellow" square>
    <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>
  </fwb-button>
  <fwb-button color="default" pill square>
    <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>
  </fwb-button>
  <fwb-button color="dark" outline square>
    <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>
  </fwb-button>
  <fwb-button color="yellow" outline pill square>
    <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" />
    </svg>
  </fwb-button>
</template>

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

Prop - loading

`,2),us=r(`

vue

<template>
  <fwb-button :disabled="loading" :loading="loading" gradient="purple-blue" outline size="xs" @click="loading = !loading">
    Click me
  </fwb-button>
  <fwb-button :loading="loading" gradient="red-yellow" size="sm" @click="loading = !loading">
    Click me
  </fwb-button>
  <fwb-button :loading="loading" color="default" loading-position="suffix" outline @click="loading = !loading">
    Click me
    <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 :loading="loading" gradient="green-blue" size="lg" @click="loading = !loading">
    Click me
  </fwb-button>
  <fwb-button :loading="loading" gradient="pink" size="xl" @click="loading = !loading">
    Click me
  </fwb-button>
</template>

<script setup>
import { ref } from 'vue'
import { FwbButton } from 'flowbite-vue'

const loading = ref(false)
</script>

<template>
  <fwb-button :disabled="loading" :loading="loading" gradient="purple-blue" outline size="xs" @click="loading = !loading">
    Click me
  </fwb-button>
  <fwb-button :loading="loading" gradient="red-yellow" size="sm" @click="loading = !loading">
    Click me
  </fwb-button>
  <fwb-button :loading="loading" color="default" loading-position="suffix" outline @click="loading = !loading">
    Click me
    <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 :loading="loading" gradient="green-blue" size="lg" @click="loading = !loading">
    Click me
  </fwb-button>
  <fwb-button :loading="loading" gradient="pink" size="xl" @click="loading = !loading">
    Click me
  </fwb-button>
</template>

<script setup>
import { ref } from 'vue'
import { FwbButton } from 'flowbite-vue'

const loading = ref(false)
</script>

Prop - disabled

`,2),is=r(`

vue

<template>
  <fwb-button color="default" disabled>Default</fwb-button>
  <fwb-button color="default" outline disabled>Default outline</fwb-button>
  <fwb-button gradient="red" disabled>Red gradient</fwb-button>
  <fwb-button gradient="red-yellow" disabled>Red to yellow gradient</fwb-button>
  <fwb-button gradient="red-yellow" outline disabled>Red to yellow outline</fwb-button>
</template>

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

<template>
  <fwb-button color="default" disabled>Default</fwb-button>
  <fwb-button color="default" outline disabled>Default outline</fwb-button>
  <fwb-button gradient="red" disabled>Red gradient</fwb-button>
  <fwb-button gradient="red-yellow" disabled>Red to yellow gradient</fwb-button>
  <fwb-button gradient="red-yellow" outline disabled>Red to yellow outline</fwb-button>
</template>

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

Prop - href

You can add a link to a Button component. Additionally you can add tag prop to change button component to router-link

`,3),ds=r(`

vue

<template>
  <fwb-button href="https://google.com" target="_blank">Google.com</fwb-button>
  <fwb-button href="/pages/getting-started" tag="router-link">Quickstart</fwb-button>
</template>

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

<template>
  <fwb-button href="https://google.com" target="_blank">Google.com</fwb-button>
  <fwb-button href="/pages/getting-started" tag="router-link">Quickstart</fwb-button>
</template>

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

Slot - default

`,2),Fs=r(`

vue

<template>
  <fwb-button gradient="purple-blue" square>
    <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>
  </fwb-button>
  <fwb-button color="default" pill square>
    <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>
  </fwb-button>
  <fwb-button gradient="green-blue" square>
    Close something
  </fwb-button>
  <fwb-button color="default" outline pill square>
    Open something
    <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>
</template>

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

<template>
  <fwb-button gradient="purple-blue" square>
    <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>
  </fwb-button>
  <fwb-button color="default" pill square>
    <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>
  </fwb-button>
  <fwb-button gradient="green-blue" square>
    Close something
  </fwb-button>
  <fwb-button color="default" outline pill square>
    Open something
    <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>
</template>

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

Slot - prefix

`,2),gs=r(`

vue

<template>
  <fwb-button>
    <template #prefix>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
      </svg>
    </template>
    Buy
  </fwb-button>
</template>

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

<template>
  <fwb-button>
    <template #prefix>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
      </svg>
    </template>
    Buy
  </fwb-button>
</template>

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

Slot - suffix

`,2),bs=r(`

vue

<template>
  <fwb-button>
    Choose plan
    <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>
</template>

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

<template>
  <fwb-button>
    Choose plan
    <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>
</template>

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

Button API

Props

Name	Type	Values	Default
color	String	`default`, `alternative`, `dark`, `light`, `green`, `red`, `yellow`, `purple`, `pink`, `blue`	`default`
disabled	Boolean		`false`
gradient	String	monochrome: `blue`, `green`, `cyan`, `teal`, `lime`, `red`, `pink`, `purple` duotone: `purple-blue`, `cyan-blue`, `green-blue`, `purple-pink`, `pink-orange`, `teal-lime`, `red-yellow`	`null`
href	String		`''`
loading	Boolean		`false`
loading-position	String	`prefix`, `suffix`	`prefix`
outline	Boolean		`false`
pill	Boolean		`false`
shadow	String	`blue`, `green`, `cyan`, `teal`, `lime`, `red`, `pink`, `purple`	`null`
size	String	`xs`, `sm`, `md`, `lg`, `xl`	`md`
square	Boolean		`false`
tag	String		`a`

`,5),_s=JSON.parse('{"title":"Vue Button - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/button.md","filePath":"components/button.md"}'),ws={name:"components/button.md"},ms=Object.assign(ws,{setup(E){return(p,y)=>(e(),c("div",null,[ls,s(b),as,s($),os,s(z),ps,s(h),ts,s(C),es,s(x),cs,s(T),rs,s(R),Es,s(ns),ys,s(D),us,s(q),is,s(m),ds,s(N),Fs,s(Q),gs,s(J),bs]))}});export{_s as __pageData,ms as default};

Vue Button - Flowbite ​

Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows ​

Prop - color ​

Prop - size ​

Prop - pill ​

Prop - gradient (monochrome) ​

Prop - gradient (duotone) ​

Prop - outline ​

Prop - outline (gradient) ​

Prop - shadow ​

Prop - square ​

Prop - loading ​

Prop - disabled ​

Prop - href ​

Slot - default ​

Slot - prefix ​

Slot - suffix ​

Button API ​

Props ​