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
Variants
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.Sizes
btn-sm
if you want to use the small sized button.Block buttons
Disabled buttons
disabled
class to created disabled buttons.Icon buttons
Anatomy
- Icon (situational): Serves to give more context to the button. E.g a plus icon to indicate addition or creation.
- Text: Serves to tell users what the button is being used for. Length of the text is expandable.
- 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
Large - 48px
Medium - 40px
Small - 32px
Usage guidelines
Buttons should be used:
- 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:
- When linking pages in a site.
- 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;