Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



Used to initiate an action or trigger the users



The basic element of a button is a label. Labels inform users of the action that will occur if they click the button.

anatomy button guideline
  1. Icons left or right : Icon that can be positioned either before (leading) or after (trailing) the Label.
  2. Text labels : The text attributed to the Button that provides context.
  3. Container : Box from label, icon and as clickable area of button.
button guideline
  1. Icons : Icon that positioned the centre of the container. If you are using an Icon Button an icon should always be supplied..
  2. Container : The Icon Button container.

button guideline

Button can consist of an icon on its own or an icon paired with a text label. Always ensure that the icon you select for your label clearly communicates the label action. Icons paired with text labels should directly support the text label.

Alt text


Use direct and concise button labels with short label with one of icon to provide the label context

Alt text


Use multiple icons or unnecessarily long button labels make the users confused mean the action in button


Buttons allow users to make choices, take actions, and help guide around an interface with a single tap. Buttons also allows user to communicate actions that users can take. They are typically placed throughout your User Interface.

Common places buttons appear: Dialogs, Forms, Toolbars, etc.

When to use

  • To display several details about a single idea like a transfer at an airport.
  • To use common visual cues (icons and colors) to help users scan the details.

When not to use

  • When you have many actions at once.
  • You want to offer a less important action.
  • To make text inside paragraphs or lists actionable.


A button is a box area or text that communicates and triggers user actions when clicked or selected. Buttons are interactive elements.In this layout a Solid button is used to call out a primary action while a Ghost button is used to call out a secondary action.

Alt text


Use buttons with different variant to convey actions with different levels of importance

Alt text


Use same variant between to convey actions with different levels of importance

Margin and Padding

Buttons with text and text with labels have a minimum width of 107 pixels. Wider buttons and buttons with an icon only label must maintain a minimum 16 pixel padding on the left and right. This ensures that the label is legible and clear. In special cases, such as with loader labels, additional padding to the right is required.

button margin and padding


Whenever writing content for the button, one should remember its purpose of triggering action and moving the experience. That’s why every word in it has to be clear and expected.

Always start with a verb

Choose a strong, simple word that induces action. You may make it a single-word button on a more common direct action (e.g. “Lanjut”, “Batal”) or a complete phrase with nouns and adverbs if necessary and within the character limit.

Alt text
Alt text

In some cases, you might need to mention two verbs to address an action and its consequent action.  Please keep it short and clear, and give a necessary conjunction.

Alt text

Use Title Case

Title Case makes the button easier for users to scan and comprehend the content quickly. Otherwise, conjunctions, propositions, and articles should be applied in lowercase.

Alt text
Alt text

Keep it under 20 characters

Refrain from counting the copy length based on how many words you use since its result tends to be inconsistent. When working on bilingual design, keep the copy around the same length in both languages.

Alt text
Alt text

Cut conjunctions, propositions, and articles if necessary

A shorter phrase leads to a quicker decision. Otherwise, if the copy sounds wrong after taking out those words, you might keep it as long as it’s still within the character limit.

Alt text
Alt text

Use icon sparingly

While it might help to catch the user’s attention or clarify the button’s action, adding an icon also potentially impacts the user’s cognitive load. Prioritize using only plain words.