It would be very convenient to display certain component variant combinations in the same row. For example:
• I have 12 button colors
• I have 3 button styles (outline, solid, soft)
• It would be nice to display all the
◦ [style-outline, blue, green, gray, etc.] in one line and
◦ [style-solid, blue, green, gray, etc.] in one line and so on…
Right now it gets very confusing, especially because we can’t rearrange the combinations in any way
For example, I already have a couple combinations that I added. Now I need to add
• Global dark variants for all the colors
• Combining the “color” variant with “outline” is not as straight forward, as I need to update the text color from white to the respective color for every color variant. There is no way to automate this at the moment.
• If I want to add a color later on, there will be random combinations that are not grouped logically below the grey line
• Long story short: I want to group combinations based on the first variant combo selected
I think the point of parametric component variants is so that you don’t need to worry about all possible combinations anymore (like in Figma), they just works, if you want to fine tune certain combination you can scroll down below the gray —— separator and click plus on combinations. You can also add a new page to experiment and debug all combinations
Other wise you would see 60 button variants based on your screen shot alone :rolling_on_the_floor_laughing: add one additional property then it will be 120, which is impossible to scale and manage, hence you got parametric component variants
I’m aware of the fine-tuning aspect, I just want to order/group the ones I need in a way that makes sense
In that regard, adding a new page with button instances is the best option, as you get to freely arrange things
For example, I already have a couple combinations that I added. Now I need to add
• Global dark variants for all the colors
• Combining the “color” variant with “outline” is not as straight forward, as I need to update the text color from white to the respective color for every color variant. There is no way to automate this at the moment.
• If I want to add a color later on, there will be random combinations that are not grouped logically below the grey line
• Long story short: I want to group combinations based on the first variant combo selected
Yes, changing the button text color can be a pain, I have this issue too, but have you tried making the inner text its own component with a light/dark toggle? In that case the text color should become very logical
Do you have an example of how you solved this?
I would need to change the text colors and icon colors to specific values for each variant.
Here’s an example I just made for you, 0 combinations for 13 colors, all with different icon+text color
Thanks for this! Now I see what you mean. I’ll see how I can implement this into my project. This should really be part of the docs 
Ah, now that I played around with it I’m not sure it works the way I need it to. I added a type:outline variant and there I would need to add combos again. I tried to illustrate here
Yes, combinations does serve a purpose, but decoupling it like this will yield ÷2 times the combinations needed
Ah, so you’re using an “inverted” variant too
I might need to add a hidden background for the soft variant though…
Yes, I just created that, to further help decoupling the logic a bit, so now with only 4 combiniations in the content component, I think this is as simple as it can get
