Components
Button
Used to initiate an action or trigger the users
Anatomy
The basic element of a button is a label. Labels inform users of the action that will occur if they click the button.
- Icons left or right : Icon that can be positioned either before (leading) or after (trailing) the Label.
- Text labels : The text attributed to the Button that provides context.
- Container : Box from label, icon and as clickable area of button.
- Icons : Icon that positioned the centre of the container. If you are using an Icon Button an icon should always be supplied..
- Container : The Icon Button container.
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.
Do
Use direct and concise button labels with short label with one of icon to provide the label context
Don't
Use multiple icons or unnecessarily long button labels make the users confused mean the action in button
Usage
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.
Accessibility
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.
Do
Use buttons with different variant to convey actions with different levels of importance
Don't
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.
Content
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.
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.
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.
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.
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.
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.