Skip to main content

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.

This variant has meaning

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>

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.

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