# Default Variants (https://www.tailwind-variants.org/docs/default-variants)

Set sensible default variant values on a recipe so call sites stay short, then override them only when needed.

Defaults apply when a variant key is omitted at the call site. Pass an explicit value to override any default.

## Setting defaults
Use `defaultVariants` to pick the variant value applied when a key is omitted:

```tsx
import { tv } from 'tailwind-variants';

const button = tv({
  base: 'inline-flex cursor-pointer items-center justify-center rounded-full font-medium select-none transition-colors',
  variants: {
    variant: {
      primary: 'bg-zinc-900 text-white',
      secondary: 'border border-zinc-300 bg-zinc-50 text-zinc-900',
      tertiary: 'text-zinc-700'
    },
    size: {
      sm: 'h-8 px-3 text-sm',
      md: 'h-10 px-4 text-sm'
    }
  },
  defaultVariants: {
    variant: 'primary',
    size: 'md'
  }
});

<button className={button()}>Primary, medium</button>
<button className={button({ size: 'sm' })}>Primary, small</button>
<button className={button({ variant: 'secondary' })}>Secondary, medium</button>
```

Only `size` is overridden on the second button. `variant` stays `primary`. Explicit props win when you need a one-off.