Tailwind CSS Chip
Get started on your web projects with our Tailwind CSS Chip (also known as Pills or Tags) which is a compact element that represents 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.
They often come with the capability to be removed or interacted with, allowing users to manipulate the data or selection represented by the chip.
See below our responsive chip component examples styled with Tailwind CSS that you can use for your web or mobile projects.
Chip Examples:
Default Chip
Use this simple chip with dark-grey background as a starting point for your application.
<div class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-gray-900 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">chip</span>
</div>Chips Variants
This example presents 4 different styles of chip components styled with Tailwind CSS, showcasing the versatility of chip design for different UI use cases.
<div class="flex gap-2">
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-gray-900 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">chip filled</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">chip gradient</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg border border-gray-900 py-1.5 px-3 font-sans text-xs font-bold uppercase text-gray-700">
<span class="">chip outlined</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-gray-900/10 py-1.5 px-3 font-sans text-xs font-bold uppercase text-gray-900">
<span class="">chip ghost</span>
</div>
</div>Each chip is contained within a <div> element and designed with a consistent structure but different visual styles: filled, gradient, outlined, and ghost.
Chips Sizes
Check out this example to see how you can implement chips with different sizes. The differences in size are primarily achieved through varying the padding values (small - px-2 py-1; large - px-4 py-2.
<div class="flex items-end gap-2">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-white uppercase bg-gray-900 rounded-md select-none whitespace-nowrap">
<span class="">chip small</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-gray-900 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">chip medium</span>
</div>
<div
class="relative grid items-center px-4 py-2 font-sans text-xs font-bold text-white uppercase bg-gray-900 rounded-lg select-none whitespace-nowrap">
<span class="">chip large</span>
</div>
</div>The varying sizes allow web designers to cater to different spatial and functional requirements within an interface.
Chips Colors
The Chip component comes with 19 different colors like blue, red, green, and amber that you can change using the color class. Check out below some of the available colors in action.
<div class="flex gap-2">
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-blue-500 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">blue</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-red-500 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">red</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-green-500 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">green</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-amber-500 py-1.5 px-3 font-sans text-xs font-bold uppercase text-black">
<span class="">amber</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-pink-500 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">pink</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-indigo-500 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">indigo</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-purple-500 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">purple</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-teal-500 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">teal</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-cyan-500 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">cyan</span>
</div>
</div>Chips with Icon
The icons, in this example, add a visual element that can improve user understanding or interaction with the chip, such as representing user accounts, settings, notifications, etc.
<div class="flex gap-2">
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-gray-900 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<div class="absolute top-2/4 left-1.5 h-5 w-5 -translate-y-2/4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd"
d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
clip-rule="evenodd"></path>
</svg>
</div>
<span class="ml-[18px]">account</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<div class="absolute top-2/4 left-1.5 h-5 w-5 -translate-y-2/4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd"
d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
clip-rule="evenodd"></path>
</svg>
</div>
<span class="ml-[18px]">account</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg border border-gray-900 py-1.5 px-3 font-sans text-xs font-bold uppercase text-gray-700">
<div class="absolute top-2/4 left-1.5 h-5 w-5 -translate-y-2/4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd"
d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
clip-rule="evenodd"></path>
</svg>
</div>
<span class="ml-[18px]">account</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-gray-900/10 py-1.5 px-3 font-sans text-xs font-bold uppercase text-gray-900">
<div class="absolute top-2/4 left-1.5 h-5 w-5 -translate-y-2/4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd"
d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
clip-rule="evenodd"></path>
</svg>
</div>
<span class="ml-[18px]">account</span>
</div>
</div>Chips Dismissible
You can make a chip dismissible by adding the data-dismissible="chipName" data attribute to the chip element and the data-dismissible-target="chipName" data attribute to the element that you want to close the chip with.
<div data-dismissible="chip"
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-gray-900 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="mr-5">Dismissible</span>
<button data-dismissible-target="chip"
class="!absolute top-2/4 right-1 mx-px h-5 max-h-[32px] w-5 max-w-[32px] -translate-y-2/4 select-none rounded-md text-center align-middle font-sans text-xs font-medium uppercase text-white transition-all hover:bg-white/10 active:bg-white/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</button>
</div>The example offers users the ability to remove or dismiss the chip from the UI, typically used in scenarios where users can select and then opt to remove choices, such as tags, filters, or selections.
Chips with Avatar
Use the example below for a chip component containing an avatar. It incorporates visual identity alongside textual information, making it ideal for user interfaces where user recognition is key, such as in social media platforms, messaging apps, or user dashboards.
Tania Andrew
<div
class="relative grid select-none items-center whitespace-nowrap rounded-full bg-gray-900 px-3 py-1.5 font-sans text-xs font-bold uppercase text-white">
<div class="absolute top-2/4 left-1.5 h-5 w-5 -translate-y-2/4">
<img alt="Tania Andrew"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
class="relative inline-block h-full w-full -translate-x-0.5 !rounded-full object-cover object-center" />
</div>
<span class="ml-[18px]">
<p class="block font-sans text-sm antialiased font-medium leading-none text-white capitalize">
Tania Andrew
</p>
</span>
</div> Chip Pills
Use this example of chip if you want to implement a pill-like shape for your component - fully rounded ends (rounded-full in Tailwind CSS).
<div class="flex gap-2">
<div
class="relative grid select-none items-center whitespace-nowrap rounded-full bg-gray-900 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">chip filled</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-full bg-gradient-to-tr from-gray-900 to-gray-800 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white">
<span class="">chip gradient</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-full border border-gray-900 py-1.5 px-3 font-sans text-xs font-bold uppercase text-gray-700">
<span class="">chip outlined</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-full bg-gray-900/10 py-1.5 px-3 font-sans text-xs font-bold uppercase text-gray-900">
<span class="">chip ghost</span>
</div>
</div>Chip with Status
This example showcases 2 status indicator chips: one indicating "Online" status and the other indicating "Offline" status. These chips use color coding, text, and a visual marker to convey the status clearly and concisely.
<div class="flex gap-2">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-green-900 uppercase rounded-md select-none whitespace-nowrap bg-green-500/20">
<div class="absolute w-4 h-4 top-2/4 left-1 -translate-y-2/4">
<span class="mx-auto mt-1 block h-2 w-2 rounded-full bg-green-900 content-['']"></span>
</div>
<span class="ml-4">Online</span>
</div>
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-red-900 uppercase rounded-md select-none whitespace-nowrap bg-red-500/20">
<div class="absolute w-4 h-4 top-2/4 left-1 -translate-y-2/4">
<span class="mx-auto mt-1 block h-2 w-2 rounded-full bg-red-900 content-['']"></span>
</div>
<span class="ml-4">Offline</span>
</div>
</div> Chip with Checkbox
This example showcases 2 interactive status indicator chips featuring "Online" and "Offline" statuses, each with a toggleable checkbox to change the status.
<div class="flex gap-2">
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-green-500/20 py-1.5 px-3 font-sans text-xs font-bold uppercase text-green-900">
<div class="absolute top-2/4 left-1.5 h-5 w-5 -translate-y-2/4">
<div class="inline-flex items-center">
<label class="relative flex items-center p-0 rounded-full cursor-pointer" htmlFor="online">
<input type="checkbox"
class="before:content[''] peer relative -ml-px h-5 w-5 cursor-pointer appearance-none rounded-md border-2 border-green-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:hidden before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-green-900 checked:bg-green-900 checked:before:bg-green-500 hover:before:opacity-10"
id="online" />
<span
class="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"
stroke="currentColor" stroke-width="1">
<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>
</label>
</div>
</div>
<span class="ml-[18px]">Online</span>
</div>
<div
class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-red-500/20 py-1.5 px-3 font-sans text-xs font-bold uppercase text-red-900">
<div class="absolute top-2/4 left-1.5 h-5 w-5 -translate-y-2/4">
<div class="inline-flex items-center">
<label class="relative flex items-center p-0 rounded-full cursor-pointer" htmlFor="offline">
<input type="checkbox"
class="before:content[''] peer relative -ml-px h-5 w-5 cursor-pointer appearance-none rounded-md border-2 border-red-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:hidden before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-red-900 checked:bg-red-900 checked:before:bg-red-500 hover:before:opacity-10"
id="offline" />
<span
class="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"
stroke="currentColor" stroke-width="1">
<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>
</label>
</div>
</div>
<span class="ml-[18px]">Offline</span>
</div>
</div> Chip Data Attributes
The following data attributes are available for chip element.
| Attribute | Description |
|---|---|
data-dismissible | Set the chip dismissible name, it should be the same as the data-dismissible-target data attribute. |
Chip Trigger Data Attributes
The following data attributes are available for chip trigger element (The element that you want to close the chip with).
| Attribute | Description |
|---|---|
data-dismissible-target | Hide the chip element that has the same value of data-dismissible-target data attribute for it's data-dismissible data attribute. |
Required Scripts
The chip component needs a required script file to work, you just need to add the below script file to the bottom of your html file.
<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html@latest/scripts/dismissible.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/dismissible.js"></script>Similar Components
Similar components to the chip include: badges, tags, pills, buttons, tooltips.
Chip Components Best Practices for Developers
• Chips should have concise and descriptive labels that clearly convey their purpose or the information they represent.
• Keep a consistent look and feel for chips across your application to maintain a cohesive user interface.
• For chips that perform actions (e.g., deletable or selectable chips), make it clear that they are interactive.
• Ensure that chips are large enough to be easily tapped on touch devices, following recommended touch target sizes.
• Avoid overwhelming users with too many chips at once.