Button

Storybook Github

Action Buttons allow users to trigger actions by clicking, tapping, or pressing a corresponding key on a keyboard, such as the “Enter” key.

Rules of Thumb

  • Use only predefined button colors, sizes and fonts — don’t customize or alter them.
  • Don’t design elements which look similar to buttons but act differently. Buttons are actionable elements.
  • Don’t activate Pop Up Menus from buttons.
  • Buttons within the same group should be the same size. Use the width of the widest button.
  • Space buttons evenly.
  • Clearly title buttons by choosing a verb that describes the action the user performs at precisely the moment the button is clicked: “Save, Close, Print, * Delete, Change Password,” etc.
  • Resize button width to accommodate the title; do not abbreviate or truncate button titles.
  • Don’t use an outside label to introduce a button. Instead, clearly title the button.
  • Add an ellipsis (…) to the button title if it opens another window, Dialog Box or app.
  • Within Dialog Boxes, right-justify buttons.

Outline Button

Outline Buttons are an alternative button style to be used in situations where a de-emphasized button is beneficial in guiding the user to a preferred option. For example, use an outline button for the less preferred option in Ok/Cancel button pairings.

Examples

Do: User buttons for actionable controls only
Do: User buttons for actionable controls only
Don't: User buttons for actionable controls only
Don’t: User buttons for actionable controls only
Do: Right justify buttons and give them adequate spacing from fields.
Do: Right justify buttons and give them adequate spacing from fields.
Don’t: Mix button colors and sizes.
Don’t: Mix button colors and sizes.
Do: Use standardized button colors only.
Do: Use standardized button colors only.