Button

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

Example

Default button

HTML React Web Component
<button type="button" class="btn btn-primary sgds">Default</button>
View on React storybook View on Web component storybook

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.

HTML React Web Component
<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>
View on React storybook View on Web component storybook

Sizes

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

HTML React Web Component
<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>
View on React storybook View on Web component storybook

Block buttons

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

HTML React Web Component
<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>
View on React storybook View on Web component storybook

Disabled buttons

Use the disabled class to created disabled buttons.

HTML React Web Component
<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>
View on React storybook View on Web component storybook

Icon buttons

HTML React Web Component
<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>
View on React storybook View on Web component storybook

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

Button size Height Button class
Small 40px .btn-sm
Default 48px .btn
Large 58px .btn-lg

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;

Last updated 22 November 2023
Home


Latest version 2.2.0