Buttons

Design system series

• Do you know how functional a button serve its purpose . One key purpose of a button is to initialize an action, button labels express what action will occur when the user interacts with it.
• We encounter this in real life situations which makes it intriguing and fun - All we have to do for a washing machine to start washing our cloth is just to press a button.
  Amazing it is!
• In User interface, buttons perform similar functions. When we click on the submit button to submit a form, it’s get submitted so it is received in the appropriate database
• Great! when are we to use a button - Use a buttons to communicate actions users can take and to allow users to interact with the page

N.B — Each page should have one primary button, and any remaining calls to action should be represented as lower emphasis buttons.

• When not to use a button - Do not use buttons as navigational elements. Instead, use *links* when the desired action is to take the user to a new page.

Button variants —

• Primary - for principal call to action on the page. Primary buttons should only appear once per screen (not including the application header or in a modal dialog).
• Secondary - for secondary actions on each page; these can only be used
in conjunction with a primary button.
• Tertiary - for less prominent actions; tertiary buttons can be used in isolation
or paired with a primary button when there are multiple calls to action
• Danger - for actions that could have destructive effects on the user’s data
(for example, delete or remove). Danger button has three styles: primary, tertiary, and ghost
• Ghost - for the least pronounced actions; often used in conjunction with a primary button.

Buttons also uses what we call " state " to communicate with users

This different types of state include :

• Default - shows the default state of the buttons
• Progress - shows a progressing state of an action
• Hover - shows that a mouse is hovering over a button ( also shows that a button is interactive )
• Focused - used to communicate that a button is highlighted
• Disabled - shows a button is non-interactive at that moment due to maybe a processing action or a completed action

Below shows Button variants in different states of communication -

1. PRIMARY

2. SECONDARY

3. TERTIARY

4. GHOST

5. DANGER :

• For best practice on buttons you can read :
  (i) Material Design by Goggle
  (ii) Human Interface Design by Apple

Its best to make use of the best acceptable practice of buttons (in Shape and Size) so your call to action is clear and there no form of confusion to the Users

Reference : Carbon Design System