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 differen't 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>
```

### 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>
```

### Arrows

Arrows can be used to re-inforce the users sense of direction of moving forwards or backwards in a UI journey

```jsx live=true
<React.Fragment>
	<Button intent="secondary" variant="text" arrow="left">
		Change Configuration
	</Button>
	<Button arrow="right">
		Complete Order
	</Button>
</React.Fragment>
```

### Icons

You can add an icon to a button to re-inforce the action that the button will perform

```jsx live=true
<React.Fragment>
	<Button intent="secondary" variant="text" iconAfter="account">
		View Profile
	</Button>
	<Button variant="outline" iconBefore="facebook">
		Share on Facebook
	</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" iconBefore="search">
		Go back to search
	</Button>
	<Button disabled arrow="right">
		Complete Order
	</Button>
</React.Fragment>
```


### Changelog

- 1.0.0: `fullWidth` property has been removed
- *Added in version 0.0.45*