# Button

A button is an element the user can select to take an action.

## Demo

{% demo 'Buttons', 'buttonDemo', demos.buttonDemo, component.brand %}

## When to use this component

Use buttons to communicate actions users can take to interact with the product or service. For example, making a payment or submitting information. 

Each page should have only 1 primary button, and any other calls to action should use lower emphasis buttons.

## When not to use this component

Do not use buttons for navigation. Instead, use a link to take a user to a new page.

## How it works

First, import the `button` styles, then include the template in your project.

```scss
@import '@springernature/elements/components/eds-c-button';
```

### Options

| Name              | Description                                                                                      | Required |
|-------------------|--------------------------------------------------------------------------------------------------|:--------:|
| id                | Use it to connect the markup with Javascript (for example attach event handler to a button)      |          |
| dataTest          | Use it to hook tests                                                                             |          |
| linkUrl           | href attribute for links that look like buttons                                                  |          |
| text              | Copy for the button                                                                              |    ✅     |
| icon              | Icon for the button path to and svg on the file system or an id in the svg sprite                ||     |     |     |
| type              | Type attribute for buttons (for example `button` or `submit`)                                    ||     |     |     |
| template          | Define the type of button (`eds-c-buttonPlain`, `eds-c-buttonIconLeft`, `eds-c-buttonIconRight`) |    ✅     |
| variant           | Define the variant of button (`primary`, `secondary`, `tertiary`)                                |    ✅     |
| size              | Define the size of button (`small`, nothing for the default behaviour)                           ||     |     |     |
| dataTrack         | Define the type of GA tracking (for example `click`, `submit`...)                                ||     |     |     |
| dataTrackAction   | Define the action for GA tracking                                                                ||     |     |     |
| dataTrackCategory | Define the category for GA tracking                                                              ||     |     |     |
| dataTrackLabel    | Define the label for GA tracking                                                                 ||     |     |     |
| jsHook            | Use it to connect the markup with Javascript (for example attach event handler to a button)      |          |
| jsHooValue        | Use it to provide a value to the hook (for example `data-expander-target="#user"`)               |          |

### Variants

There are 3 button variants: primary, secondary and tertiary. The design of each signals its place in the hierarchy to the user. 
Use the variants consistently across products and services.

#### `primary`

For the main call to action on a page. Primary buttons should only appear once on each screen (not including the application header, modal dialog, or side panel). This is to make it clear what the main action is and draw attention to it.

#### `secondary`

For secondary actions on each page. Secondary buttons can be used with a primary button.

As part of a pair, the secondary button’s function is to perform the negative action, for example “Cancel” or “Back”.

If you are using secondary buttons on their own, use them for actions that have lower importance than the primary action.

#### `tertiary`

For less prominent actions. Use tertiary buttons for sub tasks on a page where there is already a primary button for 
the main action.

### Button Sizes

#### Default

Use as primary page actions and other standalone actions.

#### Small

Use when there is not enough vertical space for the default.

## Template

Find a configurable template in the eds-c-button's component folder.

## Help improve this page

If you’ve got a question, idea or suggestion about how to improve this component or guidance, 
post in the [#ask-elements](https://springernature.slack.com/archives/CNBTFLBLP) Slack channel.
