Chip
Chip represents entities using icons, labels and images.
When to use
- Use chips to show search, filter criteria or trigger action, which can be removed by user to reset the criteria.
- Chips are for interactive purposes and can be removed.
Guidelines
- Make sure the list of chips is not too long as it can cause cognitive overload.
- Ensure that the text on the chip matches the text of labels used in the search form.
- Chips only work if the search criteria labels are kept short.
- Chips can include icons before the text if required.
Basic
A basic chip with a text is created. In addition, when div with close button added, a close icon is displayed to remove a chip.
Action
Comedy
Mystery
Thriller
<div class="chip">
<div class="chip-content">Action</div>
</div>
<div class="chip">
<div class="chip-content">Comedy</div>
</div>
<div class="chip">
<div class="chip-content">Mystery</div>
</div>
<div class="chip">
<div class="chip-content">Thriller</div>
<div class="chip-close">
<button type="button" class="chip-close" aria-label="Close"><i class="ds ds-close-circle"></i></button>
</div>
</div>
Icon
A font icon next to the label can be displayed.
Apple
Facebook
Google
Microsoft
<div class="chip">
<div class="chip-icon">
<i class="ds ds-apple"></i>
</div>
<div class="chip-content">Apple</div>
</div>
<div class="chip">
<div class="chip-icon">
<i class="ds ds-facebook"></i>
</div>
<div class="chip-content">Facebook</div>
</div>
<div class="chip">
<div class="chip-icon">
<i class="ds ds-google"></i>
</div>
<div class="chip-content">Google</div>
</div>
<div class="chip">
<div class="chip-icon">
<i class="ds ds-microsoft"></i>
</div>
<div class="chip-content">Microsoft</div>
<div class="chip-close">
<button type="button" class="chip-close" aria-label="Close"><i class="ds ds-close-circle"></i></button>
</div>
</div>
Accessibility
- The button has an aria-label attribute that accurately identifies the button's function.
- To ensure compliance with WCAG 2.2, there is a 24px x 24px touch area for each chip's remove button.