New to Telerik UI for Blazor? Start a free 30-day trial
SegmentedControl Appearance
Updated on Oct 1, 2026
To control the appearance of the SegmentedControl, set the following parameters:
LayoutMode
The LayoutMode parameter controls how the items are sized within the control. Set it to a member of the SegmentedControlLayoutMode enum:
| Enum member | Description |
|---|---|
Compact (default) | Items are sized based on their content. |
Stretch | Items stretch to fill the available horizontal space equally. |
Compact
In Compact mode (the default):
- Each segment is as wide as its content (label, icon, and padding).
- Segments may have different widths depending on their content.
- The component's width equals the total width of all segments combined.
- The component does not fill its container.
Stretch
In Stretch mode:
- The component fills the full width of its container.
- All segments share the available width equally, regardless of their label length.
Compact and Stretch layout modes
Loading ...
Size
The Size parameter controls the padding of the Segmented Control items. Use the constants from the Telerik.Blazor.ThemeConstants.Button.Size class, or pass a custom string value:
| Class member | Value |
|---|---|
Small | "sm" |
Medium | "md" |
Large | "lg" |
Different sizes of the SegmentedControl
Loading ...