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

Default state - .nav.nav-pills, and - larger variant - .nav.nav-pills.nav-pills-lg

Primary state - .nav.nav-pills.nav-pills-primary, and - larger variant - .nav.nav-pills.nav-pills-lg.nav-pills-primary

				
<!-- Default state - .nav.nav-pills -->
<ul class="nav nav-pills">
  <li class="active">
    <a href="#" role="button" aria-pressed="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 -->
<div class="nav nav-pills">
  <button type="button" class="active" aria-pressed="true">Active</button>
  <button type="button">Normal</button>
  <button type="button" disabled>Disabled</button>
  <button type="button">Normal</button>
</div>

<!-- Primary state - .nav.nav-pills.nav-pills-primary -->
<ul class="nav nav-pills nav-pills-primary">
...
</ul>