---
tags: DS DONE
---

# Buttons
*Buttons allow users to take actions, and make choices, with a single tap or click.*

---

## Usage

Buttons are used to initialize action, either to go on another page (i.e. call to action on a banner), to act on an item (i.e. save, add or login) or to navigate inside an app (i.e. next or previous)

### Button sizes


1. **Small button**
Small buttons are the generic buttons, these are the one to use primarily on interfaces. Whether it is in a basic form, an application action or as navigation element.

2. **Big button**
Big buttons are avalaible when the information needs to stand out. Typically in commercial situation. (i.e. banners, table, etc.)

### Button types
Based on the action triggered, different types of buttons are available.


1. **Default button**
This one is to be used as the main call to action on interfaces.

2. **Ghost button**
For secondary actions. Ghost buttons are great at keeping the eye focused on a page’s primary imagery. With properly chosen background and well-outlined contrasting border ghost button attracts attention without giving a user overwhelming impression. Present on the content headers, banners and immersive sections.

3. **Disabled button**
Use when the user cannot proceed until an input is collected

4. **Order/Activate-Reload button**
The order/Activate/Reload call-to-action (CTA) button is the action to go to the webshop/caddy. This green colour is also used at the end of the order flow to validate the order.

5. **Waiting button**

6. **Previous/Next button**

### Button elements

#### Label
Button text should be as short as possible with action words that clearly explain what will happen when the button is selected

#### Icons
* No icon by default. When words are not enough, icons can be used in buttons to better communicate what the button does.
* Icon should always appear to the left of the text.
* Icon used in buttons must be directly related to the action that the user is taking.
* Icon must be the same color value as the text within a button.
* Arrow icons are always used for preview/next button


### Buttons next to each other

When you need to use two buttons next to each other, the main action should be a primary button and always displayed at the right of the secondary actioon.
Secondary action is a ghost button without rounded corner bottom

### Previous/Next button
Previous and next button have the same look than a primary and seconday actions

### Negative version
All buttons can be used on darker interface such as epic or Pickx or on dark background as gradient of full purple.

### Hierarchy
* Avoid using too many buttons on a page.
* ==UX INFO?==
### Placement
* ==UX INFO?==

---

## Style

### Button sizes


#### Small

| | Mobile | Tablet | Desktop |
| -------- | -------- | -------- | -------- |
| **1. Button size** | 39rem | 40rem | 42rem |
| **2. Label font** | Proximus Regular | Proximus Regular | Proximus Regular
| **2. Label text size** | 13rem | 14rem | 16rem |
| **3. Border radius** | 14rem | 14rem | 14rem |
| **4. Padding** | 10 20 10 20rem | 10 20 10 20rem | 10 20 10 20rem |
| **5. Icon size** | 13rem | 14rem | 16rem |

#### Big

| | Mobile | Tablet | Desktop |
| -------- | -------- | -------- | -------- |
| **1. Button size** | 39rem | 50rem | 52rem |
| **2. Label Font** | Proximus Regular | Proximus Regular | Proximus Regular
| **2. Label text size** | 14rem | 16rem | 18rem |
| **3. Border radius** | 14rem | 14rem | 14rem |
| **4. Padding** | 10 20 10 20rem | 10 20 10 20rem | 10 20 10 20rem |
| **5. Icon size** | 14rem | 16rem | 18rem |

### Positive buttons


#### Default state

| | Background colour | Font colour | Border |
| -------- | -------- | -------- | -------- |
| **1. Primary positive** | <div style="background-color: #5C2D91">&nbsp;</div> #5C2D91 | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | No border
| **2. Secondary positive** | Transparent | <div style="background-color: #5C2D91">&nbsp;</div> #5C2D91 | 2rem - #5C2D91 |
| **3. Disabled button** | <div style="background-color: #ACACAC">&nbsp;</div> #ACACAC | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | No border |
| **4. Order/Activate-Reload** | <div style="background-color: #74BB39">&nbsp;</div> #74BB39 | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | No border

#### Hover state

| | Background colour | Font colour | Border |
| -------- | -------- | -------- | -------- |
| **1. Primary positive** | <div style="background-color: #8D6CB2">&nbsp;</div> #8D6CB2 | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | No border
| **2. Secondary positive** | <div style="background-color: #8D6CB2">&nbsp;</div> #8D6CB2 | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | No border |
| **3. Disabled button** | No hover effect |
| **4. Order/Activate-Reload** | <div style="background-color: #5C942D">&nbsp;</div> #5C942D | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | NA

:::info
Icon always takes the same colour than the font
:::

### Negative buttons


#### Default state

| | Background color | Font color | Border |
| -------- | -------- | -------- | -------- |
| **1. Primary negative** | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | <div style="background-color: #5C2D91">&nbsp;</div> #5C2D91 | No border
| **2. Secondary negative** | Transparent | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | 2rem - #FFFFFF |
| **3. Disabled button** | <div style="background-color: #ACACAC">&nbsp;</div> #ACACAC | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | No border |
| **4. Order/Activate-Reload** | <div style="background-color: #74BB39">&nbsp;</div> #74BB39 | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | No border

#### Hover state

| | Background colour | Font colour | Border |
| -------- | -------- | -------- | -------- |
| **1. Primary negative** | <div style="background-color: #CEC0DE">&nbsp;</div> #CEC0DE | <div style="background-color: #5C2D91">&nbsp;</div> #5C2D91 | No border
| **2. Secondary negative** | <div style="background-color: #CEC0DE">&nbsp;</div> #CEC0DE | <div style="background-color: #5C2D91">&nbsp;</div> #5C2D91 | No border |
| **3. Disabled button** | No hover effect |
| **4. Order/Activate-Reload** | <div style="background-color: #5C942D">&nbsp;</div> #5C942D | <div style="background-color: #FFFFFF">&nbsp;</div> #FFFFFF | NA

:::info
Icon always takes the same color than the font
:::