Buttons

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

Default

The default button style used for most cases.


.btn {
  @extend  %ftds-button;
}

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

Primary

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

Destructive

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


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

Disabled

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


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

Active

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.

Partner Portal