Blueweb
How to use
Use a Chip to show small pieces of information (like tags, filters, or choices) or to let users take quick actions (like removing a tag).
A Chip usually has a short label and may include an icon.
Place Chips close to related content. For example, below a search box or on a list filter bar. They help users understand options at a glance, choose filters, or delete items easily.
Types
Chips have different styles depending on their use.
Do’s and Don’ts
Do
Keep Chip text short and specific.
Use icons to give the users a better understanding of the content.
Don't
Don’t write full sentences inside a Chip
Accessibility
- Always include a text label inside the Chip so screen readers can describe it.
- If the Chip is dismissible, make sure the close icon is focusable by keyboard and has an aria-label.
- If Chips are used as filters and change the content on screen, make sure this change is announced for assistive technologies.
Content
- Use short and meaningful labels (usually 1–3 words).
- Choose words that reflect categories, tags, or quick filters, not full sentences.
- Write labels in sentence case: only capitalize the first word, unless it’s a proper name.
- Chips are not for giving feedback or long information — use them only for keywords or short actions.
Availability
Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.
Mobile
Kiosk
Design status
Ready