Facets/Pills

Facets/Pills 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. Facets groups containing several facets 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 facet of the information.

Common facets 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). Read more about facets in the UX Guidelines.

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 pills/facets: 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.

Defaut

					
Copy to clipboard
<ul class="nav nav-pills">
  <li class="active">
    <a href="#" role="button" aria-selected="true">Active</a>
  </li>
  <li>
    <a href="#" role="button">Normal</a>
  </li>
  <li class="disabled">
    <a href="#" role="button" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
  <li>
    <a href="#" role="button">Normal</a>
  </li>
</ul>

<!-- Or with 'button' tags -->
Copy to clipboard
<div class="nav nav-pills">
  <button type="button" class="active" aria-selected="true">Active</button>
  <button type="button">Normal</button>
  <button type="button" disabled>Disabled</button>
  <button type="button">Normal</button>
</div>

Primary

					
Copy to clipboard
<div class="nav nav-pills nav-pills-primary">
  <button type="button" class="active" aria-selected="true">Active</button>
  <button type="button">Normal</button>
  <button type="button" disabled>Disabled</button>
  <button type="button">Normal</button>
</div>

Sizes - Large pills/facets

Fancy larger facets/pills? Add .nav-pills-lg for a larger size.

					
Copy to clipboard
<ul class="nav nav-pills nav-pills-lg">
...
</ul>