Button

Example

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

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

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

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

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

<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

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

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	38px	.btn-sm
Default	48px	.btn
Large	58px	.btn-lg

Usage guidelines

Best practices:

1. Fluid components like button never exist in isolation. They are always part of another component, like modal or form.
2. Use a visual hierarchy to differentiate between primary actions (e.g., "Submit"), secondary actions (e.g., "Cancel"), and tertiary actions (e.g., "Learn more").

Buttons should be used when:

1. Initiating an action: Use buttons for actions such as submitting a form, saving data, or navigating to another page. Buttons signal that user interaction is required to complete a task.

Buttons should not be used when:

1. The purpose is purely to navigate to another page or section, use a hyperlink instead of a button. Links are better suited for navigation, while buttons are for actions.
2. There are too many buttons on the screen, it can overwhelm users.

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.

Behaviour
Ensure button’s hover, active and disabled states are clear to the user from its default state.

Accessibility guidelines

Aria attributes

1. The button has an accessible label. By default, the accessible name is computed from any text content inside the button element. However, it can also be provided with aria-labelledby or aria-label.
2. If a description of the button's function is present, the button element has aria-describedby set to the ID of the element containing the description.

Keyboard accessibility

1. Tab or Shift-Tab to navigate between buttons.
2. Enter or Space to activate button.

Focus indicator

1. Provide a clear visual indication when the button is focused, such as using the focused state.
2. Ensure that the button receives focus when the page loads or when it becomes visible.
3. Button is to be included in the natural tab order of the page and can be focused using the keyboard.

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;