How to Design UI Chips
Dec 5, 2024
·
2 min read
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.
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.
Chips in popular design systems
In the photo below, we shared 4 popular design systems and their chip designs:
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!
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.
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.
Conclusion
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.
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.
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.
Chips in popular design systems
In the photo below, we shared 4 popular design systems and their chip designs:
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!
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.
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.
Conclusion
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.
If you aren't following us on Instagram already, you're seriously missing out! Become a part of our ever-growing community and learn something new from the field of product design every. single. day.
Happy designing! 🥳
andrija & supercharge design team
If you aren't following us on Instagram already, you're seriously missing out! Become a part of our ever-growing community and learn something new from the field of product design every. single. day.
Happy designing! 🥳
andrija & supercharge design team
