#### Buttons are independent interactive elements used to trigger actions or to perform navigation.

### Choosing a variation
Our Styleguide defines 3 main variations based on the button visual prominence. As with any UI element, the prominence should be proportional to the importance of that element.
- Do mix variations as needed.
- Avoid having more than one Primary button, save this kind for the most important or most recommended action in a given screen.
- Use the Danger variation for destructive actions that delete data or lead to a state that is hard to recover. Danger buttons should _always_ have a confirmation dialog.
- In doubt, use Secondary buttons.
- Since reading speed can be slowed down by up to 20% when reading all caps (Breland & Breland - 1944), beware of "phrase long" button texts. Keep it short, and make your point in 3 words or less.


Types

```js
<div className="flex justify-center">
  <div className="flex flex-column items-center w-100">
    <span className="mb4">
      <Button variation="primary">Primary</Button>
    </span>
    <span className="mb4">
      <Button variation="secondary">Secondary</Button>
    </span>
    <span className="mb4">
      <Button variation="tertiary">Tertiary</Button>
    </span>
    <span className="mb4">
      <Button variation="danger">Danger</Button>
    </span>
    <span className="mb4">
      <Button variation="danger-tertiary">Danger Tertiary</Button>
    </span>
    <span className="bg-base--inverted w-100 pa4 flex justify-center">
      <span className="mb4">
        <Button variation="inverted-tertiary">Inverted Tertiary</Button>
      </span>
    </span>
  </div>
  <div className="flex flex-column items-center w-100">
    <span className="mb4">
      <Button variation="primary" disabled>Primary</Button>
    </span>
    <span className="mb4">
      <Button variation="secondary" disabled>Secondary</Button>
    </span>
    <span className="mb4">
      <Button variation="tertiary" disabled>Tertiary</Button>
    </span>
    <span className="mb4">
      <Button variation="danger" disabled>Danger</Button>
    </span>
    <span className="mb4">
      <Button variation="danger-tertiary" disabled>Danger Tertiary</Button>
    </span>
    <span className="bg-base--inverted w-100 pa4 flex justify-center">
      <span className="mb4">
        <Button variation="inverted-tertiary" disabled>Inverted Tertiary</Button>
      </span>
    </span>
  </div>
</div>
```

Sizes

```js
<div>
  <div className="mb4">
    <span className="mr4">
      <Button variation="primary" size="small">
        Small
      </Button>
    </span>
    <span className="mr4">
      <Button variation="primary">
        Regular
      </Button>
    </span>
    <span className="mr4">
      <Button variation="primary" size="large">
        Large
      </Button>
    </span>
  </div>
  <div className="mb4">
    <span className="mr4">
      <Button variation="secondary" size="small">
        Small
      </Button>
    </span>
    <span className="mr4">
      <Button variation="secondary" size="regular">
        Regular
      </Button>
    </span>
    <span className="mr4">
      <Button variation="secondary" size="large">
        Large
      </Button>
    </span>
  </div>
  <div className="mb4">
    <span className="mr4">
      <Button variation="tertiary" size="small">
        Small
      </Button>
    </span>
    <span className="mr4">
      <Button variation="tertiary" size="regular">
        Regular
      </Button>
    </span>
    <span className="mr4">
      <Button variation="tertiary" size="large">
        Large
      </Button>
    </span>
  </div>
  <div className="mb4">
    <span className="mr4">
      <Button variation="danger" size="small">
        Small
      </Button>
    </span>
    <span className="mr4">
      <Button variation="danger" size="regular">
        Regular
      </Button>
    </span>
    <span className="mr4">
      <Button variation="danger" size="large">
        Large
      </Button>
    </span>
  </div>
  <div className="mb4">
    <span className="mr4">
      <Button variation="danger-tertiary" size="small">
        Small
      </Button>
    </span>
    <span className="mr4">
      <Button variation="danger-tertiary" size="regular">
        Regular
      </Button>
    </span>
    <span className="mr4">
      <Button variation="danger-tertiary" size="large">
        Large
      </Button>
    </span>
  </div>
</div>
```

Box types

```js
<div>
  <div className="mb4">
    <Button variation="primary">Default</Button>
  </div>
  <div className="mb4">
    <Button variation="primary" block>
      Block
    </Button>
  </div>
</div>
```

Link mode

```js
<div className="mb4">
  <Button variation="primary" href="http://vtex.com" target="_blank">Sign in</Button>
</div>
```

Cancelling out button paddings. Useful for visually aligning tertiary buttons

```js
const Box = require('../Box').default

;<>
  <div className="flex justify-center">
    <div className="flex flex-column w-60">
      <div className="t-heading-6 mb4">Use collapse props when tertiary button is alone, to align it with the other elements</div>
      <div className="w-100 mb4">
        <Box />
      </div>
      <div className="mb4 flex justify-between">
        <Button variation="tertiary" collapseLeft>Collapse left</Button>
        <Button variation="tertiary" collapseRight>Collapse right</Button>
      </div>
    </div>
  </div>
  <div className="flex justify-center mt6">
    <div className="flex flex-column w-60">
      <div className="t-heading-6 mb4">Don't collapse when the button is not alone</div>
      <div className="w-100 mb4">
        <Box />
      </div>
      <div className="mb4 flex">
        <Button variation="tertiary">Default</Button>
        <div className="ml2">
          <Button variation="secondary">Another Button</Button>
        </div>
      </div>
    </div>
  </div>
  <div className="flex justify-center mt6">
    <div className="flex flex-column w-60">
      <div className="t-heading-6 mb4">Collapse props don't work on primary and secondary variations (and it shouldn't)</div>
      <div className="w-100 mb4">
        <Box />
      </div>
      <div className="mb4 flex justify-between">
        <Button variation="primary" collapseLeft>Collapse left</Button>
        <Button variation="primary" collapseRight>Collapse right</Button>
      </div>
      <div className="w-100 mb4">
        <Box />
      </div>
      <div className="mb4 flex justify-between">
        <Button variation="secondary" collapseLeft>Collapse left</Button>
        <Button variation="secondary" collapseRight>Collapse right</Button>
      </div>
    </div>
  </div>
</>;
```
Colored container background

```js
<div className="bg-warning--faded pa5">
  <div>
    <span className="mr4">
      <Button variation="primary">Primary</Button>
    </span>
    <span className="mr4">
      <Button variation="secondary">Secondary</Button>
    </span>
    <span className="mr4">
      <Button variation="tertiary">Neutral</Button>
    </span>
  </div>
  <div className="mt4">
    <span className="mr4">
      <Button variation="primary" disabled>Primary</Button>
    </span>
    <span className="mr4">
      <Button variation="secondary" disabled>Secondary</Button>
    </span>
    <span className="mr4">
      <Button variation="tertiary" disabled>Neutral</Button>
    </span>
  </div>
</div>
```

Loading state

```js
initialState = { isLoading1: true, isLoading2: true, isLoading3: true  };
<div>
  <div className="mt4">
    <Button
      variation="primary"
      onClick={() => setState({ isLoading2: !state.isLoading2 })}
      isLoading={state.isLoading2}
    >
      Toggle loading state
    </Button>
  </div>
</div>
```