Intelligence Community Design System

There are two types of chip: dismissible chips and static chips. Dismissible chips have both filled and outline variants and are interactive, whereas static chips simply present information and aren't actionable.

Use a dismissible chip to show selected data from a user action that can be cleared by dismissing the chip. This is often used in the context of filtering and selection.

Use filled dismissible chips to provide high emphasis on the displayed information.

Use outlined dismissible chips to provide low emphasis on the displayed information.

Use static chips to display information that does not need clearing. They aren't interactive, so they don't present any action and they can't be dismissed.

Use dismissible chips when you need to choose multiple items from a list but need to show items after they've been chosen.

Common use cases include:

Use static chips when you need to simply display a piece of information with no interaction, such as a label.

Common use cases include:

Don't use dismissible chips where the user can't re-select the item presented in the chip.

For example, if used to show a selected filter, after dismissing the chip and clearing the filter, it can be applied again later.

Don't use dismissible chips when the user will not be able to re-select the dismissed item.

Allow users to re-select the item after it has been dismissed.

Don't use static chips to show status. Use status tags instead.

When using chips in a group, make sure they are left aligned and are positioned next to each other in a row.

Only position chips on multiple rows if there isn't enough horizontal space to show them on one, or if they are segmented into labelled groups.

Use concise labels for better readability. Longer labels will force the text to wrap.

Use an icon on the left of a dismissible or static chip to provide additional meaning.

When including an icon in a chip make sure that the icon is understandable and relevant to the information presented.

Always provide alternative descriptions for icons, or mark them as decorative. Don't use icons if they aren't necessary.