A React segmented control for switching between a small set of mutually exclusive web options.
Import the Segment component and access all parts using dot notation. Separators are optional; prefer omitting them by default and add them only when requested or when the control benefits from extra visual division.
import {Segment} from "@heroui-pro/react";
<Segment>
<Segment.Item id="monthly">Monthly</Segment.Item>
<Segment.Item id="yearly">Yearly</Segment.Item>
</Segment>;Place Segment.Separator inside each Segment.Item before the item content. Do not render
separators directly under Segment or between Segment.Item siblings.
Use variant="ghost" for a transparent container with an accent-colored selection indicator — ideal for inline or minimal UI contexts where the segment shouldn't draw attention to itself.
Use render props on Segment.Item to show only icons for unselected items and icon + label for the selected item. Combine with variant="ghost" and className="w-auto" on each item so they size to their content.
.segment - Base container with inline-flex layout and rounded corners.segment--sm - Small size (28px height, smaller padding).segment--md - Medium size (32px height, default).segment--lg - Large size (40px height, larger padding).segment--ghost - Ghost variant (transparent container, accent-colored indicator).segment__item--ghost - Ghost item (accent-foreground text when selected).segment__indicator--ghost - Ghost indicator (accent background, no shadow).segment__item - Individual toggle button.segment__item--sm / .segment__item--md / .segment__item--lg - Item size variants.segment__indicator - Animated selection indicator (positioned behind the selected item).segment__separator - Decorative divider between items (auto-hidden when adjacent to selected item)[data-selected="true"] on .segment__item (foreground color change):hover or [data-hovered="true"] on unselected .segment__item (opacity reduction):focus-visible or [data-focus-visible="true"] on .segment__item (focus ring):disabled or [data-disabled="true"] or [aria-disabled="true"] on .segment__item (reduced opacity)The root component. Wraps RAC ToggleButtonGroup with a single-selection API.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'ghost' | 'default' | Visual variant |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
selectedKey | Key | null | - | The key of the currently selected item (controlled) |
defaultSelectedKey | Key | - | The key of the initially selected item (uncontrolled) |
onSelectionChange | (key: Key) => void | - | Handler called when the selected item changes |
isDisabled | boolean | - | Whether all items are disabled |
children | ReactNode | - | Segment items |
Also supports all RAC ToggleButtonGroup props except selectionMode, selectedKeys, defaultSelectedKeys, and onSelectionChange.
An individual option wrapping RAC ToggleButton. Automatically renders a SelectionIndicator inside.
| Prop | Type | Default | Description |
|---|---|---|---|
id | Key | - | Unique key for this item |
children | ReactNode | ((renderProps) => ReactNode) | - | Item label or render function |
Also supports all RAC ToggleButton props.
Decorative divider between items. Render it as a child of Segment.Item, before the item label or
content. It is automatically hidden adjacent to the selected item.
Also supports all native span HTML attributes.