Appearance
The SegmentedControl provides a set of built-in options to control its visual presentation.
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 combine icons with text, use icons alone (with a title for accessibility), or render 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: