Qwik badge - Flowbite

Get started with the badge component to add labels or counters inside paragraphs, buttons, and inputs based on multiple colors and sizes from Qwik and Tailwind CSS

The badge component can be used to show text, labels, and counters inside a small box or circle element which can be placed inside paragraphs, buttons, dropdowns, menu items, and more.

You can choose from multiple examples of badges based on the color, size, and icon and even use it as a link component by leveraging the properties from Qwik and classes from Tailwind CSS.

To start using the badge component you need to import it from flowbite-qwik :

import { Badge } from "flowbite-qwik"

Default Badge

Use the following badge elements to indicate counts or labels inside or outside components.

tsx
import { component$ } from '@builder.io/qwik'
import { Badge } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Badge type="default" content="Default" />
      <Badge type="dark" content="Dark" />
      <Badge type="red" content="Red" />
      <Badge type="green" content="Green" />
      <Badge type="yellow" content="Yellow" />
      <Badge type="indigo" content="Indigo" />
      <Badge type="purple" content="Purple" />
      <Badge type="pink" content="Pink" />
    </div>
  )
})

Bordered badge

This example can be used to add a border accent to the badge component.

tsx
import { component$ } from '@builder.io/qwik'
import { Badge } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Badge size="sm" bordered content="Default" />
      <Badge size="sm" bordered type="dark" content="Dark" />
      <Badge size="sm" bordered type="red" content="Red" />
      <Badge size="sm" bordered type="green" content="Green" />
      <Badge size="sm" bordered type="yellow" content="Yellow" />
      <Badge size="sm" bordered type="indigo" content="Indigo" />
      <Badge size="sm" bordered type="purple" content="Purple" />
      <Badge size="sm" bordered type="pink" content="Pink" />
    </div>
  )
})

Pills badge

Use this example to make the corners even more rounded like pills for the badge component.

tsx
import { component$ } from '@builder.io/qwik'
import { Badge } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Badge pills content="Default" />
      <Badge pills type="dark" content="Dark" />
      <Badge pills type="red" content="Red" />
      <Badge pills type="green" content="Green" />
      <Badge pills type="yellow" content="Yellow" />
      <Badge pills type="indigo" content="Indigo" />
      <Badge pills type="purple" content="Purple" />
      <Badge pills type="pink" content="Pink" />
    </div>
  )
})

Badges as links

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

tsx
import { component$ } from '@builder.io/qwik'
import { Badge } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Badge href="#" content="Link" bordered />
      <Badge href="#" size="sm" content="Link" />
    </div>
  )
})

Large badge

Use size prop to change the size of the badge component.

tsx
import { component$ } from '@builder.io/qwik'
import { Badge } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Badge size="xs" content="Default" />
      <Badge size="xs" type="dark" content="Dark" />
      <Badge size="xs" type="red" content="Red" />
      <Badge size="sm" type="green" content="Green" />
      <Badge size="sm" type="yellow" content="Yellow" />
      <Badge size="sm" type="indigo" content="Indigo" />
      <Badge size="sm" type="purple" content="Purple" />
      <Badge size="sm" type="pink" content="Pink" />
    </div>
  )
})

Badge with Icon

You can also use SVG icons inside the badge elements.

tsx
import { component$ } from '@builder.io/qwik'
import { Badge } from 'flowbite-qwik'
import { IconRocketOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Badge icon={IconRocketOutline} content="Icon" />
      <Badge icon={IconRocketOutline} size="sm" content="Icon" />
    </div>
  )
})

Chips (dismissible badges)

This example can be used to make badges dismissible by adding a close button.

tsx
import { component$ } from '@builder.io/qwik'
import { Badge } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Badge
        size="xs"
        chips
        onClose$={() => {
          alert('close')
        }}
        content="Default"
      />
      <Badge
        size="xs"
        chips
        onClose$={() => {
          alert('close')
        }}
        type="dark"
        content="Dark"
      />
      <Badge
        size="xs"
        chips
        onClose$={() => {
          alert('close')
        }}
        type="red"
        content="Red"
      />
      <Badge
        size="sm"
        chips
        onClose$={() => {
          alert('close')
        }}
        type="green"
        content="Green"
      />
      <Badge
        size="sm"
        chips
        onClose$={() => {
          alert('close')
        }}
        type="yellow"
        content="Yellow"
      />
      <Badge
        size="sm"
        chips
        onClose$={() => {
          alert('close')
        }}
        type="indigo"
        content="Indigo"
      />
      <Badge
        size="sm"
        chips
        onClose$={() => {
          alert('close')
        }}
        type="purple"
        content="Purple"
      />
      <Badge
        size="sm"
        chips
        onClose$={() => {
          alert('close')
        }}
        type="pink"
        content="Pink"
      />
    </div>
  )
})

Badge with Icon only

You can also use badge with only icon.

tsx
import { component$ } from '@builder.io/qwik'
import { Badge } from 'flowbite-qwik'
import { IconRocketOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2 p-6">
      <Badge icon={IconRocketOutline} size="sm" />
      <Badge type="dark" icon={IconRocketOutline} size="sm" />
      <Badge type="green" icon={IconRocketOutline} size="sm" />
    </div>
  )
})