Chip

When to use

Compact elements representing entities. selected filters, tags, user names. Supports removable chips.

Guidelines

• Removable when editable: If users can remove selections, show the X button.
• Consistent size: Keep all chips in a group the same height.
• Wrap gracefully: When chips overflow one line, wrap to the next row.

How it works

Skincare

Makeup

Haircare

Fragrance

Gisele Ayora

With Image