Buttons
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:
- 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:
- Printer-friendly version
- Log in to post comments