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.

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

This example presents 4 different styles of chip components styled with Tailwind CSS, showcasing the versatility of chip design for different UI use cases.

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>


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.

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>

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.

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

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.

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>

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

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&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;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).

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

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.

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

This example showcases 2 interactive status indicator chips featuring "Online" and "Offline" statuses, each with a toggleable checkbox to change the status.

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.

AttributeDescription
data-dismissibleSet 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).

AttributeDescription
data-dismissible-targetHide 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.