Making Badges with Tailwind CSS
Making Badges with Tailwind CSS
This tutorial is part of our Learn Tailwind CSS Guide

Making Badges with Tailwind CSS

Lynne Buencamino's Profile
Lynne Buencaminoon Jul 20, 2021

Building Bootstrap components in Tailwind is a great way to learn how Tailwind's utility classes work.

Badges let users know when there is something that needs extra attention. We see it notifying us of new mail, a new message, new comments, even to tell us when something is new or late.

Bootstrap is one of the most popular front-end toolkit using prebuilt components. In this article, we'll use Bootstrap as an inspiration and to create inline, pill, button, corner, and indicator badges in Tailwind CSS.


  <div class="p-24 bg-pink-400 flex flex-col justify-center items-center">
   <h3 class="pb-10 font-bold text-4xl text-pink-700">Inline Badges</h3>
   <!-- inline badges -->
   <div class="flex flex-col space-y-10">
      <p class="text-4xl">Example text
         <span class="bg-blue-500 text-blue-100 py-2 px-4 rounded text-3xl font-bold">New</span>
      </p>
      <p class="text-3xl">Example text
         <span class="bg-blue-500 text-blue-100 py-2 px-4 rounded text-2xl font-bold">New</span>
      </p>
      <p class="text-2xl">Example text
         <span class="bg-blue-500 text-blue-100 py-2 px-4 rounded text-xl font-bold">New</span>
      </p>
      <p class="text-xl">Example text
         <span class="bg-blue-500 text-blue-100 py-2 px-4 rounded text-lg font-bold">New</span>
      </p>
   </div>
</div>
<div class="p-24 bg-pink-200 flex flex-col justify-center items-center">
   <h3 class="pb-10 font-bold text-4xl text-pink-700">Pill Badges</h3>
   <!-- pill badges -->
   <div class="flex space-x-2 space-y-2 flex-wrap justify-center items-baseline">
      <div class="bg-blue-500 text-blue-100 py-2 px-4 rounded-full text-xs font-bold">Primary</div>
      <div class="bg-gray-600 text-gray-100 py-2 px-4 rounded-full text-xs font-bold">Secondary</div>
      <div class="bg-green-700 text-green-100 py-2 px-4 rounded-full text-xs font-bold">Success</div>
      <div class="bg-red-600 text-red-100 py-2 px-4 rounded-full text-xs font-bold">Danger</div>
      <div class="bg-yellow-500 text-yellow-900 py-2 px-4 rounded-full text-xs font-bold">Warning</div>
      <div class="bg-teal-300 text-teal-900 py-2 px-4 rounded-full text-xs font-bold">Info</div>
      <div class="bg-gray-200 text-gray-900 py-2 px-4 rounded-full text-xs font-bold">Light</div>
      <div class="bg-gray-900 text-gray-100 py-2 px-4 rounded-full text-xs font-bold">Dark</div>
   </div>
</div>
<div class="p-24 bg-pink-500 flex flex-col justify-center items-center">
   <h3 class="pb-10 font-bold text-4xl text-pink-900">Button Badges</h3>
   <!-- badges on buttons -->
   <button class="bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Notifications
      <span class="bg-gray-800 px-2 py-1 ml-2 rounded text-xs font-bold">8</span>
   </button>
</div>
<div class="p-24 bg-pink-300 flex flex-col justify-center items-center">
   <h3 class="pb-10 font-bold text-4xl text-pink-700">Corner Badges</h3>
   <!-- corner badge -->
   <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Inbox
      <span class="absolute bg-red-600 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
   </button>
</div>
<div class="p-24 bg-pink-400 flex flex-col justify-center items-center">
   <h3 class="pb-10 font-bold text-4xl text-pink-700">Indicator Badge</h3>
   <!-- indicator badge -->
   <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Messages
      <span class="absolute bg-red-600 h-4 w-4 rounded-full -top-2 -right-2" />
   </button>
</div>

Inline badges is a badge that is placed next to a text or link. It could be placed to the right or left.

We can acheive this by creating a span tag inside of your text tag. A span is an inline element which will allow us to style text within a text.

This span includes:

html<span class="text-lg">
   Cool Thing
   <span class="bg-red-500 text-red-50 py-1 px-2 rounded text-xs font-bold ml-1">New</span>
</span>
<div class="min-h-screen bg-gray-100 flex justify-center items-center">
<span class="text-lg">
  Cool Thing
  <span class="bg-red-500 text-red-50 py-1 px-2 rounded text-xs font-bold ml-1">New</span>
</span>
      
</div>

Adding/changing colors can be done by updating the background color of the span class using bg-{color}.

Bootstrap uses eight specific color labeling, which can be replicated in Tailwind.

html<!-- primary badge -->
<span class="bg-blue-500 text-blue-50">Primary</span>

