Button

Buttons communicate actions that users can take throughout your portal which can be used in places such as modals, forms and cards

General

Example

Default button 

 
<button type="button" class="btn btn-primary sgds">Default</button>

Variants

Use any of the available button styles such as primary to quickly created styled buttons. Some of the outline buttons, btn-outline-light in particular, should be used on a darker background for sufficient color contrast.

 
<button type="button" class="btn btn-primary sgds">Primary</button>
<button type="button" class="btn btn-secondary sgds">Secondary</button>
<button type="button" class="btn btn-success sgds">Success</button>
<button type="button" class="btn btn-danger sgds">Danger</button>
<button type="button" class="btn btn-warning sgds">Warning</button>
<button type="button" class="btn btn-info sgds">Info</button>
<button type="button" class="btn btn-light sgds">Light</button>
<button type="button" class="btn btn-dark sgds">Dark</button>
<button type="button" class="btn btn-outline-primary sgds">Outline-primary</button>
<button type="button" class="btn btn-outline-secondary sgds">Outline-secondary</button>
<button type="button" class="btn btn-outline-success sgds">Outline-success</button>
<button type="button" class="btn btn-outline-warning sgds">Outline-warning</button>
<button type="button" class="btn btn-outline-danger sgds">Outline-danger</button>
<button type="button" class="btn btn-outline-info sgds">Outline-info</button>
<button type="button" class="btn btn-outline-light sgds">Outline-light</button>
<button type="button" class="btn btn-outline-dark sgds">Outline-dark</button>

Sizes

Our default button size is large, use the class btn-sm if you want to use the small sized button.

 
<button type="button" class="btn btn-primary btn-lg sgds">Large button</button>
<button type="button" class="btn btn-primary btn-sm sgds">Small button</button>

Block buttons

Use a mix of display and grid utilities to create full-width stacks or block buttons.

 
<div class="d-grid gap-2">
    <button class="btn btn-primary btn-lg" type="button">Button</button>
    <button class="btn btn-outline-dark btn-lg" type="button">Button</button>
</div>

Disabled buttons

Use the disabled class to created disabled buttons.

 
<button disabled type="button" class="btn btn-primary sgds">Primary button</button>
<button disabled type="button" class="btn btn-secondary sgds">Secondary button</button>
<button disabled type="button" class="btn btn-outline-dark sgds">Outline button</button>

Icon buttons 

 
<button type="button" class="btn btn-primary sgds"><i class="bi bi-arrow-90deg-left"></i> Button with icon</button>
<button type="button" class="btn btn-primary btn-sm sgds"><i class="bi bi-arrow-90deg-left"></i> Button with icon</button>

Anatomy

Button Anatomy
  1. Icon (situational): Serves to give more context to the button. E.g a plus icon to indicate addition or creation.
  2. Text: Serves to tell users what the button is being used for. Length of the text is expandable.
  3. Container: Takes on the length of the text within the button while maintaing spacing of the overall button.

Spacing

Alert Spacing

Within the button
Ensure that there is a min of 8px vertical spacing and 16px horizontal spacing within the button.
Base height
Large - 48px
Medium - 40px
Small - 32px

Usage guidelines

Buttons should be used:

  1. For important actions that you want your users to take. For example submission of a form or editing a page.

Buttons should not be used:

  1. When linking pages in a site.
  2. For less important actions. For those types of actions, consider using text links.

Usability guidelines

Use primary buttons for actions that go to the next step or for submission
This makes it clear to the user that a action will happen when they click on the button.

Use outline or secondary buttons for secondary actions
This will help differentiate it from primary action buttons.

Ensure buttons look clickable
Do ensure that hover and active states are clear to the user from its static state.

Avoid using too many buttons
Buttons should be reserved mainly primary actions the users is supposed to take within a page. E.g on a form you may use 3 buttons, 1 primary and 2 secondary but text links for actions within the page.

Keep text within button short
Text should be as short as possible and with action text to allow the user to easily understand what will happen when the button is clicked. E.g Submit, Next or Download.

Button design tokens

$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-font-family:             $input-btn-font-family !default;
$btn-font-size:               $input-btn-font-size !default;
$btn-line-height:             $input-btn-line-height !default;
$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-font-size-sm:            $input-btn-font-size-sm !default;
$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;
$btn-border-width:            $input-btn-border-width !default;
$btn-font-weight:             $font-weight-normal !default;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width:             $input-btn-focus-width !default;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
$btn-disabled-opacity:        .65 !default;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color:              $link-color !default;
$btn-link-hover-color:        $link-hover-color !default;
$btn-link-disabled-color:     $gray-600 !default;
$btn-border-radius:           $border-radius !default;
$btn-border-radius-sm:        $border-radius-sm !default;
$btn-border-radius-lg:        $border-radius-lg !default;
$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$btn-hover-bg-shade-amount:       15% !default;
$btn-hover-bg-tint-amount:        15% !default;
$btn-hover-border-shade-amount:   20% !default;
$btn-hover-border-tint-amount:    10% !default;
$btn-active-bg-shade-amount:      20% !default;
$btn-active-bg-tint-amount:       20% !default;
$btn-active-border-shade-amount:  25% !default;
$btn-active-border-tint-amount:   10% !default;
Home
Previous version 2.1.1