Button

import Button from '@cronocode/react-box/components/button';

<Flex gap={4} flexWrap="wrap">
  <Button>Click me!</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="ghost">Ghost</Button>
</Flex>

<Flex gap={4}>
  <Button disabled>Disabled</Button>
  <Button variant="secondary" disabled>Disabled</Button>
</Flex>

<Flex gap={4} ai="center">
  <Button onClick={() => setCounter((c) => c + 1)}>
    Clicked
    {0}
    times
  </Button>
  <Button variant="secondary" onClick={() => setCounter(0)}>Reset</Button>
</Flex>

<Flex gap={4} flexWrap="wrap">
  <Button
    bgColor="emerald-500"
    hover={{ bgColor: 'emerald-600' }}
    theme={{ dark: { bgColor: 'emerald-500', hover: { bgColor: 'emerald-600' } } }}
  >
    Success
  </Button>
  <Button
    bgColor="rose-500"
    hover={{ bgColor: 'rose-600' }}
    theme={{ dark: { bgColor: 'rose-500', hover: { bgColor: 'rose-600' } } }}
  >
    Danger
  </Button>
  <Button bgImage="gradient-accent">Gradient</Button>
</Flex>

<Flex gap={4} ai="center" flexWrap="wrap">
  <Button py={2} px={3} fontSize={12}>Small</Button>
  <Button>Default</Button>
  <Button py={4} px={8} fontSize={16}>Large</Button>
</Flex>