Export variants with cn
Answered
Japanese Bobtail posted this in #help-forum
Japanese BobtailOP
Hi there. Is it possible to export the button variants (const variants) with cn? I want to prevent the multiple use of cn outside the component. My usecase is:
´import { cn } from '../Utils';
import { Variants } from '../Button';
<Link
href='...'
className={cn(Variants({ ... }))}
>...</Link>´
Here you find the button component:
https://paste.gg/p/anonymous/5afc2a4615f94214bd76aff3ffd2443b
´import { cn } from '../Utils';
import { Variants } from '../Button';
<Link
href='...'
className={cn(Variants({ ... }))}
>...</Link>´
Here you find the button component:
https://paste.gg/p/anonymous/5afc2a4615f94214bd76aff3ffd2443b
Answered by B33fb0n3
Use it like
className={cn(buttonVariants())}. If needed you can then also add more classes to it: className={cn(buttonVariants(), "w-full")}2 Replies
@Japanese Bobtail Hi there. Is it possible to export the button variants (const variants) with cn? I want to prevent the multiple use of cn outside the component. My usecase is:
´import { cn } from '../Utils';
import { Variants } from '../Button';
<Link
href='...'
className={cn(Variants({ ... }))}
>...</Link>´
Here you find the button component:
https://paste.gg/p/anonymous/5afc2a4615f94214bd76aff3ffd2443b
Use it like
className={cn(buttonVariants())}. If needed you can then also add more classes to it: className={cn(buttonVariants(), "w-full")}Answer