React Badge - Flowbite

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';

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.

<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>

Badge as link

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

<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.

<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.

<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.

<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>

References

• Flowbite Badge