Skip to main content

Components

Button

Used to initiate an action or trigger the users

banner-Button

Anatomy

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 : Box from icon and as clickable area of button.


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

Do : With icon

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

Alt text

Don't : With multiple icon

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.
  • 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.

Alt text

Do : With Different Variant

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

Alt text

Don't : With Same Variant

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

Content

Labels should be concise and informative so that users know what action will be triggered when they click the button. Icon-only labels can be used in situations where an icon alone is sufficient to communicate button actions, otherwise we suggest using a text only label or an icon and text label. When writing button labels:

  • Be specific and clearly communicate the button’s action.
  • Use simple verbs or verb phrases.
  • Aim for short labels when possible (1–3 words), to avoid wrapping.
  • Add an icon to the button to call a user’s attention to it or to clarify the button’s action.
  • Avoid punctuation on buttons.
Alt text

Do : With short copy

Use direct and concise button labels

Alt text

Don't : With long copy

Use unnecessarily long button labels