Chips and Tags

Chips are minimalistic elements that reflect statuses or a user’s input. For example, they allow users to enter data to filter content. Tags represent a label or categorization for elements like articles and help to filter content. This guide explains how to use them.

Chips and Tags
  • Usage
  • Examples
  • Related Components
  • Download



Chips appear in form fields – mainly in search bars – and are used as an indicator for filtered content. They reflect the input a user types in. Chips can be manipulated by editing the text or deleted by clicking on the x.


Tags are used as plain text within a rounded box and can be interactive if needed. They can have two different states: default and disabled. When they are disabled, they can not be clicked.

Chip layouts

Chips can have various designs. You can add icons to the left or right of the text. Chips can be used as toggles and they can have multiple lines if the content is bigger. You can also add images in front of the text.


Related Components


If you download any document, you accept our Terms and Conditions.

Sketch UI Library
85.98 MB