Material 3 Chips [Light]

Chips that conform to Google's Material 3 design guidelines

This tailwind example is contributed by Nick Girga, on 19-May-2025. Component is made with Tailwind v3.4. similar terms for this example is tags

Chip

Author Nick Girga

Tailwind v3.4 1.3k 6

Fork Fullscreen

<span class="text-lg">Rounded Square Chips</span>
    <div class="flex flex-col items-center gap-4">
      
      
      <div class="flex flex-row items-center gap-2">

<span class="chip">Enabled</span>

<span class="chip">
          Enabled
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>

<div class="flex flex-row items-center gap-2">

<span class="chip chip-tonal">Enabled</span>
        
        
        <span class="chip chip-tonal">
          Enabled
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>
    </div>

<span class="text-lg mt-8">Round Chips</span>
    <div class="flex flex-col items-center gap-4">
      
      <div class="flex flex-row items-center gap-2">

<span class="chip rounded-full">Free Shipping</span>

<span class="chip rounded-full">
          Free Shipping
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>

<div class="flex flex-row items-center gap-2">

<span class="chip chip-tonal rounded-full">Free Shipping</span>
        
        
        <span class="chip chip-tonal rounded-full">
          Free Shipping
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>
    </div>

<span class="text-lg mt-8">Icon Chips</span>
    <div class="flex flex-col items-center gap-4">
      
      <div class="flex flex-row items-center gap-2">

<span class="chip py-1 pl-1 rounded-full">
          <div class="chip-icon-bg overflow-hidden">
            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde" alt="Example avatar" />
          </div>
          @account
        </span>

<span class="chip py-1 pl-1 rounded-full">
          <div class="chip-icon-bg">
            <span class="material-symbols-outlined !text-xs">mail</span>
          </div>
          me@myclo.ud
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>

<div class="flex flex-row items-center gap-2">

<span class="chip chip-tonal rounded-full py-1 pl-1">
          <div class="chip-icon-bg">
            <span class="material-symbols-outlined !text-xs">health_and_beauty</span>
          </div>
          Beauty
        </span>
        
        
        <span class="chip chip-tonal rounded-full py-1 pl-1">
          <div class="chip-icon-bg">
            <span class="material-symbols-outlined !text-xs">fastfood</span>
          </div>
          Fast Food
          <button class="material-symbols-outlined !text-xs cursor-pointer">close</button>
        </span>

</div>
    </div>
  </div>
</body>

Related Examples

Chip with logo

Fagundo67

3 years ago

13.5k
Tags list
click to remove the tag from list

Asher Wilde

3 years ago

12.1k
chip
Interactive and customizable chips or tags to display labels, categories, or filters. Includes options for removable chips with icons and different styles.

Abhiraj

1 year ago

2.3k
Info chips with icon

Bunny

3 years ago

10.6k
Company icons chips

Steven Kuhn

3 years ago

10.2k
Shopping cart

Ron Hicks

3 years ago

16.8k
Login

Aman kumar

1 year ago

1k
Dark Glassmorphism Login Form
A modern dark login interface with frosted-glass styling, ambient aurora glows, translucent input fields, and vibrant gradient accents.

JUGENDRA GANGWAR

6 days ago

95
modern portifolio
by salvator

Baraka Salvator

1 year ago

1.1k
Logo grid

ariaw

1 year ago

720
Welcome to Cinema
The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

Augustin

1 year ago

1.3k
image gallery
image gallery [lightbox]

Anonymous

3 years ago

20.9k