Provide an easy way for users to submit information or initiate an action by a single action.


Use the button contol that is the most common interaction element on a computer or mobile device. It can be activated by a single click, easy to use and intuitive as it mimics real worl button action.
It is used to initiate, confirm or stop an terminate an action on the device. There are several kinds of buttons from single stand-alone buttons, to radio buttons that are used in conjunction with other controls.

How to Use

Standalone buttons will perform an action, or change modes immediately, and with no additional user input.


In-conjunction with radio buttons, check boxes or any other user inputs or controls, a Button will commit these user selections.
Buttons may be selected by pressing the OK/Enter key when the Button is in focus, or by tapping directly on it.
When user entry is required , until sufficient entry has not yet been made, the submit action should be made inactive. This should be communicated with text adjacent to the button.

Buttons can have either text or image to indicate the nature of the button. The icon on the button is indicative of the action that will be performed when the button is pressed.

The location of the button also varies from the app bar to the side of the screen.

  • Buttons must be very easy to see and activate . Background color and contrast must make the button stand out from the page background appropriately.
  • Buttons should generally appear to be raised above the page slightly. When a button is selected, it should appear to have been pressed and be level with or below page level slightly. Buttons are momentary-contact items, and this activation display should cease when the user click action ceases.
  • Make sure that the color of the button is indicative of the action to perform, active and bright if it is actionable and greyed out if it is not actionable.
  • The icon on the button should be intuitive and indicate the nature of the button. Follow common images like wheel for settings, disk for save, trash can for delete etc.
  • The text on the button should not be wordy and the description should be succint.
  • The size of buttons should be consistent across the apps and should not be too small that the user cannot press the button without difficulty on a touchs screen device, or take up more space than the action of pressing on it requires.