Segmented

One choice out of a short, fixed set, laid out as a single track with a thumb that slides between the options. A radio group that looks like a switch.

Basic

Pass options as strings, or as objects when one option needs more, like disabled on the Gantt view.

Controlled

Pass value and onChange to keep the selection in your own state, so other controls like the Next view button can change it.

Size

Set size to small or large beside the default medium, and the item corners stay concentric with the track.

Shape

Set shape to round to draw the track and the selected item as pills instead of rounded rectangles.

Block

Set block to stretch the track across its parent and share the width equally between the options.

Icons

Give an option an icon to show it before the label, like a check for passing builds and a cross for failing ones.

Icon-only options

Leave label out and put an icon with a hidden word in icon, plus a tooltip, for options that show only a glyph.

Rich labels

Pass label any node, so an option can carry a count, a Badge, a Tag, an avatar or a hint on a disabled option.

Stacked labels

Put an icon over a word in label for a taller option, with the icon taking a color when its option is selected.

Week strip

A strip of days built from two-line labels on a track with no background, with the weekend set to disabled.

Overflow menu

Put a Dropdown in the last option's label to keep a few views as options and move the rest into a menu.

Vertical

Set orientation="vertical" to stack the options, with labels or icons alone, for a side menu or a narrow toolbar.

Custom thumb

Style the selected item and the sliding thumb together with className, like a raised thumb or a flat gray one.

Custom track

Pass classNames.root and classNames.item to repaint the track, like a dark track with light text or a purple pill.

Dynamic options

options can change like any prop, and the track measures itself again and moves the thumb when you add options.

Radio group name

Set name to choose the name of the radio group the options form, which is generated for you when you leave it out.

In context

The component inside real screens, with the components it usually sits beside.

View switcher

A Segmented in a list header that switches the same projects between a table and a grid of cards.

Inbox filter

An inbox filtered by a Segmented with a count in each option, worked out from the same rule that filters the list.

Billing cycle

A pricing toggle between monthly and yearly billing, with the yearly saving shown as a Tag inside its option.

API Reference

Segmented
Segmented's props. Rows marked antuikit in the Version column are added by the kit.
SegmentedItemType
The fields of an object entry in options.