<!-- secondary badge -->
<span class="bg-gray-600 text-gray-50">Secondary</span>

<!-- success badge -->
<span class="bg-green-700 text-green-50">Success</span>

<!-- danger badge -->
<span class="bg-red-600 text-red-50">Danger</span>

<!-- warning badge -->
<span class="bg-yellow-500 text-yellow-50">Warning</span>

<!-- light badge -->
<span class="bg-gray-200 text-gray-800">Light</span>

<!-- dark badge -->
<span class="bg-gray-900 text-gray-200">Dark</span>
<div class="min-h-screen bg-gray-100 flex flex-col space-y-4 justify-center items-center">
  <p class="text-lg">
    Cool Thing
    <span class="bg-blue-500 text-blue-50 py-1 px-2 rounded text-xs font-bold ml-1">Primary</span>
  </p>
    <p class="text-lg">
    Cool Thing
    <span class="bg-gray-500 text-gray-50 py-1 px-2 rounded text-xs font-bold ml-1">Secondary</span>
  </p>
    <p class="text-lg">
    Cool Thing
    <span class="bg-green-500 text-green-50 py-1 px-2 rounded text-xs font-bold ml-1">Success</span>
  </p>
    <p class="text-lg">
    Cool Thing
    <span class="bg-red-500 text-red-50 py-1 px-2 rounded text-xs font-bold ml-1">Danger</span>
  </p>
  
    <p class="text-lg">
    Cool Thing
    <span class="bg-yellow-500 text-yellow-50 py-1 px-2 rounded text-xs font-bold ml-1">Warning</span>
  </p>
  <p class="text-lg">
    Cool Thing
    <span class="bg-gray-200 text-gray-800 py-1 px-2 rounded text-xs font-bold ml-1">Light</span>
  </p>
 
    <p class="text-lg">
    Cool Thing
    <span class="bg-gray-900 text-gray-200 py-1 px-2 rounded text-xs font-bold ml-1">Info</span>
  </p>
</div>

Pill badges are pretty much just changing the shape of the inline badge from a rounded corner to a rounded-full corner.

In Tailwind, the class will include the background color, text color, text size, font weight, and padding.

html<span class="rounded-full bg-red-500 text-red-50 py-1 px-2 text-xs font-bold ml-1">New</span>
<div class="min-h-screen bg-gray-100 flex justify-center items-center">
<span class="text-lg">
  Cool Thing
  <span class="rounded-full bg-red-500 text-red-50 py-1 px-2 text-xs font-bold ml-1">New</span>
</span>
      
</div>

This badge will sit on top of a button. The button encloses the text and the inline badge. Take any button and let's turn on notifications!

Here we'll use a button we created with Tailwind, name it Notifications and add in the span badge within the button.

html<span class="bg-gray-800 px-2 py-1 ml-2 rounded text-xs font-bold">8</span>
<div class="h-screen p-24 bg-pink-500 flex flex-col justify-center items-center">
   <button class="bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Notifications
      <span class="bg-gray-800 px-2 py-1 ml-2 rounded text-xs font-bold">8</span>
   </button>
</div>

Want to create buttons using Tailwind? Try Making Buttons with Tailwind CSS.

Corner badges seem to be very popular becuase how the badge is offset from the button which draws attention to the button. We see these on our phones and messaging applications where space is limited to send a notification our way in a compact visually appealing way.

You'll see that we're still using the span for our badge, but it has been pushed to the top right of our button. We do that by setting the position to absolute and controlling the placement using Tailwind's -top-3 and -right-3 classes.

☝️Pro Tip
Using position classes rely on the nearest parent's position and interacts with the current layout. Transform utilities is not affeceted by this. Using position on a button will ensure that the placement of the badge will be a part of the button's layout.
<div class="h-screen p-24 bg-pink-300 flex flex-col justify-center items-center">
   <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Inbox
      <span class="absolute bg-red-600 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
   </button>
</div>

The really cool thing about corner badges is that you can even just make them simple indicators that do not have any text or number in them. Just a color that will pop off the button.

By removing any text/number from our corner badge and including a height and width of 1rem, we're just left with a red circle in the top right corner.

<div class="h-screen p-24 bg-pink-400 flex flex-col justify-center items-center">
   <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">Messages
      <span class="absolute bg-red-600 h-4 w-4 rounded-full -top-2 -right-2" />
   </button>
</div>

What a great way to get your users notified! We went through inline badges, button badges, corner badges, and indicators. We made each example in Tailwind and you can definitely use them as a way to attract more attention to where it's needed.

I hope you had fun! Want to learn more about Tailwind CSS? Check out Better Dev's Getting Started with Tailwind course.

Lynne Buencamino

Lynne Buencamino

Lynne Buencamino is an UI/UX Designer. Solves problems to create purposeful designs. Enjoys finding that perfect mesh between business goals and user experience.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)