React Badge - Flowbite

Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes

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.

Default badges

DefaultDarkFailureSuccessWarningIndigoPurplePink

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

Large badges

Default

Dark

Failure

Success

Warning

Indigo

Purple

Pink

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

Badge as link

Default

<Badge href="/badges">
  Default
</Badge>
<Badge
  href="/badges"
  size="sm"
>
  <p>
    Default
  </p>
</Badge>

Badge with icon

2 minutes ago

3 days ago

<Badge icon={HiCheck}>
  2 minutes ago
</Badge>
<Badge
  color="gray"
  icon={HiClock}
>
  <p>
    3 days ago
  </p>
</Badge>

Badge with icon only

<Badge icon={HiCheck} />
<Badge
  color="gray"
  icon={HiCheck}
/>
<Badge
  icon={HiCheck}
  size="sm"
/>
<Badge
  color="gray"
  icon={HiCheck}
  size="sm"
/>