Set state active with different variants?

[VictorMarcas]

Hello ,

I am building a button with different status color themes like hover, active and disabled. My question is how would I do that through an attribute in this case "active={true}" I can add the class active depending on the color theme you are using?

For example:

const link = cva(
 [
  
  "text-base",
  "leading-none",
  "py-3",
  "px-6",
  "inline-flex",
  "items-center",
  "justify-center",
  "transition-colors",
  "duration-200",
  "disabled:pointer-events-none",
  "disabled:cursor-default"
 ],
 {
  variants: {
   mode: {
       primary:
    "text-neutral-lightest hover:text-secondary-dark active:text-secondary-light disabled:text-primary-medium",
      neutral:
    "text-primary-dark hover:text-secondary-dark active:text-secondary-medium disabled:text-primary-light",
   },
   fullWidth: {
    true: "w-full",
   },
  },
 },
);

I have been able to do it arbitrarily, but I would like to know if there is any other better way with cva.

{
  variants: {
   mode: {
    primary:
     "text-neutral-lightest hover:text-secondary-dark active:text-secondary-light disabled:text-primary-medium [&.active]:text-secondary-light",
    neutral:
     "text-primary-dark hover:text-secondary-dark active:text-secondary-medium disabled:text-primary-light [&.active]:text-secondary-medium",
   },
  },
 },

/*component */
className: link({ mode, fullWidth, className: active && "active" }),