Segment controls

A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width. Like buttons, segments can contain text or images. Segmented controls are often used to display different views. In Maps, for example, a segmented control lets you switch between Map, Transit, and Satellite views.

We can offer two Visma examples as well, first, in Visma Real Estate it is used to display task view or listing view, and in Visma Recruit, it is used to display candidates in different parts of the recruitment process.

Use when:

The user needs to toggle between two views within the same context, for instance Map, Transit and Satellite views on a map.
The user needs to quickly view list items in a linear process, for instance candidates in a specific part of a recruitment process.
It is useful to see all the options available at one glance.
You want it to run on touch screens (too), as this is also a common design pattern in mobile apps.

Design

Add .btn-group-tabs class to the .btn-group to transform it in to segmented controls.

Sizes - small segments

With labels

Add .btn-group-tabs-sm class to wrapper or have it on a smaller size.

With icons

Add a <span> with the .vismaicon vismaicon-* icon class that you want. Here you can find a large selection of icons we provide.

Animated segmented controls

The functionality for this component, i.e. the script, is not provided!
The documentation has a demo functionality that you can draw inspiration from in your work.

Add .btn-group-animation class to .btn-group-tabs wrapper.

The active button is highlighted by the pseudo-element :before attached to the .btn-group-animation container/wrapper.

To move the active button, you need to get the active button width and position relative to the left of the .btn-group-animation container, and add it to the :before pseudo-element.

You can target the :before pseudo-element directly from the script and assign the value to width and transform: translateX(...) attribute or by adding the value (like in our script example) attached to the .btn-group-animation container the CSS custome propertis / CSS variables: --btn-grp-animation-width the width value of the active button and --btn-grp-animation-offset for the active button X axis offset from the left.

				
<!-- Segment controls -->
<!-- default size -->
<div class="btn-group btn-group-tabs" role="group" aria-label="Segmented controls">
   <button type="button" class="btn">Item 1</button>
   <button type="button" class="btn active" aria-selected="true">Item 2</button>
   <button type="button" class="btn">Item 3</button>
</div>

<!-- small size -->
<div class="btn-group btn-group-tabs btn-group-tabs-sm" role="group" aria-label="Segmented controls">
   <button type="button" class="btn">Item 1</button>
   <button type="button" class="btn active" aria-selected="true">Item 2</button>
   <button type="button" class="btn">Item 3</button>
</div>

<!-- animated segmented controls -->
<div class="btn-group btn-group-tabs btn-group-animation" role="group" aria-label="Segmented controls">
   <button type="button" class="btn">Item 1</button>
   <button type="button" class="btn active" aria-selected="true">Item 2</button>
   <button type="button" class="btn">Item 3</button>
</div>

<!-- only icons and animated small size -->
<div class="btn-group btn-group-tabs btn-group-tabs-sm btn-group-animation" role="group" aria-label="Segmented controls">
   <button type="button" class="btn" aria-label="Home button">
       <span class="mr-0 vismaicon vismaicon-sm vismaicon-home"></span>
   </button>
   <button type="button" class="btn active" aria-selected="true" aria-label="List view button">
       <span class="mr-0 vismaicon vismaicon-sm vismaicon-list-view"></span>
   </button>
   <button type="button" class="btn" aria-label="Settings button">
       <span class="mr-0 vismaicon vismaicon-sm vismaicon-settings"></span>
   </button>
</div>