Nested variants?

[paulwongx]

Say I'm using cva for a button. Each button has variants: outline, subtle, ghost, link. But then there are colors too. Theoretically you'd need the different variants for each color, or each color for each variant. I know there are compound variants. Does cva support nested variants? If not, what is the best way to use the compoundVariants key? Are there examples for a button or something? Or is it recommended to create multiple cva and put them into an object with colors as the keys of those objects?

1. I'm not saying I want compound variants, but just looking for the recommended approach / or an example when there are a ton of variants like for a button (variants, color, primary/secondary) - these are all color based
2. Also, how can you set which varaint overrides another if several of them are color based?

[paulwongx]

Any idea on nested variants anyone?

[Yofamb]

What did you end up going with? I'm thinking of using compoundVariants like the following

      {
        variant: 'default',
        colour: 'default',
        class:
          'bg-neutral-75 text-neutral-900 hover:bg-neutral-100 disabled:bg-neutral-75',
      },
      {
        variant: 'default',
        colour: 'primary',
        class: 'bg-brand text-white hover:bg-brand-700 disabled:bg-brand',
      },

I then have colour variant that are just empty strings

      colour: {
        default: '',
        primary: '',
        secondary: '',
        destructive: '',
      },

[paulwongx]

@Yofamb I find the compound variants work well for one-off touch ups but when it's exponential like in a button it gets waay too messy for my needs. I ended up creating multiple cvas and putting them in an object and based on the prop passed in, the base cva will be called and also one of the cvas from the object. So for me, my button has a solid cva, ghost cva, subtle cva, outline cva, etc and a base one.

Just like what you said, my base cva has variants with styles that are just quotes that are placeholders so the typing is correct when defining the props for the component.

Also, I changed from using compoundVariants because after a while I got overwhelemed trying to add to and edit it. It becomes way too unstructured and all over the place for my usage.

[paulwongx]

@vfshera ^This was what I ended up with. Multiple cvas.

[vfshera]

@paulwongx did you get a solution?

I am also trying to make this work

export const btnColors  = {
  primary: {
    solid: "bg-primary text-white ",
    raised:
      "hover:[box-shadow:rgba(123,_107,_214,_0.42)_0px_14px_26px_-12px,_rgba(0,_0,_0,_0.12)_0px_4px_23px_0px,_rgba(123,_107,_214,_0.2)_0px_8px_10px_-5px]",
    outlined:
      "border border-primary text-primary hover:bg-primary hover:text-white",
  },
  secondary: {
    solid: "bg-secondary  text-white ",
    raised:
      "hover:[box-shadow:rgba(123,_107,_214,_0.42)_0px_14px_26px_-12px,_rgba(0,_0,_0,_0.12)_0px_4px_23px_0px,_rgba(123,_107,_214,_0.2)_0px_8px_10px_-5px]",
    outlined:
      "border border-secondary text-secondary hover:bg-secondary hover:text-white",
  },
  
  DEFAULT: {
    solid:
      "bg-white hover:border-[#b5b5b5] dark:hover:border-[#b5b5b5] dark:hover:text-[#323234] border border-fade-grey-2 dark:border-night-light-14  text-dark dark:text-smoke-white  dark:bg-night-light-6",
    raised: "",
    outlined: "",
  },
};
`