import { styled } from "@twind/react" const Box = styled() const Button = styled("button", { base: `  appearance-none border-none bg-transparent  rounded-full px-2.5  `, variants: { size: { sm: `text-sm h-6`, md: `text-base h-9`, }, variant: { gray: `  bg-gray-500  hover:bg-gray-600  `, primary: `  text-white bg-purple-500  hover:bg-purple-600  `, }, outlined: { true: `bg-transparent ring-1`, }, }, defaults: { variant: "gray", size: "sm", }, matches: [ { variant: "gray", outlined: true, use: `ring-gray-500`, }, { variant: "primary", outlined: true, use: `text-purple-500 ring-gray-500 hover:text-white`, }, ], }) <Box tw="m-2.5 flex flex-wrap" css={{ gap: "20px" }}> <Button>Button</Button> <Button variant="gray">Gray Button</Button> <Button variant="primary">Primary Button</Button> <Button variant="gray" outlined> Outlined Gray Button </Button> <Button variant="primary" outlined> Outlined Primary Button </Button> <Button variant="primary" outlined size={{ initial: "sm", lg: "md" }}> Responsive Primary Button </Button> </Box>