React 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 React 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 React and classes from Tailwind CSS.

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

'use client';

import { Badge } from 'flowbite-react';

Table of Contents#

Default badges#

Here's a list of default <Badge> component examples where you can use the color property to change the color of the badge based on contextual colors such as info, gray, success, and more.

Edit on GitHub
DefaultDarkFailureSuccessWarningIndigoPurplePink
  • React TypeScript
'use client';

import { Badge } from 'flowbite-react';

export default function DefaultBadges() {
  return (
    <>
      <Badge color="info">
        Default
      </Badge>
      <Badge color="gray">
        Dark
      </Badge>
      <Badge color="failure">
        Failure
      </Badge>
      <Badge color="success">
        Success
      </Badge>
      <Badge color="warning">
        Warning
      </Badge>
      <Badge color="indigo">
        Indigo
      </Badge>
      <Badge color="purple">
        Purple
      </Badge>
      <Badge color="pink">
        Pink
      </Badge>
    </>
  )
}


Use the badge as a link component by adding the href property and passing the URL as a value.

Edit on GitHub
  • React TypeScript
'use client';

import { Badge } from 'flowbite-react';

export default function BadgeAsLink() {
  return (
    <>
      <Badge href="/badges">
        Default
      </Badge>
      <Badge
        href="/badges"
        size="sm"
      >
        <p>
          Default
        </p>
      </Badge>
    </>
  )
}


Badge with icon#

Add an icon to the badge by using the icon property and pass the icon component as a value. This can be used to show the status of a task or a notification often used for admin dashboards and user feeds.

Edit on GitHub
2 minutes ago

3 days ago

  • React TypeScript
'use client';

import { Badge } from 'flowbite-react';
import { HiCheck, HiClock } from 'react-icons/hi';

export default function BadgeWithIcon() {
  return (
    <>
      <Badge icon={HiCheck}>
        2 minutes ago
      </Badge>
      <Badge
        color="gray"
        icon={HiClock}
      >
        <p>
          3 days ago
        </p>
      </Badge>
    </>
  )
}


Badge with icon only#

An alternative style for the badge component is by only showing an icon without any text. You can do this by removing the children from the component and only using the icon property.

Edit on GitHub
  • React TypeScript
'use client';

import { Badge } from 'flowbite-react';
import { HiCheck } from 'react-icons/hi';

export default function BadgeWithIconOnly() {
  return (
    <>
      <Badge icon={HiCheck} />
      <Badge
        color="gray"
        icon={HiCheck}
      />
      <Badge
        icon={HiCheck}
        size="sm"
      />
      <Badge
        color="gray"
        icon={HiCheck}
        size="sm"
      />
    </>
  )
}


Sizes#

Update the size of the badge component by using the size property and passing the size as a value.

You can choose from xs and sm sizes.

Edit on GitHub

Default

Dark

Failure

Success

Warning

Indigo

Purple

Pink

  • React TypeScript
'use client';

import { Badge } from 'flowbite-react';

export default function LargeBadges() {
  return (
    <>
      <Badge
        color="info"
        size="sm"
      >
        <p>
          Default
        </p>
      </Badge>
      <Badge
        color="gray"
        size="sm"
      >
        <p>
          Dark
        </p>
      </Badge>
      <Badge
        color="failure"
        size="sm"
      >
        <p>
          Failure
        </p>
      </Badge>
      <Badge
        color="success"
        size="sm"
      >
        <p>
          Success
        </p>
      </Badge>
      <Badge
        color="warning"
        size="sm"
      >
        <p>
          Warning
        </p>
      </Badge>
      <Badge
        color="indigo"
        size="sm"
      >
        <p>
          Indigo
        </p>
      </Badge>
      <Badge
        color="purple"
        size="sm"
      >
        <p>
          Purple
        </p>
      </Badge>
      <Badge
        color="pink"
        size="sm"
      >
        <p>
          Pink
        </p>
      </Badge>
    </>
  )
}


Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "flex h-fit items-center gap-1 font-semibold",
    "color": {
      "info": "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
      "gray": "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600",
      "failure": "bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300",
      "success": "bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300",
      "warning": "bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300",
      "indigo": "bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300",
      "purple": "bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300",
      "pink": "bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300",
      "blue": "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
      "cyan": "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
      "dark": "bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200 group-hover:bg-gray-500 dark:group-hover:bg-gray-700",
      "light": "bg-gray-200 text-gray-800 dark:bg-gray-400 dark:text-gray-900 group-hover:bg-gray-300 dark:group-hover:bg-gray-500",
      "green": "bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300",
      "lime": "bg-lime-100 text-lime-800 dark:bg-lime-200 dark:text-lime-900 group-hover:bg-lime-200 dark:group-hover:bg-lime-300",
      "red": "bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300",
      "teal": "bg-teal-100 text-teal-800 dark:bg-teal-200 dark:text-teal-900 group-hover:bg-teal-200 dark:group-hover:bg-teal-300",
      "yellow": "bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300"
    },
    "href": "group",
    "size": {
      "xs": "p-1 text-xs",
      "sm": "p-1.5 text-sm"
    }
  },
  "icon": {
    "off": "rounded px-2 py-0.5",
    "on": "rounded-full p-1.5",
    "size": {
      "xs": "w-3 h-3",
      "sm": "w-3.5 h-3.5"
    }
  }
}

References#