Chips

Chip represents entities using icons and labels. Chips should appear dynamically as group of interactive elements.

Variants

There is only one form of chip avaliable in GEL.

Demo

Guidance

• The Chips should have close button by default allowing users to delete the chips from the Select fields.
• The gap between two adjacent Chips inside an Input field and Select field should be equal to “Spacer 1”(4px) of the design token.
• The Select field will be appended with a “...” if the next Chips cannot fit in.
• Chips when used in filter control for chart should take into consideration the width of the available space. Show 1 chip followed by the number of options selected to indicate the number of selections made for that filter

When to use

• Chips are majorly used in the select state and chart filter under button control.

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP