Skip to main content
Experimental This website is used for testing – your feedback will help us to improve it.

Buttons

Overview

Use the .bsk-btn class to create clickable actions or links.

You must pick a variant for each button, otherwise it will look strange. It is not enough to use .bsk-btn on its own.

Supported elements

These elements are fully supported:

  • <button>

These elements are also supported, but to a lesser extent:

  • <a>
  • <input>

Other elements may be used as well, but are not supported and may not look right.

Use role="button" for link elements which trigger in-page functionality (such as collapsing content) to give proper context to assistive technologies.

Link 
<button class="bsk-btn bsk-btn-default" type="submit">Button</button>
<input class="bsk-btn bsk-btn-default" type="button" value="Input">
<input class="bsk-btn bsk-btn-default" type="submit" value="Submit">
<a class="bsk-btn bsk-btn-default" href="#" role="button">Link</a>

Variants

Default button

Add the .bsk-btn-default class for standard or secondary buttons. For added context you can use contextual colours.

<button class="bsk-btn bsk-btn-default" type="submit">Action</button>

Primary button

Add the .bsk-btn-primary class for the main call to action.

To promote recognition by users, there should only be one primary button per set of actions. It should not be used in supporting elements such as navigation.

<button class="bsk-btn bsk-btn-primary" type="submit">Primary Action</button>

Experimental button

Add the .bsk-btn-experimental class for actions that are experimental or not yet fully supported.

<button class="bsk-btn bsk-btn-experimental" type="submit">Experimental Action</button>

Microsoft sign in button

Add the .bsk-btn-ms-account class for actions that will sign users into an application or website using their NERC Active Directory account. This variant incorporates the Microsoft User Account Pictogram.

To promote recognition by users, this variant MUST only be used where users will sign in using their NERC Active Directory account.

You MUST NOT use this variant for other accounts, such as BAS legacy LDAP accounts, or direct logins.

<a class="bsk-btn bsk-btn-ms-account" href="#">
  <object class="bsk-ms-pictogram" type="image/svg+xml" data="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.3/img/logos-symbols/ms-pictogram.svg"></object>
  Sign in to Continue
</a>

Contextual colours

The standard contextual colours can be used for context by adding these classes:

Standard Context Button Contextual Class
Success .bsk-btn-success
Warning .bsk-btn-warning
Danger .bsk-btn-danger
Info .bsk-btn-info 
<button class="bsk-btn bsk-btn-success">Success Action</button>
<button class="bsk-btn bsk-btn-warning">Warning Action</button>
<button class="bsk-btn bsk-btn-danger">Dangerous Action</button>
<button class="bsk-btn bsk-btn-info">Info Action</button>

Contextual icons

The standard contextual icons can also be used for adding context to buttons, usually with the contextual colours.

<button class="bsk-btn bsk-btn-default"><i class="far fa-fw fa-check" aria-hidden="true"></i> Success Action</button>
<button class="bsk-btn bsk-btn-default"><i class="far fa-fw fa-exclamation-triangle" aria-hidden="true"></i> Warning Action</button>
<button class="bsk-btn bsk-btn-default"><i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i> Dangerous Action</button>
<button class="bsk-btn bsk-btn-default"><i class="far fa-fw fa-info-square" aria-hidden="true"></i> Info Action</button>
<button class="bsk-btn bsk-btn-success"><i class="far fa-fw fa-check" aria-hidden="true"></i> Success Action</button>
<button class="bsk-btn bsk-btn-warning"><i class="far fa-fw fa-exclamation-triangle" aria-hidden="true"></i> Warning Action</button>
<button class="bsk-btn bsk-btn-danger"><i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i> Dangerous Action</button>
<button class="bsk-btn bsk-btn-info"><i class="far fa-fw fa-info-square" aria-hidden="true"></i> Info Action</button>

Use this variant to draw attention away from a button, but whilst still functioning like one. Useful for less common actions, or those you don’t want users to use without thinking (such as delete).

<button class="bsk-btn bsk-btn-link" type="submit">Uncommon Action</button>

Sizes

Add one of these classes to alter the size of a button:

Button Size Button Size Class
Large .bsk-btn-lg
Small .bsk-btn-sm
Extra-small .bsk-btn-xl 

<p><button class="bsk-btn bsk-btn-default bsk-btn-lg">Large Button</button></p>
<p><button class="bsk-btn bsk-btn-default">Regular Button</button></p>
<p><button class="bsk-btn bsk-btn-default bsk-btn-sm">Small Button</button></p>
<p><button class="bsk-btn bsk-btn-default bsk-btn-xs">Extra-Small Button</button></p>

Block level buttons

Add .bsk-btn-block for buttons to span the width of their parent.

<div class="bsk-row">
  <div class="bsk-col-12-md-6 bsk-col-12-md-offset-3">
    <button class="bsk-btn bsk-btn-default bsk-btn-block" type="submit">Block Button</button>
  </div>
</div>

States

Active state

Active buttons appear pressed using a darker background, border and inset shadow. This state will be applied automatically when pressed, or forced by adding the .bsk-active class if needed.

Use aria-pressed="true" to give proper context to assistive technologies.

Active Action 
<button class="bsk-btn bsk-btn-default bsk-active">Active Action</button>
<a class="bsk-btn bsk-btn-default bsk-active" href="#" role="button">Active Action</a>

Disabled state

It is not safe to rely on this state to prevent users activating disabled actions

Browsers may not enforce these properties, or users may trivially edit the DOM. Server side protections must be used for dangerous actions.

Disabled button elements

Add the disabled attribute to indicate unavailable actions.

<button class="bsk-btn bsk-btn-default" disabled>Disabled Action</button>

Add the .bsk-disabled class to indicate unavailable actions.

Disabled Action 
<a class="bsk-btn bsk-btn-default bsk-disabled" href="#" role="button">Disabled Action</a>