Ready2.0 +
Components

Buttons

Buttons are instantly recognizable, easy to understand and allow users to take an action.

Accessible Buttons
  • Buttons should be used sparingly within a content section and are generally used for an action specificaly related to the surrounding content.
  • Button Titles should be short with a clear call to action where possible. Common unhelpful button titles such as 'click here', 'www.mywebsite.com/my-web-page' or 'link' can be confusing to keyboard-only users.
  • Although all buttons are technically links, links should be used in place of buttons when there is no single and direct action to be taken. For instance a list of resource links should not use buttons.

# Primary Buttons

Primary buttons are U Red by default and can be used in 4 different sizes: small.sm, regular(default), large.lg and extra-large.xl.

Example Markup

  <a href="/path/to/page" class="btn sm">Button Text</a>
  <a href="/path/to/page" class="btn">Button Text</a>
  <a href="/path/to/page" class="btn lg">Button Text</a>
  <a href="/path/to/page" class="btn xl">Button Text</a>

# Button Colors

In addition to the default U Red button, you can also choose between 3 other alternate colors to fit your UI needs; .black, .gray and .white.

Example Markup

  <a href="/path/to/page" class="btn black">Button Text</a>
  <a href="/path/to/page" class="btn gray">Button Text</a>
  <a href="/path/to/page" class="btn white">Button Text</a>

# Outline Buttons

Used primarily a secondary buttons, the outline button can be used to soften the visual weight of priority buttons. .outline(red), .outline .black, .outline .gray and .outline .white(not shown).

Example Markup

  <a href="/path/to/page" class="btn outline">Button Text</a>
  <a href="/path/to/page" class="btn outline black">Button Text</a>
  <a href="/path/to/page" class="btn outline gray">Button Text</a>

# Full-Width Buttons

Generally used sparingly and only in tight spaces. Full-width buttons .full will stretch the entire width of the parent container and can be used in any size and color.

It is good practice to only use full-width buttons within a confined width and should not exceed the supporting text.

Example Markup

  <a href="/path/to/page" class="btn full">Button Text</a>
  <a href="/path/to/page" class="btn outline black full">Button Text</a>