We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Yes
Styling the components that have variants, this also works really well with tailwind.
My guess would be this would work a bit like how collect-styled-components works but it would allow for CVA variables to be included.
Something like this:
import { Show } from '@builder.io/mitosis'; import { cva } from 'class-variance-authority'; export interface ButtonVariantTypes { intent: "primary" | "secondary" | "default"; size: "small" | "medium" | "large"; roundness: "square" | "round" | "pill"; } export interface ButtonProps { variants?: ButtonVariantTypes; type?: "button" | "submit" | "reset"; attributes?: any; text?: string; link?: string; openLinkInNewTab?: boolean; } export default function Button({ variants, type, attributes, text, link, openLinkInNewTab, }: ButtonProps) { const ButtonVariants = cva( /* button base style */ 'h-fit text-white uppercase transition-colors duration-150', { variants: { /* button colors */ intent: { primary: 'bg-green-500 hover:bg-green-600', secondary: 'bg-red-500 hover:bg-red-600', default: 'bg-gray-500 hover:bg-gray-600', }, /* button sizes */ size: { small: ['text-sm', 'py-1', 'px-2'], medium: ['text-base', 'py-2', 'px-4'], large: ['text-lg', 'py-4', 'px-8'], }, /* button roundness */ roundness: { square: 'rounded-none', round: 'rounded-md', pill: 'rounded-full', }, }, // defaults defaultVariants: { intent: 'default', size: 'medium', roundness: 'round', }, } ); return ( <> <Show when={link} else={<span {...attributes}>{text}</span>} > <button {...attributes} type={type} className={ButtonVariants( { intent: variants?.intent, size: variants?.size, roundness: variants?.roundness } )} role="button" href={link} target={openLinkInNewTab ? '_blank' : undefined} > {text} </button> </Show> </> ); }
https://cva.style/docs
The text was updated successfully, but these errors were encountered:
I would love to have this feature. Did you start working on it? :)
Sorry, something went wrong.
No branches or pull requests
I am interested in helping provide a feature!
Yes
Which generators are impacted?
What problem does this feature solve?
Styling the components that have variants, this also works really well with tailwind.
What does the proposed API look like?
My guess would be this would work a bit like how collect-styled-components works but it would allow for CVA variables to be included.
Something like this:
Additional Information
https://cva.style/docs
The text was updated successfully, but these errors were encountered: