Button States & When to Use Them

Default - How the button looks when it’s not interacted with, but is available to be interacted with.Use the Primary for the primary action (i,e Sign In). Use the Secondary for the secondary action (i.e Sign Up).

Hover - How a button will look when a curser is placed over it on the screen. This is helpful for indicating that something can be interacted with on the screen. NOTE: This state is specific to Web Design only as Mobile devices don’t support hover interaction.

Disabled - Signifies a button is NOT available for interaction. This is used to block users from performing an action or continuing with a process. For example: a form might not let you continue if you haven’t provided an answer to all the fields.

Active - The state is often neglected. It can be used for the ‘Click’ as it resembles a pressed button.

Loading/Processing - This state is used when an action has been taken and the system is ‘working’ to process it (i.e. File Upload). This is important for letting users know something is happening after they have performed the action.