buttonchipbeginner

Category Chip

An interactive chip with an icon and text, used for category selection with an active state.

Preview

<div class="flex flex-wrap gap-2">
  <button class="inline-flex items-center gap-1.5 px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-full">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
    Technology
  </button>
  <button class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-gray-200 transition-colors">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
    Design
  </button>
  <button class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-gray-200 transition-colors">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
    Business
  </button>
</div>

Color Breakdown

Active BG

bg-indigo-600

#4f46e5

Active Text

text-white

#ffffff

Inactive BG

bg-gray-100

#f3f4f6

Inactive Text

text-gray-700

#374151

Hover BG

hover:bg-gray-200

#e5e7eb

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-indigo-500 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700

Use Cases

Blog category filtersTag selectorsInterest pickers

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Ghost Button

button - beginner

Pill Button

button - beginner

Icon Button

button - beginner

Loading Button

button - intermediate

Outline Button

button - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I toggle the active state?▼

Use JavaScript to swap the bg-indigo-600 text-white classes with bg-gray-100 text-gray-700 on click.