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!
Thank you @Kabirdas
Sorry for the very slow reply, I hadn't visited the community for a while.
Thank your for the two ideas. I got them both working by copying your code. I think I will probably use the Custom CSS with the Segmented Control, as although it was a little fiddly initially, it's more compact and was my original component choice.
Does this mean that having separate style options for Selecetd and background labels has been added to the Feature Request list, or should I do that?
Thanks,
Jon.
Kabirdas' code below if anyone wants to try this themselves
Segmented Control
(use the Styles options to control the "button" and background text colour, the CSS controls the selected text colour)
._retool-segmentedControl1 ._7k3xy {
color: white;
}
Horizontal Listview
(use buttons (in outline form) in a listview)
{{ i === 0 ? "red" : i === 1 ? "orange" : "green" }}
A request has been filed! Thanks for surfacing the issue here 
i'm shocked there isn't a more elegant solution. i guess i'm not clear what the point of the button group is if the clicked button doesn't look active?
