Chips
Chips are used to filter information based on predefined groups or aspects of the data, e.g. to quickly see only unread messages or messages from today. Chip groups containing several chips for a given attribute are usually used together with grids and simple search for fast access to predefined filters. They allow the users to narrow the information space by selecting a desired chip of the information.
Common chip groups in Visma are e.g. Document type (All/Invoices/Expenses/Time sheets), Status (Active/Inactive/All), and Date (Last week/Last month/Last year/All).
Use when
- Users need to filter large amounts of data in predefined ways.
- Filtering or sorting on a single column is not enough (e.g. ”View open issues” that would show both ”Open” and ”Unresolved” issues in an issue tracker system)
Design
There are 2 types of chips: default (.nav.nav-pills) and primary (.nav.nav-pills.nav-pills-primary). The difference between default and primary is visible only for the active state, see examples below.
Default
Primary
Sizes - Large chips
Fancy larger chips? Add .nav-pills-lg for a larger size.
Defaut
Primary