joe-bell / cva

Class Variance Authority
https://cva.style
Apache License 2.0
5.78k stars 110 forks source link

Conditional variants based on other variants #249

Closed Sicria closed 10 months ago

Sicria commented 10 months ago

Is it possible to define a different class set based on one of the variants?

Eg. If a button has the below classes, is it possible for rounded to define a new set of classes for size so that if you provide rounded it could use something like sm: 'p-3' so that it is actually rounded.

Currently to achieve this you'd have to do something like <Button rounded className="p-3"> which makes the size somewhat useless.

const buttonVariants = cva(
  'block',
  {
    variants: {
      size: {
        sm: 'py-2 px-3',
        md: 'py-3 px-4',
        lg: 'p-4 sm:p-5',
      },
      rounded: {
        true: 'rounded-full',
      },
    },
    defaultVariants: {
      size: 'sm',
    },
  },
);

Maybe I'm missing something and this is already possible though?

joe-bell commented 10 months ago

https://cva.style/docs/getting-started/variants#compound-variants