Segmented Button Component

Component Name: SegmentedButton (or SegmentedControl)

Description:

I would like to request the addition of a Segmented Button component. It's a common UI pattern for presenting 2-5 mutually exclusive options, allowing users to switch between views, filter content, or select an item from a small set (e.g., Day/Week/Month view, List/Grid display).

Why this is valuable:

This component is a staple in modern design systems (like Material Design 3) and native frameworks (SwiftUI, Jetpack Compose). Adding it would:

1. Fill a gap in an otherwise excellent component library.

2. Save developers time from having to build and maintain this pattern manually with individual buttons.

3. Ensure consistency in look, feel, and accessibility across apps using HeroUI Native.

Ideal API / Props (Inspiration):

Ideally, it would support both single and multi-select, integrate with HeroUI's existing theme (size, color variants), and accept icons and/or text for each segment.

Example desired usage:

<SegmentedButtonGroup
  selectedValue={view}
  onValueChange={setView}
>
  <SegmentedButton value="day">Day</SegmentedButton>
  <SegmentedButton value="week">Week</SegmentedButton>
  <SegmentedButton value="month">Month</SegmentedButton>
</SegmentedButtonGroup>

Please authenticate to join the conversation.

Upvoters
Status

In Review

Board
πŸ’‘

Feature Request

Date

29 days ago

Author

Faizan gondal

Subscribe to post

Get notified by email when there are changes.