---
# System prepended metadata

title: Buttons List
tags: [DS DONE]

---

---
tags: DS DONE
---

# Buttons List

Buttons list allow to display multiple buttons next each other.

## Sizes

![](https://i.imgur.com/9OdXhpS.png)




|                      | Attribute | Mobile | Tablet | Mobile    |
| -------------------- | --------- | ------ | ------ | --------- |
| **1. Button height**  | Height    | 6.4rem | 4.8rem | 2.5rem    |
| **2. Button padding** | Padding   | 2rem   | 2rem   | 1rem 2rem |
| **3. Button Font**    | Size | 2rem | 1.4rem | 1.3rem    |
| **4. Space between**  | Width     | 1rem   | 1rem   | 1rem      |

## Color
### Light Theme


![](https://i.imgur.com/xBuwI0l.png)


|                 | Attribute | Value |
| --------------- | --------- | ------ |
| **1. Primary**  | Color <br> background    | #636363 <br> rgba(193,193,195,20) |
| **2. Hover**    | Color <br> background   | #fff <br> #8D6CB2 |
| **3. Disabled** | Color <br> background | rgba(99,99,99,30) <br> rgba(193,193,195,20)  |

### Dark Theme

![](https://i.imgur.com/2COLCbB.png)


|                 | Attribute | Value |
| --------------- | --------- | ------ |
| **1. Primary**  | Color <br> background    | #fff <br> rgba(255, 255, 255, 0.3) |
| **2. Hover**    | Color <br> background   | #5C2D91 <br> #fff |
| **3. Disabled** | Color <br> background | rgba(255, 255, 255, 0.3) <br>rgba(255, 255, 255, 0.3)  |

> Pressed state uses the same value than the hover state/value


# Usage

## States

![](https://i.imgur.com/QjI7IPD.png)

![](https://i.imgur.com/cf5yyvE.png)

1. **Basic state**
State visible before click.

2. **Hover state**
State visible when the cursor hovers the button. Container & label are displayed in another colour depending on the type of button. Cursor becomes a pointer.

3. **Disabled state**
State visible if the button is not clickable. All elements (container & label) are displayed but they are greyed out in order to signify the change of state.

## Anatomy!

![](https://i.imgur.com/8p6CSpi.png)

1. **Container**
A container is displayed around the text label with a solid color. 

2. **Label**
Button label is the most important element on a button, as it indicates the action that will be triggered when clicked. Try to be as concise as possible to avoid having big/long buttons. 