Buttons

Overview

Use the button feature for call-to-actions and primary links through the site. A variety of background color and alignment options are available.

Usage guidelines

  • Keep button text actionable and concise, ideally fewer than 25 characters. Use action-oriented verbs.
  • Do not use buttons to replace navigation menus or create lists of links. Excessive use of buttons can create visual fatigue and reduce the visibility of your content. To be effective, buttons should be sparingly used.
  • Ensure adequate color contrast exists between background and foreground colors, and use the same color for all buttons within a group.
  • Favor simplicity over complexity. Use icons sparingly and only when the icon has broad meaning, such as "download" or "save."
  • Avoid generic text, such as "read more" or "learn more," especially in a repeated fashion, and do not use the phrase "click here." Instead, link descriptive content in the associated section or expand the button text. This will improve accessibility and SEO.

Documentation