Buttons

Buttons are used to help a user carry out an action, such as starting an application process, or changing the current page, such as submitting a form.

Rules for buttons

  • Buttons must be used only within main body of a page; they must not be used in asides.
  • Buttons must not be used mid-sentence. They must always appear on their own line separated from written content.
  • Buttons linking to downloadable content must use the icon button option.

Options available

Primary button

The standard button style.

Primary

Code 
<a type="button" class="btn btn-lg btn-primary" href="#">Primary</a>

Action button

Action buttons are used to signify the most prominent call to action on a page.

Action

Code 
<a type="button" class="btn btn-lg btn-action" href="#">Action</a>

Secondary and tertiary buttons

Secondary and tertiary buttons are used to compliment the primary button when not all actions are of equal importance. These different button colours may also be used when the primary blue colour does not match the context that they are used.

Secondary Tertiary 1 Tertiary 2 Tertiary 3

Code 
<a type="button" class="btn btn-lg btn-secondary" href="#">Secondary</a>
<a type="button" class="btn btn-lg btn-tertiary-1" href="#">Tertiary 1</a>
<a type="button" class="btn btn-lg btn-tertiary-2" href="#">Tertiary 2</a>
<a type="button" class="btn btn-lg btn-tertiary-3" href="#">Tertiary 3</a>

Icon buttons

  • An icon button must be used when the button action is to download a file.
  • An associated Font Awesome icon to the downloadable file must be included in the button.
PDF document ZIP file Word document Powerpoint presentation

Code 
<a type="button" class="btn btn-lg btn-primary" href="#">PDF document <i class="fa fa-file-pdf-o" title="PDF"></i></a>
<a type="button" class="btn btn-lg btn-primary" href="#">ZIP file <i class="fa fa-file-zip-o" title="ZIP"></i></a>
<a type="button" class="btn btn-lg btn-primary" href="#">Word document <i class="fa fa-file-word-o" title="Word"></i></a>
<a type="button" class="btn btn-lg btn-primary" href="#">Powerpoint presentation <i class="fa fa-file-powerpoint-o" title="Powerpoint"></i></a>

Tag buttons

Must only be used when linking to a tag or categories results page.

St Andrews Scotland Digital pattern library Climate change Marine biology

Code 
<a type="button" class="btn btn-tag" href="#">St Andrews</a>
<a type="button" class="btn btn-tag" href="#">Scotland</a>
<a type="button" class="btn btn-tag" href="#">Digital pattern library</a>
<a type="button" class="btn btn-tag" href="#">Climate change</a>
<a type="button" class="btn btn-tag" href="#">Marine biology</a>

Small tag buttons

Must only be used when linking to a tag or categories results page.

St Andrews Scotland Digital pattern library Climate change Marine biology

Code 
<a type="button" class="btn btn-small-tag" href="#">St Andrews</a>
<a type="button" class="btn btn-small-tag" href="#">Scotland</a>
<a type="button" class="btn btn-small-tag" href="#">Digital pattern library</a>
<a type="button" class="btn btn-small-tag" href="#">Climate change</a>
<a type="button" class="btn btn-small-tag" href="#">Marine biology</a>

Extra small tag buttons

Must only be used when linking to a tag or categories results page.

St Andrews Scotland Digital pattern library Climate change Marine biology

Code 
<a type="button" class="btn btn-xsmall-tag" href="#">St Andrews</a>
<a type="button" class="btn btn-xsmall-tag" href="#">Scotland</a>
<a type="button" class="btn btn-xsmall-tag" href="#">Digital pattern library</a>
<a type="button" class="btn btn-xsmall-tag" href="#">Climate change</a>
<a type="button" class="btn btn-xsmall-tag" href="#">Marine biology</a>

Can be used to show multiple options in a single dropdown list. This example shows both the primary and the small tag style of buttons, with the dropdown menu adjusting to match its parent button font size and padding.



Code 
<div class="dropdown">
  <button id="dropdown-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-primary dropdown-toggle">Dropdown trigger</button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-primary">
    <li><a href="">Dropdown option 1</a></li>
    <li><a href="">Dropdown option 2</a></li>
    <li><a href="">Dropdown option 3</a></li>
  </ul>
</div>
<div class="dropdown">
  <button id="dropdown-small" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-small-tag dropdown-toggle">Dropdown trigger</button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-small">
    <li><a href="">Dropdown option 1</a></li>
    <li><a href="">Dropdown option 2</a></li>
    <li><a href="">Dropdown option 3</a></li>
  </ul>
</div>

This option is no longer supported

This implementation is now deprecated and will be removed in a future release. Please use the updated dropdown buttons option.



Code 
<div class="dropdown">
  <button id="dropdown-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-primary">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-primary">
      <li><a href="">Dropdown option 1</a></li>
      <li><a href="">Dropdown option 2</a></li>
      <li><a href="">Dropdown option 3</a></li>
  </ul>
</div>
<div class="dropdown">
  <button id="dropdown-small" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-small-tag">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-small">
      <li><a href="">Dropdown option 1</a></li>
      <li><a href="">Dropdown option 2</a></li>
      <li><a href="">Dropdown option 3</a></li>
  </ul>
</div>