Creating Multiple Variants

I am looking for a way to create multiple variants for buttons. For example, let’s say I want to have the following three variants:

1. Size (small, medium, large, etc).
2. Look (primary, secondary, disabled, etc).
3. Kind (default, outline, text, etc).

So that I could style a button like this:

<button
 sx={{
    size="buttons.size.large"
    kind="buttons.kind.outline"
    look="buttons.look.secondary"
 }}
/>

This IS possible with style system – here is an example:

• https://mathanpec.github.io/component-library/?path=/story/button--size-variant
• https://github.com/mathanpec/component-library/blob/basic-setup/src/theme/buttonStyle.ts

But I can’t figure out how to do with with Theme-UI.

Is this possible with Theme-UI? If so, can how can I do it?

Thanks.

[jxnblk]

We’ve discussed adding support for a variants key which would deep merge multiple variants, but haven’t introduced that yet

[CanRau]

How about comma separated strings? @jxnblk

Merry Christmas to y’all 🎅 🎉