Segment

Usage

"use client";

import { Segment } from "@thenamespace/uikit";

const items = [

Anatomy

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 "@thenamespace/uikit";

<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.

Ghost

"use client";

import { Segment } from "@thenamespace/uikit";

export const DemoGhostExample = () => (

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.

With Separators

"use client";

import { Segment } from "@thenamespace/uikit";

const items = [

Controlled

"use client";

import type { Key } from "react-aria-components";

import { useState } from "react";

Disabled

"use client";

import { Segment } from "@thenamespace/uikit";

const items = [

Disabled Item

"use client";

import { Segment } from "@thenamespace/uikit";

export const DemoDisabledItemExample = () => (

Sizes

"use client";

import { Segment } from "@thenamespace/uikit";

const items = [

Theme Switcher

"use client";

import { Segment } from "@thenamespace/uikit";

import { Icon } from "@/demos/icon";

Two Items

"use client";

import { Segment } from "@thenamespace/uikit";

export const DemoTwoItemsExample = () => (
  <Segment defaultSelectedKey="monthly" size="sm">
    <Segment.Item id="monthly">Monthly</Segment.Item>
    <Segment.Item id="yearly">Yearly</Segment.Item>
  </Segment>
);

With Icons

"use client";

import { Segment } from "@thenamespace/uikit";

import { Icon } from "@/demos/icon";

Icon Expand

"use client";

import { Segment } from "@thenamespace/uikit";

import { Icon } from "@/demos/icon";

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.

CSS Classes

Base & Size Classes

• .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)

Variant Classes

• .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)

Element Classes

• .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)

Interactive States

• Selected: [data-selected="true"] on .segment__item (foreground color change)
• Hover: :hover or [data-hovered="true"] on unselected .segment__item (opacity reduction)
• Focus visible: :focus-visible or [data-focus-visible="true"] on .segment__item (focus ring)
• Disabled: :disabled or [data-disabled="true"] or [aria-disabled="true"] on .segment__item (reduced opacity)

API Reference

Segment

The root component. Wraps RAC ToggleButtonGroup with a single-selection API.

Also supports all RAC ToggleButtonGroup props except selectionMode, selectedKeys, defaultSelectedKeys, and onSelectionChange.

Segment.Item

An individual option wrapping RAC ToggleButton. Automatically renders a SelectionIndicator inside.

Also supports all RAC ToggleButton props.

Segment.Separator

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.