SegmentControl
A set of layered segments that are displayed one at a time.
Examples
Small
Preview
Content for Segment 1
Medium
Preview
Content for Segment 1
Large
Preview
Content for Segment 1
Disabled
Preview
Content for Segment 1
Icons only
Preview
Content for Segment 1
API
SegmentControl
| Property | Type | Default | Description |
|---|---|---|---|
| size | ”sm” | “md” | “lg" | "md” | Controls Trigger sizing; all triggers inherit from the parent. |
| className | string | - | Additional classes for the root container. |
| …props | React.ComponentProps<Tabs.Root> | - | Native props for Radix Tabs Root. |
SegmentControlList
| Property | Type | Default | Description |
|---|---|---|---|
| containerClassName | string | - | Classes applied to the scrollable wrapper (ScrollArea). |
| className | string | - | Classes applied directly to the list (Tabs.List). |
| …props | React.ComponentProps<Tabs.List> | - | Native props for Radix Tabs List. |
SegmentControlTrigger
| Property | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | - | Optional icon displayed to the right of the label. |
| badge | number | string | - | Optional badge displayed at the end; hidden for 0/”0”/empty. |
| badgeVariant | ”regular” | “freemium” | “error” | “warning" | "regular” | Visual style of the badge. |
| className | string | - | Additional classes for the trigger. |
| …props | React.ComponentProps<Tabs.Trigger> | - | Native props for Radix Tabs Trigger. |
SegmentControlContent
| Property | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes for the content. |
| …props | React.ComponentProps<Tabs.Content> | - | Native props for Radix Tabs Content. |
Last updated on