Partner Portal


If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".


The default button style used for most cases.


.btn {
  @extend  %ftds-button;

.btn-default {
  @extend  %ftds-button-default;


Extra visual weight and identifies the primary action in a set of buttons.


<!-- Large size -->
.btn-lg {
  @extend  %ftds-button-large;

<!-- Primary / standard size -->
.btn-primary {
  @extend  %ftds-button-primary;

<!-- Standard size -->
.btn-sm {
  @extend  %ftds-button-small;

Text Buttons

Use text buttons for secondary actions or to discourage usage.


.btn-text {
  @extend  %ftds-button-text;

Button Group

Group buttons with similar or related actions, such as filters and toggles.


.btn-group {
  @extend  %ftds-button-group;

Icon Buttons

Add icons to buttons to increase visual weight and reinforce button functionality. Use icon-only buttons to reduce visual weight. With icon-only buttons, it is critical that the icon clearly conveys the button’s function.


.btn-i {
  @extend  %ftds-button-i;


Use destructive buttons for irreversible actions, such as permanently deleting something.


.btn-danger {
  @extend  %ftds-button-danger;


Use disabled="disabled" for <button> buttons. Use .disabled for <a> buttons.

.btn-default.btn-inverse {
  @extend  %ftds-button-inverse;


Active state buttons appear pressed. This applies to individual buttons and buttons within button groups. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Saving and Loading States

Change the text within a button to communicate that an action is processing.