SegmentedControl.Button should support `as` prop, similar to Button

[jbrown1618]

Describe the bug

We have designs that require us to use a segmented button control to navigate between pages. Semantically, and for accessibility reasons, these should be rendered as a tags, but this component forces us to use button tags.

I would like to do something like this:

<SegmentedControl aria-label="View mode">
  <SegmentedControl.Button as="a" href="path/to/page-1" selected={onPage1}>
    Page 1
  </SegmentedControl.Button>
  <SegmentedControl.Button as="a" href="path/to/page-2" selected={onPage2}>
    Page 2
  </SegmentedControl.Button>
</SegmentedControl>

Expected behavior

Ideally, the props for this component would simply extend the Button props.

Additional context

Reach out to me or to #repos-ux-refresh for details about our internal use case.

[lesliecdubs]

Thanks for reporting @jbrown1618. Since this isn't a pattern that's currently supported by the component, I wonder whether this is the best design approach for this problem. @tallys could you take a look at this and weigh in, or perhaps we can get connected with the designer who worked on this?

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.