Chips

A component to display a filter or a property with the possibility to remove the property.

Short description

To display a property in an intuitive and easy way. Like in a filter.

When and how to use it

In views where a property needs to be displayed with the possibility to remove the property and it will be removed directly.

If you only want to display status', use the Badge component.

Behaviour

Updates directly, clear message what it contains. Remove the property on click.

Do's and don'ts

Do

  • This component is static and always clickable

Don't

  • Avoid using other colours

 

 

Measurements

  • Height: 32 px
  • Fill: Grey 200 #E9E9E9
  • Border-radius: 4px
  • Padding: 8px left-right-top-bottom
  • Font: Medium 16 px

States