import{t as q}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{Z as w,g as u,d as f,Y as m,o as r,b as h,w as a,r as g,n as C,l as n,I as B,c as E,H as s,a as o,k as e,Q as y}from"./chunks/framework.3f630664.js";const _="mr-2 px-2.5 py-0.5 rounded flex items-center justify-center",v="bg-blue-100 hover:bg-blue-200 text-blue-800 dark:text-blue-800 dark:hover:bg-blue-300",D="p-1 rounded-full mr-2",A={default:"text-blue-800 dark:text-blue-800",dark:"text-gray-800 dark:bg-gray-700",red:"text-red-800 dark:text-red-900",green:"text-green-800 dark:text-green-900",yellow:"text-yellow-800 dark:text-yellow-900",indigo:"text-indigo-800 dark:text-indigo-900",purple:"text-purple-800 dark:text-purple-900",pink:"text-pink-800 dark:text-pink-900"},k={default:"bg-blue-100 dark:bg-blue-200",dark:"bg-gray-100 dark:bg-gray-700",red:"bg-red-100 dark:bg-red-200",green:"bg-green-100 dark:bg-green-200",yellow:"bg-yellow-100 dark:bg-yellow-200",indigo:"bg-indigo-100 dark:bg-indigo-200",purple:"bg-purple-100 dark:bg-purple-200",pink:"bg-pink-100 dark:bg-pink-200"},x={xs:"text-xs font-semibold",sm:"text-sm font-medium"};function z(p,t){const c=w();return{badgeClasses:u(()=>q(x[p.size],p.href?"":k[p.type],p.href?"":A[p.type],p.href?v:"",t.isContentEmpty.value?D:_,c.class))}}const l=f({__name:"FwbBadge",props:{type:{default:"default"},size:{default:"xs"},href:{default:null}},setup(p){const t=p,c=m(),d=u(()=>!c.default),F=u(()=>t.href?"a":"span"),{badgeClasses:b}=z(t,{isContentEmpty:d});return(i,ss)=>(r(),h(B(F.value),{class:C(n(b)),href:i.href},{default:a(()=>[g(i.$slots,"icon"),g(i.$slots,"default")]),_:3},8,["class","href"]))}}),T={class:"vp-raw flex"},P={__name:"FwbBadgeExample",setup(p){return(t,c)=>(r(),E("div",T,[s(n(l),null,{default:a(()=>[o(" Default ")]),_:1}),s(n(l),{type:"dark"},{default:a(()=>[o(" Dark ")]),_:1}),s(n(l),{type:"red"},{default:a(()=>[o(" Red ")]),_:1}),s(n(l),{type:"green"},{default:a(()=>[o(" Green ")]),_:1}),s(n(l),{type:"yellow"},{default:a(()=>[o(" Yellow ")]),_:1}),s(n(l),{type:"indigo"},{default:a(()=>[o(" Indigo ")]),_:1}),s(n(l),{type:"purple"},{default:a(()=>[o(" Purple ")]),_:1}),s(n(l),{type:"pink"},{default:a(()=>[o(" Pink ")]),_:1})]))}},V={class:"vp-raw flex items-end"},S={__name:"FwbBadgeExampleSize",setup(p){return(t,c)=>(r(),E("div",V,[s(n(l),{size:"xs"},{default:a(()=>[o(" Default ")]),_:1}),s(n(l),{size:"xs",type:"dark"},{default:a(()=>[o(" Dark ")]),_:1}),s(n(l),{size:"xs",type:"red"},{default:a(()=>[o(" Red ")]),_:1}),s(n(l),{size:"xs",type:"green"},{default:a(()=>[o(" Green ")]),_:1}),s(n(l),{size:"sm",type:"yellow"},{default:a(()=>[o(" Yellow ")]),_:1}),s(n(l),{size:"sm",type:"indigo"},{default:a(()=>[o(" Indigo ")]),_:1}),s(n(l),{size:"sm",type:"purple"},{default:a(()=>[o(" Purple ")]),_:1}),s(n(l),{size:"sm",type:"pink"},{default:a(()=>[o(" Pink ")]),_:1})]))}},L={class:"vp-raw flex items-end"},I={__name:"FwbBadgeExampleLink",setup(p){return(t,c)=>(r(),E("div",L,[s(n(l),{href:"#"},{default:a(()=>[o(" Link ")]),_:1}),s(n(l),{href:"#",size:"sm"},{default:a(()=>[o(" Link small ")]),_:1})]))}},M={class:"vp-raw flex items-end"},$=e("svg",{"aria-hidden":"true",class:"mr-1 w-3 h-3",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),R=e("svg",{"aria-hidden":"true",class:"mr-1 w-3 h-3",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),N={__name:"FwbBadgeExampleIcon",setup(p){return(t,c)=>(r(),E("div",M,[s(n(l),null,{icon:a(()=>[$]),default:a(()=>[o(" Default ")]),_:1}),s(n(l),{size:"sm",type:"dark"},{icon:a(()=>[R]),default:a(()=>[o(" Dark ")]),_:1})]))}},Y={class:"vp-raw flex items-end"},G=e("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),O=e("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),j=e("svg",{"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z","fill-rule":"evenodd"})],-1),U={__name:"FwbBadgeExampleIconOnly",setup(p){return(t,c)=>(r(),E("div",Y,[s(n(l),null,{icon:a(()=>[G]),_:1}),s(n(l),{type:"dark"},{icon:a(()=>[O]),_:1}),s(n(l),{size:"sm",type:"green"},{icon:a(()=>[j]),_:1})]))}},H=y('

Vue Badge - Flowbite ​

Use Tailwind CSS badges as elements to show counts or labels separately or inside other components ​

TIP

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

The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made. Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a span element.

Default badge ​

Prop – type

',7),J=y(`
vue
<template>
  <fwb-badge>Default</fwb-badge>
  <fwb-badge type="dark">Dark</fwb-badge>
  <fwb-badge type="red">Red</fwb-badge>
  <fwb-badge type="green">Green</fwb-badge>
  <fwb-badge type="yellow">Yellow</fwb-badge>
  <fwb-badge type="indigo">Indigo</fwb-badge>
  <fwb-badge type="purple">Purple</fwb-badge>
  <fwb-badge type="pink">Pink</fwb-badge>
</template>

<script setup>
import { FwbBadge } from 'flowbite-vue'
</script>
<template>
  <fwb-badge>Default</fwb-badge>
  <fwb-badge type="dark">Dark</fwb-badge>
  <fwb-badge type="red">Red</fwb-badge>
  <fwb-badge type="green">Green</fwb-badge>
  <fwb-badge type="yellow">Yellow</fwb-badge>
  <fwb-badge type="indigo">Indigo</fwb-badge>
  <fwb-badge type="purple">Purple</fwb-badge>
  <fwb-badge type="pink">Pink</fwb-badge>
</template>

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

Large badges ​

Prop – size

`,3),Q=y(`
vue
<template>
  <fwb-badge size="xs">Default</fwb-badge>
  <fwb-badge size="xs" type="dark">Dark</fwb-badge>
  <fwb-badge size="xs" type="red">Red</fwb-badge>
  <fwb-badge size="xs" type="green">Green</fwb-badge>
  <fwb-badge size="sm" type="yellow">Yellow</fwb-badge>
  <fwb-badge size="sm" type="indigo">Indigo</fwb-badge>
  <fwb-badge size="sm" type="purple">Purple</fwb-badge>
  <fwb-badge size="sm" type="pink">Pink</fwb-badge>
</template>

<script setup>
import { FwbBadge } from 'flowbite-vue'
</script>
<template>
  <fwb-badge size="xs">Default</fwb-badge>
  <fwb-badge size="xs" type="dark">Dark</fwb-badge>
  <fwb-badge size="xs" type="red">Red</fwb-badge>
  <fwb-badge size="xs" type="green">Green</fwb-badge>
  <fwb-badge size="sm" type="yellow">Yellow</fwb-badge>
  <fwb-badge size="sm" type="indigo">Indigo</fwb-badge>
  <fwb-badge size="sm" type="purple">Purple</fwb-badge>
  <fwb-badge size="sm" type="pink">Pink</fwb-badge>
</template>

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

You can also use badges as anchor elements to link to another page. Prop – href

`,3),Z=y(`
vue
<template>
  <fwb-badge href="#">
    Link
  </fwb-badge>
  <fwb-badge href="#" size="sm">
    Link small
  </fwb-badge>
</template>

<script setup>
import { FwbBadge } from 'flowbite-vue'
</script>
<template>
  <fwb-badge href="#">
    Link
  </fwb-badge>
  <fwb-badge href="#" size="sm">
    Link small
  </fwb-badge>
</template>

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

Badges with icon ​

You can also use SVG icons inside the badge elements. slot icon

`,3),K=y(`
vue
<template>
  <fwb-badge>
    <template #icon>
      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
      </svg>
    </template>
    Default
  </fwb-badge>
  <fwb-badge size="sm" type="dark">
    <template #icon>
      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
      </svg>
    </template>
    Dark
  </fwb-badge>
</template>

<script setup>
import { FwbBadge } from 'flowbite-vue'
</script>
<template>
  <fwb-badge>
    <template #icon>
      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
      </svg>
    </template>
    Default
  </fwb-badge>
  <fwb-badge size="sm" type="dark">
    <template #icon>
      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
      </svg>
    </template>
    Dark
  </fwb-badge>
</template>

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

Badge with icon only ​

`,2),W=y(`
vue
<template>
  <fwb-badge>
    <template #icon>
      <svg aria-hidden="true" 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 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
      </svg>
    </template>
  </fwb-badge>
  <fwb-badge type="dark">
    <template #icon>
      <svg aria-hidden="true" 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 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
      </svg>
    </template>
  </fwb-badge>
  <fwb-badge size="sm" type="green">
    <template #icon>
      <svg aria-hidden="true" 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 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
      </svg>
    </template>
  </fwb-badge>
</template>

<script setup>
import { FwbBadge } from 'flowbite-vue'
</script>
<template>
  <fwb-badge>
    <template #icon>
      <svg aria-hidden="true" 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 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
      </svg>
    </template>
  </fwb-badge>
  <fwb-badge type="dark">
    <template #icon>
      <svg aria-hidden="true" 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 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
      </svg>
    </template>
  </fwb-badge>
  <fwb-badge size="sm" type="green">
    <template #icon>
      <svg aria-hidden="true" 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 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
      </svg>
    </template>
  </fwb-badge>
</template>

<script setup>
import { FwbBadge } from 'flowbite-vue'
</script>
`,1),ls=JSON.parse('{"title":"Vue Badge - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/badge.md","filePath":"components/badge.md"}'),X={name:"components/badge.md"},os=Object.assign(X,{setup(p){return(t,c)=>(r(),E("div",null,[H,s(P),J,s(S),Q,s(I),Z,s(N),K,s(U),W]))}});export{ls as __pageData,os as default};