I have a 4 category button group like below and a I want to have subtle color changes to each button so my team can visually see the difference.
You'll probably struggle to make the label background colour change, you could have a "fake" label or make the button colours themselves change?
Alternatively the Segmented Control has more flexible options than buttons and does the same job from a UI perspective.
Example of both options here, not sure if this is what you're after but may give you some ideas.
forum.json (5.1 KB)
A related question, when using a segmented control, is it possible to style the buttons so that they have more contrast, like Maning's example with a button group.
The image below has default colours in the top one, and then the second is only different by assigning a background colour.
The Labels colour seems to be related to the indicator background, so that if I change that, the labels (using Contrast text are all set to contrast with the Indicator background, and not with the colour of the unselected buttons.
Ideally, I would like to be able to define a selected button in (for example), Primary as background, Contrast text (white) for the Label. The unselected buttons would be the reverse, i.e. white background with Primary text Label.
Would I need to do this in CSS, or have I missed an option here?
Hey @jonj!
Thanks for the callout here, it would be good to be able to adjust the contrast text on unselected options in the segmented control. For now, you might be able to use some custom css to target just the selected option for your text color:
Alternatively, List Views now offer a horizontal option. It means you'll have some padding around the options you're configuring but it would let you style them based on their index:
Custom CSS is meant only to be a temporary workaround, the List View solution would be more permanent, but I'm curious to hear if either of these options work for you!
