@xsolla/xui-segmented

Segmented control for switching between related views or filter options.

Installation

yarn add @xsolla/xui-segmented

Usage

import { Segmented } from '@xsolla/xui-segmented';

<Segmented
  items={[
    { id: 'day', label: 'Day' },
    { id: 'week', label: 'Week' },
    { id: 'month', label: 'Month' },
  ]}
  activeId="day"
  onChange={(id) => console.log(id)}
/>

Props

Segmented

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | SegmentedItemType[] | — | Array of segment items (required) | | activeId | string | — | ID of the currently active segment | | onChange | (id: string) => void | — | Callback when a segment is selected | | size | 'xl' \| 'lg' \| 'md' \| 'sm' | 'md' | Size variant | | stroke | boolean | false | Adds a border around the container | | fullWidth | boolean | false | Stretches the control to fill its container |

SegmentedItemType

| Field | Type | Description | |-------|------|-------------| | id | string | Unique identifier | | label | string | Display text | | icon | React.ReactNode | Optional icon | | disabled | boolean | Disables this segment |