Home
Nick Girga
Material 3 Chips [Light]

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 CSS v3. similar terms for this example is tags

Chip

Author Nick Girga

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

Company icons chips

Author:
Steven Kuhn

2 years ago

9k
Tags list
click to remove the tag from list

Author:
Asher Wilde

2 years ago

10.6k
Info chips with icon

Author:
Bunny

2 years ago

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

Author:
Abhiraj

5 months ago

961
Chip with logo

Author:
Fagundo67

2 years ago

12.4k
Order Sumamary
Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

Author:
Code huit

1 year ago

12.9k
Trading
used to trade something

Author:
nii fanny

3 weeks ago

11
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

1 year ago

9.3k
Continue with social login buttons (google, linkedin, twitter, facebook, github, apple)
Login/signup buttons for Google, LinkedIn, Twitter, Facebook, GitHub, and Apple

Author:
Prajwal Hallale

2 years ago

15.8k
Clean Pagination

Author:
Anonymous

5 months ago

622
Login Page Transition

Author:
Fatwa Bawahsi

2 months ago

511
Food App Web design

Author:
Aitrik Saha

3 months ago

827

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components