# Button

A button can be tapped or clicked to perform an action.


## Overview

### Variants and ranks

Variant is used to communicate the intent of the button, such as positive, negative, notice.

Rank determines the priority of the button, and can be primary, secondary or tertiary. All variants are each available in those three ranks.

### Neutral

This is our default button used for most cases. Carefully choose what rank to use and avoid using more than one primary button for each context.

### Brand

Our brand button is used in specific scenarios, such as hero areas, login or brand enforcing messages.

### Negative

Used for destructive actions such as "Delete". Also used for sell actions (e.g. selling stocks or funds).

### Notice

Use only for the notice alert and for buy actions (e.g. buying stocks or funds).

### Icon button

Use an icon button only when the icon is universally understood and can stand on its own, such as a close or expand icon.

If the action is not immediately clear, use a regular button with a text label instead to ensure clarity and accessibility.

The icon button comes in the same ranks and variants as regular buttons.

### Split button

⚠️ Coming soon.

The split button always has a primary action. This action is most likely to be used by the customer as the default action.When users click on the primary action, it triggers this action directly, such as submitting a form, confirming a selection, or initiating a process.

The users can click on the dropdown arrow to reveal a dropdown menu providing secondary or additional options.

The split button comes in both primary and secondary.

### Next and back button

Used inside flows to signal the direction forward or backward.

Back button comes in both primary and secondary state depending on what suits the content. The next button comes as primary only.

### Size

Buttons can be xs, small, medium or large. The default size is medium.  
Choose size depending on context. Avoid to mix different sizes in the same context.

### Desktop placements

*   **Left**: In overviews and widgets, the user tends to read from top to bottom following the left side, therefore the buttons are kept to the left. Place the primary button furthest to the left.
    
*   **Right**: Modals and flows move the user forward (interpreted as to the right in western culture), therefore the buttons are placed to the right. Place the primary button furthest to the right.

### In a mobile device

*   **One button**, use the full width of the content area.
    
*   **Two buttons**, aim to place them side by side. It is allowed to stack them if needed.
    
*   **Three buttons**, consider the need for all of them. "cancel or close" might be x in the top right corner. Worst case scenario: place two buttons side by side and one tertiary button under.

### Do’s and don’ts

Only use one primary action in the same context of several actions.


## UX Guidelines

### Writing UX text for buttons

### Use commands and requests in the button

### Avoid Perform and Okay

### Standard button texts

### Do’s and don’ts