Malaysian Global Innovation & Creativity Centre

Buttons

Buttons are an ordinary, every-day element of interaction design used to invoke an event.
1. Design Guideline

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.1 Variation

1. Primary Button

2. Secondary Button

3. Inline Button

1.1.1 Primary 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.

btn-sd-green

Use the primary button on main actions

btn-sd-disabled

Use the greyed button on disabled actions

btn-sd-red

Use the red button on destructive actions

btn-lg-green

Use the primary button on main actions

btn-lg-disabled

Use the greyed button on disabled actions.

btn-lg-red

Use the red button on destructive actions

1.1.2 Secondary button

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.

btn-sd-ghost

Use the inverse button on dark backgrounds

btn-sd-ghost

No content has been added for this component.

btn-sd-ghost

Use the inverse button on light backgrounds

btn-sd-ghost

Use the greyed button on disabled actions

btn-lg-ghost

Use the inverse button on dark backgrounds

btn-lg-ghost

No content has been added for this component.

btn-lg-ghost

Use the inverse button on light backgrounds

btn-lg-ghost

Use the greyed button on disabled actions

1.1.3 Inline link

Use a link when you’re navigating to another place, such as: a "view all" page, "Hasbullah" profile, a page "skip link" etc.

1.1.4 Dropdown Button

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.

1.1.5 Progressing/Disable Button

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.

Creating File..
1.1.6 Next Slide Button

No content has been added for this component.

Next:
MaGIC Pre-Accelerator Bootcamp
1.1.7 Tags button

No content has been added for this component.

Design-ThinkingCo-WorkingMobile Games
Design-ThinkingCo-WorkingMobile Games
Design-ThinkingCo-WorkingMobile Games
Design-ThinkingCo-WorkingMobile Games
Design-ThinkingCo-WorkingMobile Games
1.1.8 Tab Button

No content has been added for this component.

Learn
Get ahead of the learning path
Grow
Accelerate your business growth
2. Implementation Notes

No content has been added for this component.

3. Reference

No content has been added for this component.