Segment controls

Segmented button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing. The buttons are displayed as a horizontal group of buttons, where only one option can be selected at a time.

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 .spirisicon spirisicon-* icon class that you want. Here you can find a large selection of icons we provide.

Animated segmented controls

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

Small size animated