# Layout Modes

The SegmentedControl supports two layout modes that control how segment widths are calculated and how the component fits within its container.

## Compact Mode

`Compact` is the default layout mode. In this mode:

* Each segment's width is determined by its content (label, icon, and padding).
* Segments can have unequal widths.
* The component's total width is the combined width of all its segments.
* The component does not stretch to fill its container.

```Razor HtmlHelper
@using Kendo.Mvc.UI

@(Html.Kendo().SegmentedControl()
    .Name("segmentedControl")
    .LayoutMode(SegmentedButtonLayoutMode.Compact)
    .Items(items =>
    {
        items.Add().Text("Day").Value("day");
        items.Add().Text("Week").Value("week");
        items.Add().Text("Month").Value("month");
    })
    .SelectedValue("day")
)
```

## Stretch Mode

In `Stretch` mode:

* The component expands to fill the full width of its container.
* All segments are equal width, regardless of label length.
* Each segment's width is calculated as the container width divided by the number of segments.

```Razor HtmlHelper
@using Kendo.Mvc.UI

@(Html.Kendo().SegmentedControl()
    .Name("segmentedControl")
    .LayoutMode(SegmentedButtonLayoutMode.Stretch)
    .Items(items =>
    {
        items.Add().Text("Day").Value("day");
        items.Add().Text("Week").Value("week");
        items.Add().Text("Month").Value("month");
    })
    .SelectedValue("day")
)
```

## See Also

* [SegmentedControl Overview (Demo)](https://demos.telerik.com/aspnet-mvc/segmentedcontrol/index)
* [SegmentedControl Server-Side API for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/api/segmentedcontrol)
* [SegmentedControl Client-Side API](https://docs.telerik.com/kendo-ui/api/ui/segmentedcontrol)