UI component that allows the user to execute an action.

*Advice: use a short and expressive label, fast to read, and that concisely describes the action that the user can execute.*

![defaultbutton](https://user-images.githubusercontent.com/10867086/35729079-e11273c6-080d-11e8-8044-061366af23f3.jpg)

# Button types and their usage

There exist different kinds of Buttons, the choice on which one to use depends on the importance of the corresponding action.

| Type | Name | Description |
| ------ | ------ |------ |
| ![default button](https://user-images.githubusercontent.com/10867086/35727631-0bdde0ea-0809-11e8-85d6-b3b2ec85afab.jpg) |**Default button** | Use Default Buttons for the majority of the actions that the user can execute. |
| ![primary button](https://user-images.githubusercontent.com/10867086/35727704-53198022-0809-11e8-9e4d-fd5551c7503d.jpg) | **Primary button** | Use Primary Buttons to highlight primary actions in the pages of the app. They are “call to action”, meaning that they accomplish the task of attracting the user's attention. There should be a small number of Primary Buttons in a single page, preferably never more than one visible at the same time. |
| ![positive button](https://user-images.githubusercontent.com/10867086/35727745-7469deac-0809-11e8-8c82-4a520b26226f.jpg) | **Positive button** | Use Positive Buttons to indicate confirmation actions or actions that did execute successfully. |
| ![negative button](https://user-images.githubusercontent.com/10867086/35727764-82327954-0809-11e8-994a-cc518c2e2201.jpg) | **Negative button** | Use Negative Buttons to indicate potentially destructive actions or actions that did not execute successfully. |
| ![flat button](https://user-images.githubusercontent.com/10867086/35727788-92731c7e-0809-11e8-8b7d-ce65ebda3915.jpg) | **Flat Button** | Flat Buttons are similar to Default Buttons; the choice between the two depends on the style of the user interface. Use Flat Buttons when there are more actions in the same area; for example, a list of actions that have equal importance. |
| ![icon button](https://user-images.githubusercontent.com/10867086/35727803-a7c71aa8-0809-11e8-9a4b-6f47bf0dcc34.jpg) | **Icon Button** | Use Icon Buttons when you want to attract attention on buttons, or when you think that the icon could be more explicative than the bare text contained in them. |

# States

| Type | Name | Description |
| ------ | ------ |------ |
| ![normal](https://user-images.githubusercontent.com/10867086/35728074-a28dd80a-080a-11e8-8cfc-ad45987d4db6.jpg) |**Normal** | No interaction performed, the Button is enabled and clickable. |
| ![hover](https://user-images.githubusercontent.com/10867086/35728088-aee38186-080a-11e8-8b49-85e54155c2af.jpg) |**Hover** | The user is hovering the Button, which is active and clickable. |
| ![disabled](https://user-images.githubusercontent.com/10867086/35728396-be2655aa-080b-11e8-8cf6-d8aa87ba5cee.jpg)|**Disabled** | Independently from the user's action, the Button is disabled and not clickable. |

# Variants

## Fluid Button

Fluid Buttons occupy all the horizontal space available in their container. There must be only one Fluid Button on a single line.

![fluidbutton](https://user-images.githubusercontent.com/10867086/35729101-f20a324a-080d-11e8-9194-5c485790c253.jpg)

## Async Button

| Type | Name | Description |
| ------ | ------ |------ |
![default button](https://user-images.githubusercontent.com/10867086/35727631-0bdde0ea-0809-11e8-85d6-b3b2ec85afab.jpg)|**Ready**| The Ready State indicates that the button is ready to be clicked and to perform the corresponding action. |
|![loading](https://user-images.githubusercontent.com/10867086/35728677-aa0abe20-080c-11e8-878f-fba963ea4b1c.jpg)|**Loading**| The Loading State indicates that the execution of the corresponding action has started and is processing. It is crucial, especially when the Loading State is unusually long, to give the user feedback about the fact that something is happening. |
|![success](https://user-images.githubusercontent.com/10867086/35728705-bb1786ee-080c-11e8-9ed1-1431534f9bac.jpg)|**Success**| The Success State indicated that the executed action did complete successfully. |
|![error](https://user-images.githubusercontent.com/10867086/35728860-416bd29a-080d-11e8-8425-eb055c2c2f4e.jpg)|**Error**| The Error State indicates that an error has occurred while performing the corresponding action. When possible, give feedback to the user about the reason behind the failure and explain how to solve it. |

# Sizes

Buttons, depending on the needs, can have three different sizes:

![size](https://user-images.githubusercontent.com/10867086/35728991-9ea252a4-080d-11e8-8e63-ba33c3c7a778.jpg)


