Buttons

Close this notice

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Beginner

Everybody loves buttons. They give links and other interactive calls to action the little extra room they need to stand out. Use the button classes on <a>, <button>, or <input> elements

Please note: buttons are inline content, like text. They do not come with margin to keep them from bumping into other pieces of content.

Basic usage

This is my button This is my button too This is my button as well 

<a href="#" class="wdn-button">This is my button</a>
<a href="#" class="wdn-button">This is my button too</a>
<a href="#" class="wdn-button">This is my button as well</a>

Color options

Default Triad Complement Brand Energetic 

<a href="#" class="wdn-button">Default</a>
<a href="#" class="wdn-button wdn-button-triad">Triad</a>
<a href="#" class="wdn-button wdn-button-complement">Complement</a>
<a href="#" class="wdn-button wdn-button-brand">Brand</a>
<a href="#" class="wdn-button wdn-button-energetic">Energetic</a>

Conveying meaning to assistive technologies

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .wdn-text-hidden class.

Disabled buttons

Add the disabled attribute to <button> elements to make the visuals of a button that cannot be clicked.

<button class="wdn-button" disabled type="button">This is a button too!</button>
<button class="wdn-button wdn-button-triad" disabled type="button">This is a button too!</button>
<button class="wdn-button wdn-button-complement" disabled type="button">This is a button too!</button>
<button class="wdn-button wdn-button-brand" disabled type="button">This is a button too!</button>
<button class="wdn-button wdn-button-energetic" disabled type="button">This is a button too!</button>

What is the difference between these elements?

You might be thinking to yourself, 'This is great! But how do I know which element I should use?', and that is a great question. The answer is outlined really well in the article The Difference Between Anchors, Inputs and Buttons, and is worth reading. In summary:

  • Use <a> for anything that changes the URL (without submitting form data)
  • Use <input> to submit a form
  • Use <button> for custom JS functionality, such as opening a modal box or showing hidden content

Accessibility Considerations: 

There are several accessibility considerations to make when using buttons
  • Avoid the use of color to denote meaning. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .wdn-text-hidden class.
  • Avoid non-descriptive button text such as 'CLICK HERE'. Instead, make sure the button text describes the action that will take place when the button is clicked.
  • If the button contains only an image for icon-font, make sure that there is a text alternative available.

Usability Considerations: 

Buttons are a great way to call attention to important links or actions on your site. It is therefor important to use regular links whenever possible and only use button styles to highlight the most important links, such as a call to action.
Contributed By: 
IIM