compound variant in action for function component

[kEND]

I've been following the docs and been unable to get a compound variant to work. It seems that there may be a level missing or, more likely, I'm complete misunderstanding them.

Any examples you can point to would be great.

Here's what we're doing. We've defined an intent variant on button/1 with several values, e.g. primary, secondary, etc. We've defined a color variant. Our app has two main areas and we differentiate them, in part, based on color.

So, I want a primary red button, I can do <.button intent="primary" color="red" ... My understanding of a compound variant would allow us to specify primary_red in some manner to include classes from both intent="primary" and color="red".

How do we indicate in the instance of the function component that we want a compound variant?

[benvp]

If I understand you correctly, that's not quite how compound variants work.

As in the example of the docs, a compound variant will look for already defined variants and apply classes if all other variants match.

 variant :intent, [
      primary: "bg-cyan-600",
      secondary: "bg-gray-200"
    ],
    default: :secondary

  variant :color, [
      red: "text-red-500",
      blue: "text-blue-400"
    ],
    default: :red

  compound_variant "uppercase", intent: :primary, color: :red

This will apply the class uppercase to all components which have the primary intent and the color red.

<.button intent="primary" color="red">Click<./button>
# -> This will add the class `uppercase`

If you just want a red primary button, the way how you are using it is fully correct.

[kEND]

Awesome! Thank you for clarifying this. I was definitely misunderstanding how the compound variants work.