Tailwind CSS Chips
Get started on your web projects with our Tailwind CSS chip 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 chip component example that you can use for your Tailwind CSS project.
chip
<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
Use this example to create a simple and versatile badge component.
chip filled
chip gradient
chip outlined
chip ghost
<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>Chips Sizes
chip small
chip medium
chip large
<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>Chips Colors
The Chip component comes with 19 different colors that you can change it using the color class, below there are some examples of the colors
blue
red
green
amber
pink
indigo
purple
teal
cyan
<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
Use this example to create a simple and versatile badge component.
account
account
account
account
<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.
Dismissible
<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>Chips with Avatar
Use the example below for a chip containing an avatar.
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
chip filled
chip gradient
chip outlined
chip ghost
<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
Online
Offline
<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
Online
Offline
<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>