Components Badge

Default badge

defaultinfofailurewarningsuccessprimary

html

typescript

<span flowbiteBadge>
  <span>default</span>
</span>
<span
  flowbiteBadge
  color="info">
  <span>info</span>
</span>
<span
  flowbiteBadge
  color="failure">
  <span>failure</span>
</span>
<span
  flowbiteBadge
  color="warning">
  <span>warning</span>
</span>
<span
  flowbiteBadge
  color="success">
  <span>success</span>
</span>
<span
  flowbiteBadge
  color="primary">
  <span>primary</span>
</span>

Bordered badge

defaultinfofailurewarningsuccessprimary

html

typescript

<span
  flowbiteBadge
  border>
  <span>default</span>
</span>
<span
  flowbiteBadge
  border
  color="info">
  <span>info</span>
</span>
<span
  flowbiteBadge
  border
  color="failure">
  <span>failure</span>
</span>
<span
  flowbiteBadge
  border
  color="warning">
  <span>warning</span>
</span>
<span
  flowbiteBadge
  border
  color="success">
  <span>success</span>
</span>
<span
  flowbiteBadge
  border
  color="primary">
  <span>primary</span>
</span>

Badge as link

default info failure success warning primary

html

typescript

<a
  href="#"
  flowbiteBadgeLink>
  <span>default</span>
</a>
<a
  href="#"
  flowbiteBadgeLink
  color="info">
  <span>info</span>
</a>
<a
  href="#"
  flowbiteBadgeLink
  color="failure">
  <span>failure</span>
</a>
<a
  href="#"
  flowbiteBadgeLink
  color="success">
  <span>success</span>
</a>
<a
  href="#"
  flowbiteBadgeLink
  color="warning">
  <span>warning</span>
</a>
<a
  href="#"
  flowbiteBadgeLink
  color="primary">
  <span>primary</span>
</a>

Badge with icon

defaultinfofailuresuccesswarningprimary

html

typescript

<span flowbiteBadge>
  <flowbite-icon
    name="check"
    class="size-4 stroke-2" />
  <span class="ml-2">default</span>
</span>
<span
  flowbiteBadge
  color="info">
  <flowbite-icon
    name="check"
    class="size-4 stroke-2" />
  <span class="ml-2">info</span>
</span>
<span
  flowbiteBadge
  color="failure">
  <flowbite-icon
    name="check"
    class="size-4 stroke-2" />
  <span class="ml-2">failure</span>
</span>
<span
  flowbiteBadge
  color="success">
  <flowbite-icon
    name="check"
    class="size-4 stroke-2" />
  <span class="ml-2">success</span>
</span>
<span
  flowbiteBadge
  color="warning">
  <flowbite-icon
    name="check"
    class="size-4 stroke-2" />
  <span class="ml-2">warning</span>
</span>
<span
  flowbiteBadge
  color="primary">
  <flowbite-icon
    name="check"
    class="size-4 stroke-2" />
  <span class="ml-2">primary</span>
</span>

Dismissable badge

defaultinfofailurewarningsuccessprimary

html

typescript

<span flowbiteBadge>
  <flowbite-icon
    name="infoCircle"
    class="size-4 stroke-2" />
  <span class="ml-2">default</span>
  <button flowbiteBadgeButton>
    <flowbite-icon
      name="close"
      class="size-4 stroke-2"
      (click)="onDismiss()" />
  </button>
</span>
<span
  flowbiteBadge
  color="info">
  <flowbite-icon
    name="infoCircle"
    class="size-4 stroke-2" />
  <span class="ml-2">info</span>
  <button flowbiteBadgeButton>
    <flowbite-icon
      name="close"
      class="size-4 stroke-2"
      (click)="onDismiss()" />
  </button>
</span>
<span
  flowbiteBadge
  color="failure">
  <flowbite-icon
    name="infoCircle"
    class="size-4 stroke-2" />
  <span class="ml-2">failure</span>
  <button flowbiteBadgeButton>
    <flowbite-icon
      name="close"
      class="size-4 stroke-2"
      (click)="onDismiss()" />
  </button>
