SegmentedButton - cannot specify size of the button

[milemons]

Describe the bug
I'd like to be able to specify the SegmentedControl.Button as a small size as I can with other buttons
size is not a supported prop of SegmentedControl.Button - so I tried setting the fontSize through sx prop and it still has no effect.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://primer.style/react/SegmentedControl
2. Note that size is not a supported prop for the Button
3. Add sx={{fontSize: 0}} to one of the buttons
4. Notice that nothing changes

Expected behavior
I expect some way to customize the size of these buttons

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 104

[mperrotti]

@milemons - we intentionally shipped SegmentedControl with 1 size to start, and agreed we could add more if the use case came up.

Could you tell us more about your use-case for a smaller SegmentedControl size?

---

The sx prop not changing styles is a bug. From a quick glance, I'm not sure what's causing that bug and I think we'll need a little more time to triage.

[lesliecdubs]

Hi there! I think there's two concerns in this issue; for our own tracking purposes, I'm going to split them out so we can better address them directly. Feel free to subscribe to #2286 if you'd like updates on the bug where sx props are not applying correctly. Thanks!

[milemons]

Hello @mperrotti! We are trying to use segmented button on a page to toggle between Code/Blame views. The designs currently have all buttons specified to size small since large buttons would take up too much space. Feel free to poke at the designs on the figma

[colinwm]

@lesliecdubs @mperrotti as Michelle said, we really need this smaller version for the new code view which will be shipping at Universe!

Note how the code/blame toggle is excessively large and doesn't fit with the right-aligned buttons. Is there any way we can urgently prioritize this? Members of our team would be happy to write the code, FWIW

[mperrotti]

Thanks @milemons and @colinwm, and sorry for the delayed response. I'm planning to add size options this week. I'll post an update when the PR is up.

[mperrotti]

A PR has been opened: #2347

[mperrotti]

The PR has been merged and the size prop will be available on SegmentedControl in the next @primer/react release.