# SegmentedControl Layout Mode

The SegmentedControl supports two layout modes that control how items are distributed horizontally. To set the layout mode, use the [`layoutMode`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops#layoutmode) property.

The `layoutMode` option supports the following values:

* `compact` (Default)—Items are sized based on their content.
* `stretch`—Items stretch equally to fill the available horizontal space.

The following example uses a SegmentedControl to switch between the equal-width (`stretch`) and content-based (`compact`) layout modes of a status filter.

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

## Suggested Links

* [Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/appearance)
* [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)