Buttons should be used in situations where users might need to:
1. Submit a form
2. Begin a new task
3. Trigger a new UI element to appear on the page
4. Specify a new or next step in a process
The elements for buttons and links describe a very specific type of action that is going to be taken when they are used. It is important we know when to use which, as the distinction matters:
1. Use a link when you’re navigating to another place, such as: a "view all" page, "Hasbullah" profile, a page "skip link" etc.
2. Use buttons when you are performing an action, such as: "submit," "merge," "create new," "upload," etc.
3. If pressing a button results in a new URL, or the resultant UI makes sense as "a new browser tab", that's probably always a link. Everything else is a button.
1. Primary Button
2. Secondary Button
3. Inline Button
The primary button generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Remove My Account” and “Cancel” button. The “Remove My Account” is the primary action.
Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance.for this component.
Use the primary button on main actions
Use the greyed button on disabled actions
Use the red button on destructive actions
Use the primary button on main actions
Use the greyed button on disabled actions.
Use the red button on destructive actions
The base and neutral buttons are used most frequently and can be used multiple times per feature. Use these buttons when the actions are of secondary importance to the content surrounding it, such as in the actions ribbon in a page header.
Use the inverse button on dark backgrounds
No content has been added for this component.
Use the inverse button on light backgrounds
Use the greyed button on disabled actions
Use the inverse button on dark backgrounds
No content has been added for this component.
Use the inverse button on light backgrounds
Use the greyed button on disabled actions
Use a link when you’re navigating to another place, such as: a "view all" page, "Hasbullah" profile, a page "skip link" etc.
Back to MaGIC
Request to close account
The drop-down button displays a list of items when clicked. It is essentially a two step process that provides greater specificity to a singular action. Use this button to avoid visual clutters in the page.
The progressive button displays steps or action that undertake while in the disable state. Use this button as: a "Creating File..", "Removing Account.." etc.
Note: Set the cursor to 'loading' to give a visual clue to the user that we are processing their request in the background.
No content has been added for this component.
No content has been added for this component.
No content has been added for this component.
No content has been added for this component.
No content has been added for this component.