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 className="center relative inline-block select-none whitespace-nowrap rounded-lg bg-pink-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
  chip
</div>

Chips Variants

Use this example to create a simple and versatile badge component.

chip filled

chip gradient

<div class="flex gap-2">
  <div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-blue-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
    <div class="mt-px">chip filled</div>
  </div>
  <div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-gradient-to-tr from-blue-600 to-blue-400 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
    <div class="mt-px">chip gradient</div>
  </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="center relative inline-block select-none whitespace-nowrap rounded-lg bg-blue-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
    <div class="mt-px">blue</div>
  </div>
  <div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-red-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
    <div class="mt-px">red</div>
  </div>
  <div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-green-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
    <div class="mt-px">green</div>
  </div>
  <div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-amber-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-black">
    <div class="mt-px">amber</div>
  </div>
  <div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-pink-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
    <div class="mt-px">pink</div>
  </div>
  <div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-indigo-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
    <div class="mt-px">indigo</div>
  </div>
  <div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-purple-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
    <div class="mt-px">purple</div>
  </div>
  <div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-teal-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
    <div class="mt-px">teal</div>
  </div>
  <div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-cyan-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
    <div class="mt-px">cyan</div>
  </div>
</div>

Chips with Icon

Use this example to create a simple and versatile badge component.

downloads

<div class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-pink-500 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
  <div class="absolute top-2/4 left-1 h-5 w-5 -translate-y-2/4">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path d="M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6h5a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h5v5.586l-1.293-1.293zM9 4a1 1 0 012 0v2H9V4z"></path>
    </svg>
  </div>
  <div class="ml-4 mt-px">downloads</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
  class="center relative inline-block select-none whitespace-nowrap rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-2 px-3.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white"
  data-dismissible="chip"
>
  <div class="mr-5 mt-px">Dismissible</div>
  <div
    class="absolute top-1 right-1 mx-px mt-[0.5px] w-max rounded-md bg-pink-800 transition-colors hover:bg-pink-900"
    data-dismissible-target="chip"
  >
    <div role="button" class="h-5 w-5 p-1">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="3"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18L18 6M6 6l12 12"
        ></path>
      </svg>
    </div>
  </div>
</div>

Chips with Avatar

Use the example below for a chip containing an avatar.

Candice Wu

<div class="center relative inline-block select-none whitespace-nowrap rounded-full bg-teal-500 px-3.5 py-1.5 align-baseline font-sans text-xs font-bold uppercase leading-none text-white">
  <div class="absolute top-2/4 left-1 h-5 w-5 -translate-y-2/4">
    <img
      alt="candice wu"
      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-5 w-5 translate-x-px translate-y-px rounded-full object-cover object-center"
    />
  </div>
  <div class="ml-4 mt-px">
    <p class="block font-sans text-sm font-medium capitalize leading-none text-white antialiased">
      Candice Wu
    </p>
  </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 Scrips

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/[email protected]/scripts/dismissible.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/[email protected]/scripts/dismissible.js"></script>

checkbox

dialog

Edit this page on Github