vcc-ui/_src/components/button/README.md

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

A Button component is either a `<button>` or `<a>` (if you pass it a href prop)

### Intent

Intent defines what kind of action the button is used for, it's appearance will change based on the intent.

```jsx live=true
<Button intent="primary">Confirm Purchase</Button>
```

### Variant

Variants are different visual representations of a button, some buttons are text only, some are outlined, and some are filled (default).

```jsx live=true
<React.Fragment>
  <Button intent="secondary" variant="default">
    Configure
  </Button>
  <Button intent="destructive" variant="text">
    Reject
  </Button>
  <Button variant="outline">Accept</Button>
</React.Fragment>
```

## Size

Buttons can have three different sizes: `small`, `medium` (default) and `large`

```jsx live=true
<React.Fragment>
  <Button size="small">Small World</Button>
  <Button>Hello World</Button>
  <Button size="large">Large World</Button>
</React.Fragment>
```

### Loading

Buttons have a loading state to indicate to the user that their request is being processed.

```jsx live=true
<React.Fragment>
  <Button loading>Hello World</Button>
  <Button loading intent="destructive" variant="text">
    Reject
  </Button>
</React.Fragment>
```

### Disabled

Buttons that are disabled can't be interacted with. The visual style of the button also changes to indicate to the user that the buttons are in a disabled state.

```jsx live=true
<React.Fragment>
  <Button disabled intent="secondary" variant="text">
    Go back to search
  </Button>
  <Button disabled>
    Complete Order
  </Button>
</React.Fragment>
```