Facets

Definition: A facet button is an element that refines and narrows down a set of data by selecting specific criteria.

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.

Default variant


                                                        
                                                        
                                                            <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>

Storybook failed to load. Please connect to the VPN to access.

Primary variant


                                                        
                                                        
                                                            <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>

Storybook failed to load. Please connect to the VPN to access.

Size

Add .nav-pills-lg for a larger size.


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

Disabled state

To disabled the hole group/list add the .disabled class to the wrapper.

VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.