</span>
<span
  flowbiteBadge
  color="warning">
  <flowbite-icon
    name="infoCircle"
    class="size-4 stroke-2" />
  <span class="ml-2">warning</span>
  <button flowbiteBadgeButton>
    <flowbite-icon
      name="close"
      class="size-4 stroke-2"
      (click)="onDismiss()" />
  </button>
</span>
<span
  flowbiteBadge
  color="success">
  <flowbite-icon
    name="infoCircle"
    class="size-4 stroke-2" />
  <span class="ml-2">success</span>
  <button flowbiteBadgeButton>
    <flowbite-icon
      name="close"
      class="size-4 stroke-2"
      (click)="onDismiss()" />
  </button>
</span>
<span
  flowbiteBadge
  color="primary">
  <flowbite-icon
    name="infoCircle"
    class="size-4 stroke-2" />
  <span class="ml-2">primary</span>
  <button flowbiteBadgeButton>
    <flowbite-icon
      name="close"
      class="size-4 stroke-2"
      (click)="onDismiss()" />
  </button>
</span>

Themes

Badge

{
  "host": {
    "base": "inline-flex items-center justify-center font-medium",
    "transition": "",
    "border": {
      "on": "border",
      "off": "border-0"
    },
    "color": {
      "default": {
        "light": "border-gray-300 bg-gray-100 text-gray-800",
        "dark": "dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
      },
      "info": {
        "light": "border-blue-300 bg-blue-100 text-blue-800",
        "dark": "dark:border-blue-900 dark:bg-blue-800 dark:text-blue-100"
      },
      "failure": {
        "light": "border-red-300 bg-red-100 text-red-800",
        "dark": "dark:border-red-900 dark:bg-red-800 dark:text-red-100"
      },
      "success": {
        "light": "border-green-300 bg-green-100 text-green-800",
        "dark": "dark:border-green-900 dark:bg-green-800 dark:text-green-100"
      },
      "warning": {
        "light": "border-yellow-300 bg-yellow-100 text-yellow-800",
        "dark": "dark:border-yellow-900 dark:bg-yellow-800 dark:text-yellow-100"
      },
      "primary": {
        "light": "bg-primary-100 text-primary-800 border-primary-300",
        "dark": "dark:text-primary-100 dark:bg-primary-800 dark:border-primary-900"
      }
    },
    "pill": {
      "on": "rounded-full",
      "off": "rounded"
    },
    "size": {
      "xs": "p-1 text-xs",
      "sm": "p-1.5 text-sm"
    }
  }
}

Badge link

{
  "host": {
    "base": "data-hover:cursor-pointer",
    "transition": "",
    "color": {
      "default": {
        "light": "data-hover:bg-gray-200",
        "dark": "dark:data-hover:bg-gray-700"
      },
      "info": {
        "light": "data-hover:bg-blue-200",
        "dark": "dark:data-hover:bg-blue-900"
      },
      "failure": {
        "light": "data-hover:bg-red-200",
        "dark": "dark:data-hover:bg-red-900"
      },
      "success": {
        "light": "data-hover:bg-green-200",
        "dark": "dark:data-hover:bg-green-900"
      },
      "warning": {
        "light": "data-hover:bg-yellow-200",
        "dark": "dark:data-hover:bg-yellow-900"
      },
      "primary": {
        "light": "data-hover:bg-primary-200",
        "dark": "dark:data-hover:bg-primary-900"
      }
    }
  }
}

Badge button

{
  "host": {
    "base": "flex rounded-lg p-1 first:mr-2 last:ml-2 data-hover:cursor-pointer",
    "color": {
      "default": {
        "light": "data-hover:bg-gray-300",
        "dark": "dark:data-hover:bg-gray-700"
      },
      "info": {
        "light": "data-hover:bg-blue-300",
        "dark": "dark:data-hover:bg-blue-400"
      },
      "failure": {
        "light": "data-hover:bg-red-300",
        "dark": "dark:data-hover:bg-red-400"
      },
      "success": {
        "light": "data-hover:bg-green-300",
        "dark": "dark:data-hover:bg-green-400"
      },
      "warning": {
        "light": "data-hover:bg-yellow-300",
        "dark": "dark:data-hover:bg-yellow-400"
      },
      "primary": {
        "light": "data-hover:bg-primary-300",
        "dark": "dark:data-hover:bg-primary-400"
      }
    }
  }
}