Button
Another day another component from Scarlet design system. And today's component is the Button.
Button is my favourite UI component, because as much simple as it looks it's the most important and common component and it takes time to master designing well balanced button. Also, because buttons are very flexible component it could be so fun in designing and using.
Button variants:
Each button variant has a particular function and its design signals that function to the user. It is therefore very important that the different variants are implemented consistently across products, so that they message the correct actions.
• Primary button : For the principal call to action on the page. Primary buttons should only appear once per screen (not including the application header, modal dialog, or side panel).
• Secondary button : For secondary actions on each page. Secondary buttons can only be used in conjunction with a primary button. As part of a pair, the secondary button’s function is to perform the negative action of the set, such as “Cancel” or “Back”. Do not use a secondary button in isolation and do not use a secondary button for a positive action.
• Tertiary button : For less prominent, and sometimes independent, actions. Tertiary buttons can be used in isolation or paired with a primary button when there are multiple calls to action. Tertiary buttons can also be used for sub-tasks on a page where a primary button for the main and final action is present.
• Ghost button : For the least pronounced actions; often used in conjunction with a primary button. In a situation such as a progress flow, a ghost button may be paired with a primary and secondary button set, where the primary button is for forward action, the secondary button is for “Back”, and the ghost button is for “Cancel”.
• Danger button : For actions that could have destructive effects on the user’s data (for example, delete or remove).
• Safe button : For actions that may be worrying the user and telecommunication only (for example online payment or incoming call).
Wanna know more about building UI components? check the Scarlet Design System project.