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.
<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>
Sizes - small segments
With labels
Add .btn-group-tabs-sm class to wrapper or have it on a smaller 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>
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 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.
Default size animated
<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>
Small size animated
<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>