A chip is a small, interactive element that represents an attribute, action, or piece of information. Chips can contain text, icons, or both.

Base Components


A chip is a small, interactive element representing an attribute or action.

When should you use them?

Use chips to display information compactly or to represent selections in a form or interface.

How should you use them?

  • Ensure chips are clearly labeled and easily distinguishable.
  • Provide adequate spacing between chips to prevent clutter.
  • Allow chips to be interactive, with clear affordances for actions like removal.
  • Use consistent styling for all chips in the interface.
  • Make sure chips are accessible, with proper ARIA roles and keyboard navigation.

No previous post
Up next

No next post