We use buttons for all clickable events. When passed an `href`, the button is rendered
as an anchor tag to leverage the browser's existing link behavior.

Learn more about why we choose anchor over button for links in this post by [Marcy Sutton](https://marcysutton.com/links-vs-buttons-in-modern-web-applications).

The `<Button>` component is bare without passing any prop. You can either set a token with the `is` prop or style as you intend with tailwind classes.
Please note, our design has zero hover effects if the `Button` is disabled, the mouse should remain as `cursor-default` instead of `cursor-not-allowed`, etc.

```jsx
<Button>Default</Button>
```

Tokens:

```jsx
const tokens = [
  "primary",
  "primary-blue",
  "secondary",
  "tertiary",
  "plain",
];

<div className="flex gap-2">
{tokens.map((token) => (
  <Button is={token}>
    {token}
  </Button>
))}
</div>
```

Size options:

```jsx
const sizes = ["sm", "md", "md with icon", "lg"];

<div className="flex gap-2 items-start">
{sizes.map((size) => (
  <Button is="primary" size={size.length < 3 ? size : 'md'} icon={size.length > 3 ? 'heart' : undefined}>
    {size} button
  </Button>
))}
</div>
```

Disabled state:

```jsx
<Button is="primary" disabled>Can't touch this</Button>
```

#### Using custom button colors
  When using custom colors, it is recommended to pass `is="plain"` to get default button styles along with
  the tailwind color being set.

```jsx
  <div className="flex flex-wrap gap-2">
    <Button is="plain">
      Plain
    </Button>
    <Button is="plain" className="bg-green-500 hover:bg-green-600 text-white">
      Green
    </Button>
    <Button is="plain" className="bg-blue-500 hover:bg-blue-600 text-white">
      Blue
    </Button>
    <Button is="plain" className="bg-yellow-500 hover:bg-yellow-600 text-white">
      Yellow
    </Button>
    <Button color="green">
      Deprecated green
    </Button>
    <Button color="blue">
      Deprecated blue
    </Button>
    <Button color="yellow">
      Deprecated yellow
    </Button>
    <Button color="light-green">
      Deprecated light-green
    </Button>
    <Button color="light-blue">
      Deprecated light-blue
    </Button>
    <Button color="light-yellow">
      Deprecated light-yellow
    </Button>
    <Button color="light-red">
      Deprecated light-red
    </Button>
  </div>
```

#### Using buttons with icons
See our list of available icons [here](#/Tokens/Icons).
```jsx
<div className="flex flex-wrap gap-1">
  <Button
    icon="heart"
    is="primary"
  >
    Unlock awesomeness
  </Button>
  <Button icon="times" is="secondary">
    Deprecated icon
  </Button>
</div>
```

#### Custom styled icons in buttons

```jsx
import Icon from "../icon";

<Button className="border-b-4 border-green-500 rounded-t-xl px-6 py-2 bg-light-blue text-blue-600 hover:bg-blue-500 hover:text-white"
>
  A ridiculous button <Icon name="gift" className="text-red-600 ml-2 text-xl" />
</Button>
```

#### Using the icon only buttons

```jsx
import { IconButton } from ".";

<div className="flex items-center">
  <IconButton icon="one-person" is="plain" label="User" className="mr-2" />
  <IconButton icon="email" is="primary" label="Envelope" className="mr-2" />
  <IconButton icon="drop" is="secondary" label="Droplet" className="mr-2" />
  <IconButton
    icon="target"
    className="bg-blue-50 flex-inline items-center justify-center px-3 py-2 rounded-full border-2 border-blue-500 text-xl text-red-600 mr-2"
    label="Circle button"
  />
  <IconButton icon="cheers" is="tertiary" label="Cheers" className="mr-2" />
  <IconButton icon="analytics" is="secondary" label="Analytics" />
</div>
```

#### Button groups

Here's a good read on [why we use aria-pressed](https://lea.verou.me/blog/2022/07/button-group/)

```jsx
import ButtonGroup from "./button-group";
import { IconButton } from ".";

<div>
  <section>
  <h3 className="font-semibold mb-2">Medium size button group</h3>
  <div className="flex items-start gap-2">
    <ButtonGroup spacing="1">
      <Button>Small</Button>
      <Button active>Medium</Button>
      <Button>Large</Button>
    </ButtonGroup>
    <Button is="secondary">An adjacent button</Button>
  </div>
  </section>
  <section className="mt-4">
  <h3 className="font-semibold mb-2">Large size button group</h3>
  <div className="flex items-start gap-2">
    <ButtonGroup spacing="1" size="lg">
      <Button>Small</Button>
      <Button>Medium</Button>
      <Button active>Large</Button>
    </ButtonGroup>
  </div>
  </section>
  <section className="mt-4">
  <h3 className="font-semibold mb-2">IconButton in button group</h3>
  <div className="flex items-start gap-2">
    <ButtonGroup>
      <IconButton icon="left" />
      <IconButton icon="right" />
    </ButtonGroup>
  </div>
  </section>
  <section className="mt-4">
  <h3 className="font-semibold mb-2">Full width button group</h3>
  <div className="flex items-start gap-2">
    <ButtonGroup size="lg" className="w-full">
      <Button>Small</Button>
      <Button>Medium</Button>
      <Button active>Large</Button>
    </ButtonGroup>
  </div>
  </section>
</div>
```

Vertical
```jsx
import ButtonGroup from "./button-group";
import Icon from "../icon";

<ButtonGroup orientation="vertical" spacing="1">
  <Button is="tertiary" size="lg">
    <Icon name="copy" />
  </Button>
  <Button is="tertiary" size="lg">
    <Icon name="delete" />
  </Button>
</ButtonGroup>
```
