UI Design

How to Design UI Chips

UI chips are small but powerful elements that make user interactions seamless and intuitive. Chips offer a compact way to represent information and enhance usability. In this guide, you’ll learn about chip anatomy, how to size them, the types and states of chips, and the principles of chip design. Let’s dive in!

The Difference Between Chips and Buttons

Buttons

Buttons in UI design appear consistently throughout the user interface with familiar CTA’s (calls to action).

Chips

Chips in UI design are used to make selections, filter content, trigger actions, or enter information. They appear dynamically as a group of multiple interactive elements.

Comparison of two mobile app interfaces. The left screen shows a Netflix-style layout with prominent buttons, including a highlighted button labeled 'Go to Fast Laughs.' The right screen displays a music or relaxation app using category chips such as 'Christmas sounds,' 'Sleep music,' and 'Winter stories,' positioned at the top.

Difference between Buttons and Chips

Anatomy and Sizes

In the example below, you can see the anatomy and sizes of UI design chips. It’s worth mentioning that using a smaller padding on the side with an icon helps achieve optical balance.

Diagram explaining the structure of UI chips. The top section labels components such as 'Container,' 'Icon (optional),' 'Text,' and 'Remove action (optional).' Below, two purple UI chips are shown with annotated spacing: one labeled 'Enabled' without an icon and another labeled 'Enabled' with an icon. Both chips include flexible and fixed spacing measurements for layout guidance.

Anatomy and sizes of UI chips

Chips in Popular Design Systems

In the photo below, we shared 4 popular design systems and their chip designs:

Comparison of different UI chip and tag styles from design systems. The top-left section shows 'Google Material (Chips)' with examples like 'Input,' 'Choice,' and 'Filter.' The top-right section displays 'Shopify Polaris (Tags)' with examples such as 'Removable' and 'Clickable.' The bottom-left section features 'IBM Carbon (Tags)' with tags like 'Platform' and 'Runtime.' The bottom-right section highlights 'Salesforce (Badges)' with a simple 'Badge Label.

UI chips in popular design systems

Types of Chips

There are many types of chips in UI design. Let’s name them all:

Input chips contain data that the user adds.
Choice chips are single selection chips for sets with more than two options.
Filter chips are filters for a collection.
Action chips are chips that contain suggested or automated actions related to content.

Choice chips can be a solid alternative to toggles, radio buttons, or single-select menus!

An overview of four types of UI chips with examples: 'Input chips' for user-added data, such as 'Pop,' 'Rock,' and 'Rap' with close icons; 'Choice chips' for single selection, including 'Small,' 'Medium,' and 'Large'; 'Filter chips' for filtering collections, such as 'Blue,' 'Red,' and 'Yellow'; and 'Action chips' for suggested actions like 'Send,' 'Save,' and 'Erase,' each with an icon.

Types of chips in UI design

Chip States

In the photo below, you can see different chip states in UI design. These states include enabled, disabled, focused, pressed, and selected, demonstrating how chips respond to user interactions.

Chip states in UI design

Principles of Chip Design

Chips are compact UI elements designed to enhance usability by facilitating selections, actions, and content sorting. Compact chips represent discrete information. Relevant chips offer a clear and helpful relationship to the content or task they represent. Focused chips facilitate task completion or content sorting.

Illustration explaining the principles of effective UI chips. Three sections are labeled: 'Compact' with an example of a small chip representing discrete information; 'Relevant' with a chip showing a clear relationship to the content or task it represents; and 'Focused' with a chip facilitating task completion or content sorting. Each principle is paired with a simple visual example.

Principles of chip design

Chips may be small, but their impact on UI design is anything but. By understanding their anatomy, types, and states, you can design chips that improve usability, facilitate task completion, and streamline user interactions. Use these principles to make your chips compact, relevant, and focused, turning them into indispensable UI design elements.

For other valuable educational resources, explore our Learn section. Here, we offer heaps of courses, workbooks, and other resources that will help you improve your skills in UX/UI.
Happy designing! 🤗