Imagine ArtImagine Art

Segmented Control

View in Figma

A group of mutually exclusive buttons for switching between related views or filters.

Navigation

Import

import { SegmentedControl } from "@/components/ui"

API

PropTypeDefaultDescription
optionsSegmentedControlOption[]Array of { value, label, icon?, disabled? } objects.
valuestringCurrently selected value.
onValueChange(value: string) => voidCallback when selection changes.
variant"primary" | "secondary" | "secondary-variant""primary"Visual style.
size"sm" | "lg""sm"Control height.

Examples