Buttons (Primary & Secondary)
A button allows, initiate and informs people of an action.
Variants
/PS%20Buttons%20Variants.png)
| Variant | Usage |
|---|---|
|
Primary / Primary with Icon |
Use this for the main call-to-action button. Communicates action that is of the highest importance. This variant should only appear once per screen and text should be in all caps. |
|
Secondary / Secondary with Icon |
Use this for secondary and independent actions. These can be used in isolation or paired with the primary button |
|
Disabled |
Not available for use due to insufficient information / values / invalidated business rules |
Anatomy
All button types share the same anatomy and are made up of the following:
Text label: Text labels can expand
Icon (Optional): A visual shortcut of the key action
Container: Containers can expand, and can be solid or outlined
/PS%20Buttons%20Anatomy.png)
Size
Button width varies and should stretch according to the layout i.e. horizontal or vertical
/PS%20Buttons%20Size.png)
Text Style
Buttons have a text size of 12px, and is Uppercase. Use “CTA” text style on Figma.
/PS%20Buttons%20Text.png)
Behavior
Buttons should be grouped logically based on usage and importance. Avoid having many call-to-actions as this may confuse users.
/PS%20Buttons%20Behavior.png)
| Button Group | Usage |
|---|---|
|
A single primary button |
Use at least a single primary call-to-action in every layout and when other call-to-actions can be portrayed as other components, such as text or an icon (close, chevron etc.) |
|
Vertically Stacked |
Use this when the primary and secondary buttons direct users to different flows i.e. yes leads users to a happy flow while no brings them to an unhappy flow |
|
Horizontally Stacked |
Use this in pop-up dialogs when it is intended for the user to take quick actions i.e. yes/no or close/open or delete/cancel options |
Use Cases
/PS%20Buttons%20Use%20Case.png)
Dos and Don'ts
/PS%20Buttons%20Do.png)
/PS%20Buttons%20Dont.png)