Astryx Design System

Segmented Control@astryxdesign/core v0.0.15 · SegmentedControl

Usage

A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation.

ts
import {SegmentedControl} from '@astryxdesign/core/SegmentedControl'

Best practices

Guidance	Practices
Do	Use for switching between 2–5 mutually exclusive views or modes where all options should be visible.
Do	Provide a descriptive label for the control to ensure the group is accessible to screen readers.
Don't	Use for page-level navigation; use TabList instead. TabList is a navigation component, while SegmentedControl is an input that always has exactly one selected option.
Don't	Use for simple on/off states; use ToggleButton instead. ToggleButton can be toggled on or off independently, while SegmentedControl enforces a single selection from a group.

Examples

Common configurations, variations, and states.

SegmentedControl — Disabled Item

Segmented control with an individually disabled option for unavailable choices.

SegmentedControl — Fill Layout

Segmented control that stretches segments equally to fill the available width, useful for fixed-width containers.

SegmentedControl — Icon Only

Compact segmented control with hidden labels, showing only icons for space-constrained layouts.

SegmentedControl — With Icons

Segmented control with icon and label pairs for a view mode switcher.