style_variants_button_component_with_intent_and_size.ts

1import { variants } from 'style-variants';
2
3const button = variants({
4  base: 'px-4 py-2 rounded font-medium transition-colors',
5  variants: {
6    intent: {
7      primary: 'bg-blue-500 text-white hover:bg-blue-600',
8      secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
9      danger: 'bg-red-500 text-white hover:bg-red-600',
10    },
11    size: {
12      sm: 'text-sm',
13      md: 'text-base',
14      lg: 'text-lg',
15    },
16  },
17  defaultVariants: {
18    intent: 'primary',
19    size: 'md',
20  },
21});
22
23// Use it like this:
24const className = button({ intent: 'danger', size: 'lg' });
25// Result: "px-4 py-2 rounded font-medium transition-colors bg-red-500 text-white hover:bg-red-600 text-lg"