Whats the recommended way of approaching "references"? #245
Unanswered
lstephensca
asked this question in
Q&A
Replies: 1 comment
-
you want "compound variants". export const baseButtonVariants = cva({
base: "relative flex w-full transition-all duration-100 ease-in-out",
variants: {
type: {
primary: "",
accent: "",
},
primaryColor: {
rose: "",
orange: "",
},
accentColor: {
rose: "",
orange: "",
},
},
compoundVariants: [
{
intent: "primary",
primaryColor: "rose",
className: "bg-rose-500"
},
]
}); compoundVariants can be though of as situational overrides. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I didn't really know the best title for this, so if it is too vague please let me know. I might be trying to fit a square peg in a round hole here, but I have been trying to figure the best way around this. I am trying to find a way to correlate the buttons "type" with what colors are available to choose from. For example, if "primary" is used as the type and "rose" is used for the color, the class would be "bg-rose-500". Thus far, I have created a baseButtonVariant and have it set up:
In my mind this makes sense, but I can't seem to perform the mental gymnastics to connect the "type" to the corresponding colors. I was not sure if this was even possible or if there was a better way of going about this.
Beta Was this translation helpful? Give feedback.
All reactions