# SegmentedControl Appearance

The SegmentedControl provides predefined appearance options such as different sizes and border radii. If you omit an appearance property, the active Kendo theme supplies its default value. To control how item widths are distributed, see [Layout Mode](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/layout-mode).

Apart from the default vision of the SegmentedControl, these alternative styling options enable you to configure each individual aspect of the appearance of a SegmentedControl.

* [Size](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/appearance#segmentedcontrol-size)
* [Roundness](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/appearance#segmentedcontrol-roundness)

The following example demonstrates all the available appearance options of the SegmentedControl in a single, configurable demo.

[Demo Source](https://demos.telerik.com/kendo-react-ui/buttons/segmentedcontrol/appearance/func/source.txt)

## Size

The KendoReact SegmentedControl enables you to configure the size of its items by using the [`size`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops#size) property.

The [`size`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops#size) option supports the following values:

* `xs`
* `small`
* `medium`
* `large`

The following example demonstrates how to define the size of the SegmentedControl.

[Demo Source](https://demos.telerik.com/kendo-react-ui/buttons/segmentedcontrol/sizes/source.txt)

## Roundness

The SegmentedControl provides the [`rounded`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops#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 [`rounded`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops#rounded) option supports the following values:

* `none`
* `small`
* `medium`
* `large`
* `full`

[Demo Source](https://demos.telerik.com/kendo-react-ui/buttons/segmentedcontrol/rounded/source.txt)

## Suggested Links

* [Icon Options](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/icons)
* [Layout Mode](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/layout-mode)
* [Customization](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/customization)
* [Keyboard Navigation](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/keyboard-navigation)
* [API Reference of the SegmentedControl](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops)
* [API Reference of the SegmentedItemProps](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmenteditemprops)