Segment

Stable
WCAG 2.2 evidence
RTL

One option of a {@link SegmentedControl }. Inside the control it is a radio (aria-checked) and the control owns the selection; arrow keys move focus between segments and Enter or Space selects (WCAG 2.1.1, 4.1.2). Built on React Aria ToggleButton; Figma advises against using it on its own, where it would be a toggle button with isSelected / defaultSelected / onChange. The selected segment differs by elevation (raised fill, Shadow/sm) and weight (Body/Strong), not by colour alone (WCAG 1.4.1). Consumer duties: short, translated labels and a Tooltip for icon-only segments.

import { Segment } from "@nexera-ui/react";

Loading example…

3
examples: 18
props: 2
live controls: 1
platform: 10
WCAG criteria: 10
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

isSelectedfalse

isDisabledfalse

Generated code

import { Segment } from "@nexera-ui/react";

<Segment />

Examples 2

The same examples as Storybook, rendered live. Open Code to copy one.

With icon

Figma Show icon: a 16 px icon 6 px before the label, or an icon-only segment named by aria-label.

Loading example…

app.tsx

import { Segment, SegmentedControl } from "@nexera-ui/react";
import { LuCalendarDays, LuList } from "react-icons/lu";

export function WithIcon() {
  return (
    <SegmentedControl aria-label="Layout" defaultSelectedKeys={["list"]}>
      <Segment id="list" label="List" icon={<LuList />} />
      <Segment id="calendar" label="Calendar" icon={<LuCalendarDays />} />
      <Segment id="calendar-only" aria-label="Calendar (compact)" icon={<LuCalendarDays />} />
    </SegmentedControl>
  );
}

Disabled

Figma Disabled state, on one segment and on a whole control (the selected chip stays visible).

Loading example…

app.tsx

import { Segment, SegmentedControl } from "@nexera-ui/react";

export function Disabled() {
  return (
    <div className="flex flex-col items-start gap-4">
      <SegmentedControl aria-label="View" defaultSelectedKeys={["day"]}>
        <Segment id="day" label="Day" />
        <Segment id="week" label="Week" isDisabled />
        <Segment id="month" label="Month" />
      </SegmentedControl>
      <SegmentedControl aria-label="View (read only)" isDisabled defaultSelectedKeys={["week"]}>
        <Segment id="day" label="Day" />
        <Segment id="week" label="Week" />
      </SegmentedControl>
    </div>
  );
}

Props 18

Press "Try it" on a card to load that prop into the playground.

id*Nexera

Key

Key of the segment in the SegmentedControl selection (selectedKeys, onSelectionChange). Required: without it the control cannot track the segment. On a standalone segment it is used as the DOM id.

iconNexera

ReactNode

Icon before the label. 16 px, decorative, shown when provided. An icon-only segment needs aria-label or aria-labelledby.

classNameNexera

string

Extra classes, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style.

labelNexera

VisibleContent

Visible label, for example "Week" or "3M". It is the accessible name; it wraps. No visible label.

aria-labelNexera

string

Overrides the name given by label. Avoid: the name must contain the visible text (WCAG 2.5.3). Accessible name of an icon-only segment. Translate it, and show the same text in a Tooltip. Accessible name; aria-labelledby wins when both are set.

aria-labelledbyNexera

string

Id(s) of element(s) that name the segment instead of label. Id(s) of element(s) that name the segment; wins over aria-label. Id(s) of visible element(s) that name the segment.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

isSelectedReact Aria

boolean

Whether the element should be selected (controlled).

defaultSelectedReact Aria

boolean

Whether the element should be selected (uncontrolled).

onChangeReact Aria

(isSelected: boolean) => void

Handler that is called when the element's selection state changes.

isDisabledReact Aria

boolean

Whether the button is disabled.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

5 direct · 5 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · supporting test
1.4.4Resize TextLevel AA · supporting test
1.4.11Non-text ContrastLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-focus-visible
data-hovered
data-selected

Usage

<Segment className="data-disabled:opacity-90 shadow-sm" />

Theme studio

Segment

Try every prop. Copy the code.

Examples 2

With icon

Disabled

Props 18

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components