diff --git a/less/base/_buttons.less b/less/base/_buttons.less
index ea00d9e..0e39a52 100644
--- a/less/base/_buttons.less
+++ b/less/base/_buttons.less
@@ -28,139 +28,6 @@
 }
 
 
-/*
----
-name: Buttons
-category: Components
----
-
-Buttons are best used to enable a user to perform a change or complete steps in a task.
-They are typically found inside forms, modal dialogs, or as calls to action.
-
-We have 3 main types of buttons:
-* **Default** (via `.upf-btn--default`) that can be used when you need multiple buttons
-  with no clear hierarchy between them.
-* **Primary** (via `.upf-btn--primary`) that is to be used to emphasize the most important
-action in a form (Example: "Save" or "Continue" in a form).
-* **Secondary** (via `.upf-btn--secondary`), that is to be used as a companion to primary action
-to represent a secondary action a user can perform. Because they can have negative consequences,
-especially when used unintentionally, Secondary Buttons have less visual weight.
-
-```buttons.html
-<div class="col-xs-4">
-  <div class="margin-top-xxx-sm">
-    <button class="upf-btn upf-btn--default">Default</button>
-  </div>
-  <div class="margin-top-xxx-sm">
-    <button class="upf-btn upf-btn--default disabled">Disabled</button>
-  </div>
-</div>
-
-<div class="col-xs-4">
-  <div class="margin-top-xxx-sm">
-    <button class="upf-btn upf-btn--primary">Primary</button>
-  </div>
-  <div class="margin-top-xxx-sm">
-    <button class="upf-btn upf-btn--primary disabled">Disabled Primary</button>
-  </div>
-</div>
-
-<div class="col-xs-4">
-  <div class="margin-top-xxx-sm">
-    <button class="upf-btn upf-btn--secondary">Secondary</button>
-  </div>
-  <div class="margin-top-xxx-sm">
-    <button class="upf-btn upf-btn--secondary disabled">Disabled Secondary</button>
-  </div>
-</div>
-```
-
-### Alternative buttons
-------------------------
-* **For dark background** (via `.upf-btn--dark-bg`) can be used for buttons on dark backgrounds to ensure that the button is still visible.
-
-* **Destructive buttons** (via `.upf-btn--destructive`) can be used to signify a call-to-action that is negative (such as deletion)
-
-```buttons-alternative.html
-<div style="background-color: #1b0059;" class="col-xs-4">
-  <div class="margin-top-xxx-sm">
-    <button class="upf-btn upf-btn--dark-bg">Dark background</button>
-  </div>
-  <div class="margin-top-xxx-sm">
-    <button class="upf-btn upf-btn--dark-bg disabled">Disabled dark background</button>
-  </div>
-</div>
-
-<div class="col-xs-4">
-  <button class="upf-btn upf-btn--destructive">
-    Destructive button
-  </button>
-</div>
-```
-
-```buttons-destructive-demo.hbs
-    {{#destructive-button destructiveAction="deleteCampaign" record=model
-      <i class="fa fa-trash"></i> &nbsp; Delete
-    {{/destructive-button}}
-```
-TODO: Finish this (font-awesome imports not working correctly?)
-* **Button with social media**
-* **Button with right icon** can be used to announce that clicking it will lead somewhere, making it useful for multistep processes.
-```buttons-alternative-2.html
-<button class="upf-btn upf-btn--has-right-icon">
-  Button with right icon
-
-  <span class="upf-btn__right-icon">
-    <i class="fa fa-long-arrow-right"></i>
-  </span>
-</button>
-```
-
-### Available Sizes
--------------------
-
-Need different sizes to fit your design. Use `.upf-btn--small` or `.upf-btn--x-small`
-as size modifiers.
-
-```sizes.html
-<div class="col-xs-4">
-  <div class="margin-bottom-xxx-sm">
-    <button class="upf-btn upf-btn--default">Standard Size</button>
-  </div>
-  <div class="margin-bottom-xxx-sm">
-    <button class="upf-btn upf-btn--primary">Standard Size</button>
-  </div>
-  <div class="margin-bottom-xxx-sm">
-    <button class="upf-btn upf-btn--secondary">Standard Size</button>
-  </div>
-</div>
-
-<div class="col-xs-4">
-  <div class="margin-bottom-xxx-sm">
-    <button class="upf-btn upf-btn--default upf-btn--small">Size Small</button>
-  </div>
-  <div class="margin-bottom-xxx-sm">
-    <button class="upf-btn upf-btn--primary upf-btn--small">Size Small</button>
-  </div>
-  <div class="margin-bottom-xxx-sm">
-    <button class="upf-btn upf-btn--secondary upf-btn--small">Size Small</button>
-  </div>
-</div>
-
-<div class="col-xs-4">
-  <div class="margin-bottom-xxx-sm">
-    <button class="upf-btn upf-btn--default upf-btn--x-small">Size Extra Small</button>
-  </div>
-  <div class="margin-bottom-xxx-sm">
-    <button class="upf-btn upf-btn--primary upf-btn--x-small">Size Extra Small</button>
-  </div>
-  <div class="margin-bottom-xxx-sm">
-    <button class="upf-btn upf-btn--secondary upf-btn--x-small">Size Extra Small</button>
-  </div>
-</div>
-```
-*/
-
 .upf-btn {
   background-image: none;
   border-radius: @default-radius;
@@ -353,15 +220,14 @@ as size modifiers.
 // --------------------------------------------------
 
 .upf-btn--small, .upf-btn--sm {
-  height: @input-size-sm;
+  height: var(--spacing-px-24);
 
   a& { line-height: 2rem; }
 }
 
+// Deprecated in favor of small.
 .upf-btn--x-small, .upf-btn--xs {
-  height: @input-size-x-sm;
-  padding: 0 @spacing-xx-sm;
-  line-height: 2rem;
+  &:extend(.upf-btn--small);
 }
 
 .upf-btn--medium, .upf-btn--md {