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 cgds">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 cgds">Primary</button>
<button type="button" class="btn btn-secondary cgds">Secondary</button>
<button type="button" class="btn btn-success cgds">Success</button>
<button type="button" class="btn btn-danger cgds">Danger</button>
<button type="button" class="btn btn-warning cgds">Warning</button>
<button type="button" class="btn btn-info cgds">Info</button>
<button type="button" class="btn btn-light cgds">Light</button>
<button type="button" class="btn btn-dark cgds">Dark</button>
<button type="button" class="btn btn-outline-primary cgds">Outline-primary</button>
<button type="button" class="btn btn-outline-secondary cgds">Outline-secondary</button>
<button type="button" class="btn btn-outline-success cgds">Outline-success</button>
<button type="button" class="btn btn-outline-warning cgds">Outline-warning</button>
<button type="button" class="btn btn-outline-danger cgds">Outline-danger</button>
<button type="button" class="btn btn-outline-info cgds">Outline-info</button>
<button type="button" class="btn btn-outline-light cgds">Outline-light</button>
<button type="button" class="btn btn-outline-dark cgds">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 cgds">Large button</button>
<button type="button" class="btn btn-primary btn-sm cgds">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 create disabled buttons.

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

Icon buttons 

 
<button type="button" class="btn btn-primary cgds"><i class="bi bi-arrow-90deg-left"></i> Button with icon</button>
<button type="button" class="btn btn-primary btn-sm cgds"><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 maintaining 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 an 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 are supposed to take within a page. E.g., on a form you may use three buttons, one primary and two 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.

Design tokens Button

$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 1.0.3