Buttons

Buttons are used to initialize an action.
Button labels express what action will occur when the user interacts with it.

5 Sections

Introduction

For buttons, we use 3 major factors – that we can mix in between to produce any kind of call to actions depends on its hierarchy.

  1. Type.
  2. Weights.
  3.  Theme.

and here we will express this three factors in details.

Types

Code



											

Weights


We use only two weights of buttons, normal, small. and that goes across all the types of the buttons (primary,
secondary, circle). we will express them in details.

 

NOTE: During the samples of button’s weights, we will use any color, and any type. but it
does not represent a guideline. buttons types already covered. and colors guidelines of buttons will be covered
later.


 





 

Status

There is two different status we usually use for buttons, active and disabled.

Active

For active button status. we use colors. usually, CTA buttons come in the brand color (check this link for more about
primary brand color). 
Here are some samples.

 


 


    
                        


Disabled

For Disabled action buttons. we use only the gry color. to unify the experience all-over the platform.

 


    
                        

Interactions

For the best experience in interactions with buttons, the response should be clearly communicated. we define three levels of interactions for buttons:

  1. From Disabled to Enabled.
  2. Hover / Click.
  3. Progress indication.

From Disabled to Enabled

Disabled buttons appear when there is a required information to complete a task. it will automatically convert to enabled whenever this task is completed.

Example: The user wants to reset his password. the button will be disabled till the user enter a valid ID.


Hover and Click

The Response that happens when the user starts to interact with a button on the screen. we use shadows to emphasize the action itself. and encouraging the user to take this action.


Progress indication

After any sort of action, the user should be aware “what is going on” – communicating with users while they have to wait is very important – and we use instantly load buttons to communicate this state clearly.