Components

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.

Usage
  • Usage
  • Examples
  • Related Components
  • Download

Usage

Chips

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

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.

Examples

Related Components

Download

Sketch UI Library
ZIP
85.97 MB