Appearance
The SegmentedControl provides a set of built-in options to control its visual presentation.
Configurator demo
The following example demonstrates configuring the different aspects of the SegmentedControl appearance through a configurator.
SegmentedControl Size
The SegmentedControl provides the size property that enables you to control how big or small the rendered control will be.
The available size options are:
smallmedium(default)large
SegmentedControl Roundness
The SegmentedControl provides the rounded property that enables you to control the border radius of the component. The theme applies the matching border radius to the selection indicator and the items, so they stay aligned with the outer edge of the component.
The available roundness options are:
nonesmallmediumlargefull
When you do not set the rounded property, the theme defines the border radius of the component.
SegmentedControl Icons
Each item in the SegmentedControl accepts the svgIcon property to display an SVG icon. You can use icons from the @progress/kendo-svg-icons package or define custom SVG icon objects. Icons can be combined with text, used alone (with a title for accessibility), or omitted for text-only items.
SegmentedControl Icon Class
The iconClassName property applies a custom CSS class to the icon element only when the item is selected. This allows you to style the active icon differently from unselected ones—for example, changing its color or applying a transform.
The following demo shows how selecting an item applies a custom CSS class that changes the icon color of the active segment: