Overview

There are three types: suggestion, filter and input.

Should I use chips or another component? Use chips if all of the following apply:

• There 2 or 3 options. If there are 4+, use a radio button list.
• Options are strong entity names (e.g.: access levels, roles, currency)
• Options are short.
• The options fit on one row.

If any of those don’t apply, use radio buttons, check marks, or alternative components.

Related components

 

Content

• Sentence case
• 1-3 words max (up to 15 characters)
• Strong entity names or description
• Think of them in context with the rest of the chips. Each chip should cover a specific ecosystem with no overlap with the next one. E.g.: Today/tomorrow/yesterday.

 

Types

Suggestion

(single select)

 

Filter

(multi-select)

 

Input

 

Best Practices

 

Resources

(internal only)

Figma

Storybook