const Button = styled('button', { base: { borderRadius: 6, }, variants: { color: { neutral: { background: 'whitesmoke' }, accent: { background: 'slateblue' }, }, rounded: { true: { borderRadius: 999 }, }, }, compoundVariants: [ { variants: { color: 'neutral', rounded: true, }, style: { background: 'ghostwhite' }, }, ], defaultVariants: { color: 'accent', }, }); <Button color="neutral" rounded> Cli
![macaron — Colocated CSS-in-JS with zero-runtime](https://cdn-ak-scissors.b.st-hatena.com/image/square/daa8dcb13580fb9ba64e4c1f3785e676dbcc5458/height=288;version=1;width=512/https%3A%2F%2Fmacaron.js.org%2Fshare.jpg)