Segmented Control

A segmented control changes the view of the given infographic.

Variants

A total of five different segmented-controls are available in GEL.

Demo

Guidance

• Segmented Control stay in cohesion with toolbars.
• Segmented control changes a view of a chart or table based on the selection made by the user.
• A maximum of 4 options can be used as required when creating a segmented control.
• Results after using a segmented control is effective immediately.
• Use short and consize naming convention enabling all the widths of the segment-control to be equal. Consider using a toolbar if the text is too long.
• The gap between control-buttons on the same line is spacer-2.

When to use

• Use segmented control when the user requires clear text displayed at all times.

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP