SegmentedControl

Usage Guidelines

In addition to the guidelines for using the Telerik and Kendo UI ButtonGroup, the SegmentedControl requires you to follow some basic principles when using the multi-button component.

Keep Icons Consistent

Icons in a SegmentedControl should remain visually consistent regardless of whether a segment is selected or not. Changing icons between states can confuse users and make it harder to recognize options. Instead, rely on state styling—such as background, color, or emphasis—to indicate selection while keeping the icon itself unchanged.

DoKeep icons consistent and unchanged across active and inactive states.

Don'tAvoid replacing icons with checkmarks or alternate icons in the selected state.

Short and Simple

Use concise, one-word labels to keep segments readable and visually balanced.

DoKeep labels short and concise to improve readability and visual balance.

Don'tAvoid long, multi-word labels, as they reduce readability. In such cases, use the DropDownList component instead.

Consistent Size

All segments should have equal width to create a stable and predictable layout.

DoMaintain consistent button widths across all segments.

Don'tAvoid altering the width of individual segments.

Limit Segments

Use the SegmentedControl for switching between a small number of options, as too many segments can reduce readability and make the control harder to scan and use.

DoSegmented buttons are best used for selecting between 2 and 5 choices.

Don'tAvoid using too many segments, as this increases cognitive load, causes visual clutter, and reduces touch and click accuracy.

Text Truncation

Use text truncation only when space is constrained and the label meaning remains clear without the full text.

DoTruncate text only when absolutely necessary, and provide a tooltip or other indication on hover to show the full word.

Don'tAvoid truncating text without indicating the full word, as this can cause confusion and lead to a poor user experience.