Button Component

Buttons are used to indicate and trigger an action. It lets the users know what will happen next when they click on it.

Button Variations

Primary Identifying the most important action for the user to take in order to accomplish their goal. Make it the most stand out element on the page.
Secondary Less important / preferable action.
Tertiary Least important / preferable action.
Label with icon (before/after text label) Giving more context on what the button does.
Icon Only Used when there is limited space to do an action, for example an action inside a table.
Link Go to Google Clickable text to navigate users to another page.
Large To be used for high priority Call To Actions on landing pages. Not be used for general action buttons.
Small To be used inside a smaller component, for example table.

Button Variations

Type Example Description
Active Indicating the button is active and clickable
Hover Emphasize the button is clickable when the user hover above.
Pressed BUTTON When the button is being pressed.
Disabled Indicating the button is not active and clickable.

Guideline

• Use action verb for button label. “pay”, “continue”, “cancel”, “save”, “add”, etc.
• Define the right hierarchy for each button. Which is the most important, which is less important.
• On desktop, main action buttons are located on the bottom right of the layout page with the width of the button follows the width of the label text. Pair button variants side by side with the most important/preferable button on the right.
• On mobile, main action buttons are located on the bottom of the page, button’s width 100%. Pair button variants top-bottom with the most important/preferable button on the bottom.
• When using the group button, place the primary button on the right side.

Code