📒 Developer style guide for Badges
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.
Types of Badges 🔽
- Default badge
- Badges with icon
- Notification badge
- Button with badge
- Badge with icon only
General must known design system guideline :
Color 🎨
| Color | Blue | Gray | Red | Green | Yellow | Purple |
|---|---|---|---|---|---|---|
| Code in Tailwind | bg-blue-100 | bg-gray-100 | bg-red-100 | bg-green-100 | bg-yellow-100 | bg-purple-100 |
Color of bg is generally used as shade of 100 / 700
Color of text will depend on the bg color
| Background | Dark | Light |
|---|---|---|
| Text | Light | Dark |
| Code in Tailwind | text-white | text-[color]-800 |
Note : Color of the text [color] will depend on the color of the background
Font
For all Badges font is : font-medium
Border Radius 🔲
The normal border-radius for the components are rounded.
Normal badge guidelines :
| Padding | Border Radius | Text Size | |
|---|---|---|---|
| Small | px-4 & py-2 | rounded-full | text-sm |
| Medium | px-6 & py-3 | rounded-full | text-md |
| Large | px-8 & py-4 | rounded-full | text-lg |
Rounded badge guidelines :
| Padding | Border Radius | Text Size | |
|---|---|---|---|
| Small | px-4 & py-2 | rounded-full | text-sm |
| Medium | px-6 & py-3 | rounded-full | text-md |
| Large | px-8 & py-4 | rounded-full | text-lg |
Exceptions : The square badge and only icon/ SVG badge has a padding x and y same and, it equals the padding Y ( py ) of the normal badge of the same size.
Icon guidelines:
Mostly all the icons are taken from → Hero Icons (opens in a new tab)
Icon-text-gap : We follow a convention of equal margin between the text and the icon as padding in y axis py. and always the margin is given from the side of icon.
| Width | Type | |
|---|---|---|
| Small | w-4 & h-4 | Hero Icons mini |
| Medium | w-5 & h-5 | Hero Icons mini |
| Large | w-6 & h-6 | Hero Icons filled |
Example of Default Badge file 👇
This is the way we have all the Badges.
Use the following badge elements to indicate counts or labels inside or outside components.
Like in the badge-0.html file you can find all the badges of different colors like this which maintains the design system above.
Want to see this badges in action? Try copy pasting this code in Tailwind Playground (opens in a new tab). 💥
<span class="mr-2 rounded bg-blue-100 px-2.5 py-0.5 text-sm font-medium text-blue-800 dark:bg-blue-200 dark:text-blue-800">Default</span>
<!-- Dark -->
<span class="mr-2 rounded bg-gray-100 px-2.5 py-0.5 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Dark</span>
<!-- Red -->
<span class="mr-2 rounded bg-red-100 px-2.5 py-0.5 text-sm font-medium text-red-800 dark:bg-red-200 dark:text-red-900">Red</span>
<!-- Green -->
<span class="mr-2 rounded bg-green-100 px-2.5 py-0.5 text-sm font-medium text-green-800 dark:bg-green-200 dark:text-green-900">Green</span>
<!-- Yellow -->
<span class="mr-2 rounded bg-yellow-100 px-2.5 py-0.5 text-sm font-medium text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900">Yellow</span>
<!-- Indigo -->
<span class="mr-2 rounded bg-indigo-100 px-2.5 py-0.5 text-sm font-medium text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900">Indigo</span>
<!-- Purple -->
<span class="mr-2 rounded bg-purple-100 px-2.5 py-0.5 text-sm font-medium text-purple-800 dark:bg-purple-200 dark:text-purple-900">Purple</span>
<!-- Pink -->
<span class="mr-2 rounded bg-pink-100 px-2.5 py-0.5 text-sm font-medium text-pink-800 dark:bg-pink-200 dark:text-pink-800">Pink</span>x
Example of other Badges👇
We can also use badges which indicate only a SVG icon.
Want to see this badges in action? Try copy pasting this code in Tailwind Playground (opens in a new tab). 💥
<-- For badge-3 -->
<span class="inline-flex items-center p-1 mr-2 text-sm font-semibold text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg aria-hidden="true" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Icon description</span>
</span>
<span class="inline-flex items-center p-1 mr-2 text-sm font-semibold text-blue-800 bg-blue-100 rounded-full dark:bg-blue-200 dark:text-blue-800">
<svg aria-hidden="true" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Icon description</span>
</span>
<span class="bg-gray-100 text-gray-800 text-sm font-semibold inline-flex items-center p-1.5 rounded-full mr-2 dark:bg-gray-700 dark:text-gray-300">
<svg aria-hidden="true" class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Icon description</span>
</span>
<span class="bg-blue-100 text-blue-800 text-sm font-semibold inline-flex items-center p-1.5 rounded-full dark:bg-blue-200 dark:text-blue-800">
<svg aria-hidden="true" class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Icon description</span>
</span>
<-- For badge-2 -->
<button type="button" class="inline-flex items-center rounded-lg bg-green-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-green-800 focus:outline-none dark:bg-green-600 dark:hover:bg-green-700">
Messages
<span class="ml-2 inline-flex h-4 w-4 items-center justify-center rounded-full bg-white text-xs font-semibold text-blue-800"> 2 </span>
</button>
<button type="button" class="inline-flex items-center rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none dark:bg-blue-600 dark:hover:bg-blue-700">
Commits
<span class="ml-2 inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-200 text-xs font-semibold text-blue-800"> 3 </span>
</button>
<button type="button" class="inline-flex items-center rounded-lg bg-red-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-red-800 focus:outline-none dark:bg-red-600 dark:hover:bg-red-700">
Mails
<span class="ml-2 inline-flex h-4 w-4 items-center justify-center rounded-full bg-white text-xs font-semibold text-red-800"> 9 </span>
</button>
<-- For badge-1 -->
<span class="inline-flex items-center rounded bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">
<svg aria-hidden="true" class="mr-1.5 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
3 days ago
</span>
<span class="inline-flex items-center rounded bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-200 dark:text-blue-800">
<svg aria-hidden="true" class="mr-1.5 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
2 minutes ago
</span>
<span class="inline-flex items-center rounded bg-blue-500 px-2.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-blue-700 dark:text-gray-300">
<svg aria-hidden="true" class="mr-1.5 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
3 mins ago
</span>
<span class="text-white-800 inline-flex items-center rounded bg-blue-100 px-2.5 py-0.5 text-xs font-medium dark:bg-red-800 dark:text-white">
<svg aria-hidden="true" class="mr-1.5 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
2 s ago
</span>
Having some problem ? 😕
If you still have a problem understanding this please join our discord server (opens in a new tab) to get help.