#Overview

A chip allows users to filter content (interactive) or view an element’s status (static).

The multi-chip currently exists only within a grid and cannot be combined with the single chip (the one exception is mobile product filters).

1. Single chip
2. Multi chip
3. Static chip

#When to use

• To filter content
• To display a static status that represents a user’s selection (currently only used within the context of filters)

#Don’t use for

• Displaying a static status with only numbers (use a Badge)
• To tag an object according to provided keywords, so that the user can classify and identify the object at a glance (use a Label)

#Anatomy

#Single chip (interactive)

1. Container
2. Filter label
3. Count (optional)

#Multi chip (interactive)

1. Container
2. Category label
3. Icon button
4. Selected filter options
5. Divider
6. Remove icon
7. Left interactive area
8. Right interactive area

A selected multi-chip displays its respective overlay as either a list or range.

1. Filter overlay – List
2. Filter overlay – Range

#Static chip

1. Container
2. Label

#Spacing

Interactive chips have 36px height on mobile and 32px height on desktop. Static chips always have 24px height.

Mobile

Desktop

1. Single chip
2. Multi chip (top: Galaxus, bottom: Digitec)
3. Static chip

Label width for single and static chips

We have defined min and max widths for the single chip label to ensure consistency in chip sizes and most importantly, to avoid excessively long chips on mobile. The max-width also applies to the static chip label.

1. Mobile min (32px)
2. Mobile max (144px)
3. Desktop min (56px)
4. Desktop max (208px)

#Best practices

#Interactive chips are filters, not tabs

Do

Use chips to filter related content.

Don't

Use chips as tabs between unrelated content.

#Single vs multi: one vs many

Do

Use a single chip to filter by one category at a time.

Don't

A single chip does not allow for selecting multiple filters under one category. Use a multi chip for this.

#Only multi chips can be cleared

Do

The selected filter(s) within a multi chip can be cleared in one go.

Don't

A single chip cannot be cleared.

#Multi chips have two interactive areas

Do

The left side (label) and right side (remove) within a multi chip are separate interactive areas.

Don't

The entire multi chip cannot be selected as one interaction area.

#Static chips are not interactive

Do

Use a static chip for read-only informative copy.

Don't

A static chip is not interactive and cannot be used for filtering.

#Use numbers wisely

Do

A single or static chip can display an optional count.

Don't

Use only numbers in a static chip. Use a Badge for this.

#Multi-chips sit within the grid

Do

The multi chip currently exists only within a grid. The single chip and multi chip remains separate.

Don't

A multi chip cannot be combined with a single chip (the only exception is mobile product filters).

#Placement

#Product filters

In the context of product filters, a single chip is known as a “quick filter”.

Mobile

Product filters have a unique behaviour on mobile that is not used elsewhere. Tapping a single chip (quick filter) transforms it into a multi chip.

This behaviour is only applicable to quick filters and should not be applied in any other context.

Any active filters are displayed in a static chip inside the mobile filters dialog. Note that the number “2” displayed next to “Filter” is a Badge.

Desktop

When selecting a single chip (quick filter), it disappears and displays inside the relevant multi chip below. This behaviour is only applicable to quick filters and should not be applied in any other context.

The “More filters” chip is used as a button to show or hide more product filters. This should also not be used in any other context.

#Product reviews

#Product Detail Page (PDP): Warranty & return rates dialog

#Recommender

The Recommender dialog can be accessed from the Cart page.

#Product Type page: SEO

Single chips are used at the bottom of a Product Type (PT) page to fulfil SEO requirements. This is a unique case because each chip behaves as a link to a new page.

#Community

The following feature is currently only available for users with the language set to German.

Mobile

Desktop

#Sale product range

#Magazine

#States

The hover, focus, selected and active hover states are not applicable to mobile.

#Single chip

Galaxus

Digitec

1. Normal
2. Hover
3. Focus
4. Active
5. Disabled

#Multi chip

Galaxus

Digitec

1. Normal
2. Hover
3. Focus-visible
4. Selected
5. Active
6. Active Hover (Left)
7. Active Hover (Right)
8. Disabled

#Behavior

The following behaviour is only applicable to quick filters and should not be applied in any other context.

#Product filters on desktop

Single chips (quick filters) briefly become active before they animate out and the respective multi chip becomes active.

• Transition when selecting single chip (part 1):
  immediately display chip as active
  after 750ms delay
  quickFilterShrink (shrink chip) and quickFilterGradientVanish (add gradient)
  transition-duration: 350ms;

• Transition when selecting single chip (part 2):
  after initial 750ms + 100ms delay
  quickFilterFadeOut (fade out chip)
  transition-duration: 250ms
  transition-timing-function: ease-out forwards;

• Transition when selecting single chip (part 3):
  after initial 850ms + 250ms delay
  quickFilterSpacingContract (chips move left to fill empty space)
  transition-duration: 150ms
  transition-timing-function: ease-out forwards;

• Transition when clearing multi chip to reset single chip (step 1):
  quickFilterFadeIn (fade in chip) and quickFilterGrow
  transition-duration: 350ms and 250ms (at same time)
  transition-timing-function: ease-in forwards;

• Transition when clearing multi chip to reset single chip (step 2):
  starts at same time as transitions above
  quickFilterFadeIn (fade in text inside chip)
  transition-duration: 400ms
  transition-timing-function: ease-in forwards;

#Product filters on mobile

A single chip (quick filter) transforms directly from its default state into an active multi chip. Any filters selected from the filters dialog also display as an active multi chip.