Responsive variants
Pass a breakpoint object as a variant value. Config recipes only, and only when the recipe has no compounds.
A config recipe's variant can be a breakpoint object instead of a single value. size: { base: 'sm', md: 'lg' } means
the button renders sm below the md breakpoint and lg at or above it, the same mobile-first object you already
write for responsive styles:
import { button } from '../styled-system/recipes'
;<button className={button({ size: { base: 'sm', md: 'lg' } })}>Click me</button>Panda generates CSS for both values: sm unconditioned, lg behind the md media query. The generated types still
check the object against your real variant values, via ConditionalValue.
Only a config recipe (defineRecipe, defineSlotRecipe) can do this. Atomic recipes (cva and sva) have no
equivalent and no responsive variant form.
Compounds turn it off
Adding compoundVariants drops ConditionalValue from the generated types, so TypeScript won't even let you pass the
object. Do it anyway at runtime, and Panda throws instead of silently guessing:
[recipe:button:size] Conditions are not supported when using compound variants.
Same rule for slot recipes.
Consider rendering two views instead
A sm button below md and an lg button above it, written as two separate elements instead of one recipe call, is
usually easier to follow than a nested breakpoint object buried in a variant. Reach for the object above only when
rendering two views really isn't practical.