Chips provide a compact way to display information and enable user interaction. They should be used thoughtfully to enhance the user experience without overwhelming the interface.

Usage

Chips serve various purposes in user interfaces and can be applied in different contexts to improve usability and information display.

Filters

Chips are excellent for displaying active filters in search results, data tables, or content lists. They provide a clear visual indication of what filters are applied and allow easy removal.

Tags and Categories

Use chips to display tags, categories, or labels associated with content. They help users quickly understand the nature or classification of items.

Logo Chip

Chips can display icons alongside text labels for enhanced visual identification.

Status Indicators

Use colored chips to indicate status, priority, or state of items. The color should be meaningful and consistent with your design system.

Best Practices

• Keep chips simple and easy to understand.
• Use short, clear labels for each chip.
• Only add icons or colors when they add real value or meaning.
• Group related chips together for better organization.
• Maintain consistent spacing and alignment between chips.
• Avoid cluttering the interface with too many chips or styles.
• Ensure interactive chips have clear hover, focus, and active states.
• Use colors meaningfully and consistently (e.g., green for success, red for errors).