sunweb

Button

component action button

Definition


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.

c-btn

Handlebars

Loading...

Variants


c-btn > c-btn--secondary

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


c-btn > c-btn--neutral

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.


c-btn > c-btn--flow

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.


c-btn > c-btn--flat

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


c-btn > c-btn--flat-neutral

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


c-btn > c-btn--icon-only

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).


c-btn > c-btn--trust

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.


States


c-btn > [disabled]

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


c-btn > c-btn--loading

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


Modifiers


c-btn > c-btn--block

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.


c-btn with left icon

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


c-btn with right icon

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


JS Component


c-btn [data-js-component='c-btn']

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.