Button

    <Arrange gap="s">
      <Button variant="accent">Accent</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="neutral">Neutral</Button>
    </Arrange>
  

    <Arrange gap="s">
      <Button icon={<IconDuplicate />} variant="accent">Button</Button>
      <Button icon={<IconDuplicate />} variant="danger">Button</Button>
      <Button icon={<IconDuplicate />}>Button</Button>
    </Arrange>
  

    <Arrange gap="s">
      <Button icon={<IconArrowLeft />} iconPosition="left">Button</Button>
      <Button icon={<IconArrowRight />} iconPosition="right">Button</Button>
    </Arrange>
  

    <Button onClick={() => alert('Nice')}>Click me</Button>
  

    <Box maxWidth={40}>
      <Button hasFullWidth>Button</Button>
    </Box>
  

    <Arrange gap="s">
      <Button icon={<IconArrowLeft />} iconPosition="left" isDisabled>Button</Button>
      <Button icon={<IconArrowRight />} iconPosition="right">Button</Button>
    </Arrange>
  

    () => {
      const [hasSpinner, setHasSpinner] = React.useState(false)
      return (
        <>
          <Button
            icon={<IconDownload />}
            hasSpinner={hasSpinner}
            isDisabled={hasSpinner}
            onClick={() => {
              setHasSpinner(true)
              setTimeout(() => setHasSpinner(false), 2000)
            }}
          >
            Download
          </Button>
        </>
      )
    }
  

    <Stack gap="s">
      <Button onClick={() => console.log('clicked')}>render "button"</Button>
      <Button tag="a" href="https://flodesk.com" target="_blank">render "a"</Button>
      <Button tag="span">render "span"</Button>
    </Stack>