Segment Component Playground

Segmented control for selecting options (Figma node 1983-11633)

Props

Size

Show Icon

Active Segment

Preview

Code

<Segment
  items={[
    { value: "daily", label: "Daily", icon: "PieChart" },
    { value: "weekly", label: "Weekly", icon: "Calendar" },
    { value: "monthly", label: "Monthly", icon: "CalendarDays" },
    ...
  ]}
  value="daily"
  onValueChange={(value) => setValue(value)}
  size="lg"
  showIcon={true}
/>

Examples

Large (default)

Medium

Small

Without icons

With disabled item