Chips

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

Overview

A chip is a small, interactive element representing an attribute or action.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2F8atCSov6KVkMchm0ZT8zeZ%2FShipfaster-UI---v2.7-(LIVE)%3Fnode-id%3D3836-66161%26t%3DIsUbgF59vjRUP8zU-1

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.
Previous

No previous post
Up next

No next post