Tailwind CSS React Badge - Horizon UI

Get started on your web projects with our Tailwind CSS Badge which is a compact elements that represent an input, attribute, or action. This element appears dynamically as a group of multiple interactive elements and allows users to enter information, make selections, filter content, or trigger actions.

See below our simple Badge component example that you can use for your Tailwind CSS and React project. The example also comes in different styles and colors, so you can adapt it easily to your needs.

Default

Badge Variants

The Badge component comes with 2 different variants that you can change it like you want.

Default

<div className="bg-brand-500 dark:bg-brand-400 rounded-lg px-3 py-2 text-xs font-bold uppercase text-white transition duration-200">
  Default
</div>
<div className="bg-brand-50 dark:bg-white/10 dark:text-white rounded-lg px-3 py-2 text-xs font-bold uppercase text-brand-500 transition duration-200">
  Default
</div>

Badge Colors

The Badge component comes with 19 different colors that you can change it using the color prop.

Default

Secondary

Dark

Blue

Red

Green

Purple

Yellow

Orange

<div className="bg-brand-500 dark:bg-brand-400 rounded-lg px-3 py-2 text-xs font-bold uppercase text-white transition duration-200">
  Default
</div>
<div className="text-navy-700 rounded-lg bg-gray-100 px-3 py-2 text-xs font-bold uppercase transition duration-200 dark:bg-white/10 dark:text-white">
  Secondary
</div>
<div className="bg-navy-700 rounded-lg px-3 py-2 text-xs font-bold uppercase text-white transition duration-200 dark:bg-white/10">
  Dark
</div>
<div className="rounded-lg bg-blue-500 px-3 py-2 text-xs font-bold uppercase text-white transition duration-200 dark:bg-blue-400">
  Blue
</div>
<div className="rounded-lg bg-red-500 px-3 py-2 text-xs font-bold uppercase text-white transition duration-200 dark:bg-red-400">
  Red
</div>
<div className="rounded-lg bg-green-500 px-3 py-2 text-xs font-bold uppercase text-white transition duration-200 dark:bg-green-400">
  Green
</div>
<div className="rounded-lg bg-purple-500 px-3 py-2 text-xs font-bold uppercase text-white transition duration-200 dark:bg-purple-400">
  Purple
</div>
<div className="rounded-lg bg-yellow-500 px-3 py-2 text-xs font-bold uppercase text-white transition duration-200 dark:bg-yellow-400">
  Yellow
</div>
<div className="rounded-lg bg-orange-500 px-3 py-2 text-xs font-bold uppercase text-white transition duration-200 dark:bg-orange-400">
  Orange
</div>

Badge with Icon

You can add an icon at the beginning of Badge component using the icon prop.

Default

<div className="bg-brand-500 flex flex-row items-center uppercase dark:bg-brand-400 rounded-lg py-2 px-3 text-xs font-bold text-white transition duration-200">
  <div className="flex h-5 w-5 items-center justify-center">
    <i className="fa fa-bolt text-xs" />
  </div>
    Default
</div>

button

card