Button

A button is an independent visual element which allows the user to start, stop or modify an action or a process. They usually contain text that describe the action they allow, can sometimes contain icons along text, or icons only.
The button could be not only a button but also a link with the same look and feel.

The secondary button is used as alternative of normal important actions.

The neutral is used when the actions are of secondary importance to the content surrounding it, such as a cancel button next to and accept one.

The flow is used in all the actions that are part of the conversion funnel, so that ones that takes the user to the booking.

The flat is used when a link look and feel is required.

The flat-neutral is used when a neutral link look and feel is required.

The button have no text. Is used in clear defined cases when the icon is auto explanatory (i.e. a close action in a modal).

The trust button is a button to make the customer to focus on things more importants than the button itself. The intention of this button is to be shown when the button itself is not important, so the main focus will be on what is next to the button.

The delete button is used for actions that delete something.

The disabled states happens when the user interaction is not active.

The loading state happens when there is an action pending to finish (i.e. and API call).

The block button is used for aesthetic reasons in some components, in order to align it with the content.

The button could be used as a normal link (with the a tag), with the same look and feel.

The button could have a icon inside, left to the text.

The button could have a icon inside, right to the text.

Any button can be a JS controlled component with a JS api.

Having more control of a button with JS, means during the lifetime of the instance, some properties can be accessed and manipulated programmatically.