Elements

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.

Button Examples

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:

<button>Log In</button>

Use an input element with a type attribute:

<input type="button" value="Submit">

Use any non-button element with a role attribute (acknowleging that inline and block elements may behave differently):

<div role="button">Subscribe</div>

<span role="button">Download Report</span>

Link Examples

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.

<a href="https://apply.turing.edu" class="[add class(es) to make this appear as a button]">
  <span>Apply Now</span>
</a>

<a href="/programs" class="[add class(es) to make this appear as a button]">More Info</a>

Savile Buttons

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.

Class Name	HTML	Example
`s-button`	`<button class="s-button">Base Button</button>`
`s-button-primary`	`<button class="s-button s-button-primary">Primary</button>`
`s-button-primary-inverse`	`<button class="s-button s-button-primary-inverse">Primary Inverse</button>`
`s-button-secondary`	`<button class="s-button s-button-secondary">Secondary</button>`

Savile Links

Class Name	HTML	Example
`s-link`	`<a class="s-link">contact our team</a>`	contact our team

Paragraphs

Class Name HTML Example

Class Name	HTML	Example
`s-p`	`<p class="s-p">The default paragraph text is 16px and is intended for text on a white background.</p>`	The default paragraph text is 16px and is intended for text on a white background.
`n/a`	`<p class="s-p s-text-body-xs">This example shows how other utils can be used to achieve variants of the base paragraph.</p>`	This example shows how other utils can be used to achieve variants of the base paragraph.

s-p

<p class="s-p">The default paragraph text is 16px and is intended for text on a white background.</p>

The default paragraph text is 16px and is intended for text on a white background.

n/a

<p class="s-p s-text-body-xs">This example shows how other utils can be used to achieve variants of the base paragraph.</p>

This example shows how other utils can be used to achieve variants of the base paragraph.