Buttons & Links
Many of our sites have links that appear to be buttons. This is acceptable from a design standpoint, but it is important that the HTML correctly communicates the intent of the element to the browser. Start by understanding the important difference between a button and a link:
- Buttons should lead to actions such as "download", "sign up" or "log out"
- Links should allow a user to navigate to a new page or a different taget on the same page
Why this matters: For users of screen-readers and power users, a space key and enter key both trigger a button, where pressing the enter key is the only way to trigger a link.
In the following examples, the elements do lead to action, so need to be interpreted by the browser as buttons. There are several of ways to achieve this depending on the use case and needs; three examples are noted below. In order to focus on the elements and attributes, Savile styling classes have not been added to these examples.
Use a button element:
Use an input element with a type attribute:
Use any non-button element with a role attribute (acknowleging that inline and block elements may behave differently):
In the following examples, the button-look-alike is actually an anchor tag. This is the correct tag to use because the purpose of the element is to allow the user to navigate to a new page.
Although many elements that appear as buttons, but are not technically buttons, will live in our software suite, Savile still refers to the element as "button" and uses such in the class names.
|contact our team|
The default paragraph text is 16px and is intended for text on a white background.
This example shows how other utils can be used to achieve variants of the base paragraph.