New This website is new, 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:

  • <input>
  • <a>

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">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">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 inline-block" type="image/svg+xml" data="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4-beta.1/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 colours can be used for context by adding these classes:

<button class="bsk-btn bsk-btn-success"><i class="fa-solid fa-check"></i> Success Action</button>
<button class="bsk-btn bsk-btn-warning"><i class="fa-solid fa-exclamation-triangle"></i> Warning Action</button>
<button class="bsk-btn bsk-btn-danger"><i class="fa-solid fa-exclamation-circle"></i> Dangerous Action</button>
<button class="bsk-btn bsk-btn-info"><i class="fa-solid fa-info-square"></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-primary 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-xs 

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

Block level buttons

Add .w-full for buttons to span the width of their parent.

<div class="w-100">
  <p><button class="bsk-btn bsk-btn-primary w-full">Block button</button></p>
</div>

Active states

Active State

Active buttons appear pressed using a darker background and an inset shadow. This state will be applied automatically when pressed, or forced by adding the .bsk-active class if needed. Note, the .bsk-active class only affects the inner shadow and the text decoration of the element, not the colors.

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

Active Action

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

Disabled states

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>

For a link a Add the bsk-disabled class for unavailable actions.

Disabled Action

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