From 2551191f30befd422b489486b192bb4916a4b090 Mon Sep 17 00:00:00 2001
From: ritz078 <rkritesh078@gmail.com>
Date: Thu, 9 Aug 2018 22:51:01 +0530
Subject: [PATCH 1/4] feat(Button): created xs size and added success and alert
 types

BREAKING CHANGE: `large` is replaced by `size="x-small" | "small" | "large"`.
---
 src/components/Button.tsx              |  78 +++++++-------
 src/components/DropDown.tsx            |  12 +--
 src/components/Stepper.tsx             |   4 +-
 src/components/styles/Button.styles.ts | 142 ++++++++++++++-----------
 src/components/typings/Button.ts       |  15 ++-
 stories/button.story.tsx               |  52 +++------
 6 files changed, 150 insertions(+), 153 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c20aa2e3..696da0d2 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,65 +1,69 @@
 import * as React from "react";
-import { cx } from "emotion";
-import {
-  buttonStyle,
-  iconStyle,
-  getDynamicButtonStyle
-} from "./styles/Button.styles";
+import { css, cx } from "emotion";
+import { iconStyle, getButtonStyle } from "./styles/Button.styles";
 import Ink from "react-ink";
-import { ButtonProps } from "./typings/Button";
+import { ButtonProps, DropDownButtonProps } from "./typings/Button";
 import Loader from "./Loader";
-import { colors } from "../theme";
+import { colors, constants } from "../theme";
 
 const Button: React.SFC<ButtonProps> = ({
-  large,
   type = "primary",
   disabled,
   children,
   onClick,
   width,
-  isOpen,
   showShadow,
   className,
   showRipple = true,
-  isSelected,
-  loading
+  loading,
+  size = "small"
 }) => {
-  const _className = cx(
-    buttonStyle,
-    getDynamicButtonStyle(large, type, showShadow),
-    {
-      _pebble_btn_disabled: disabled,
-      _pebble_btn_link: type === "link",
-      _pebble_btn_dropdown: type === "dropdown",
-      _pebble_btn_dropdown_open: type === "dropdown" && isOpen,
-      _pebble_btn_dropdown_selected: type === "dropdown" && isSelected,
-      _pebble_btn_loading: loading
-    }
-  );
-
   const disableAction = disabled || loading;
 
   return (
     <button
-      className={cx(_className, className)}
+      className={cx(getButtonStyle(size, type, showShadow), className)}
       onClick={!disableAction ? onClick : undefined}
       style={{ width }}
+      disabled={disabled}
     >
       {loading ? <Loader color={colors.white.base} scale={0.4} /> : children}
-      {type === "dropdown" && (
-        <React.Fragment>
-          {" "}
-          <i
-            className={cx("icon-arrow-down", iconStyle)}
-            style={{
-              transform: isOpen ? "rotate(180deg)" : "none"
-            }}
-          />
-        </React.Fragment>
-      )}
       {!disableAction && showRipple && type !== "link" && <Ink />}
     </button>
   );
 };
 
+export const DropDownButton: React.SFC<DropDownButtonProps> = ({
+  isOpen,
+  isSelected,
+  children,
+  ...props
+}) => {
+  const className = cx(
+    css({
+      border: constants.border.base
+    }),
+    {
+      [css({
+        backgroundColor: colors.white.base,
+        color: colors.gray.darker
+      })]: !(isOpen || isSelected)
+    }
+  );
+
+  return (
+    <Button {...props} type="secondary" className={className}>
+      <React.Fragment>
+        {children}{" "}
+        <i
+          className={cx("icon-arrow-down", iconStyle)}
+          style={{
+            transform: isOpen ? "rotate(180deg)" : "none"
+          }}
+        />
+      </React.Fragment>
+    </Button>
+  );
+};
+
 export default Button;
diff --git a/src/components/DropDown.tsx b/src/components/DropDown.tsx
index ba3397c7..b8b1c697 100644
--- a/src/components/DropDown.tsx
+++ b/src/components/DropDown.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DropdownProps, DropdownState } from "./typings/Dropdown";
-import Button from "./Button";
+import { DropDownButton } from "./Button";
 import { dropDownStyle } from "./styles/Dropdown.styles";
 import { cx } from "emotion";
 import OutsideClick from "./OutsideClick";
@@ -11,8 +11,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
   };
 
   static defaultProps: Partial<DropdownProps> = {
-    closeOnClickOutside: true,
-    type: "dropdown"
+    closeOnClickOutside: true
   };
 
   private toggleDropdown = () => {
@@ -25,7 +24,6 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
     const {
       buttonLabel,
       children,
-      type,
       labelComponent,
       padding,
       className,
@@ -48,16 +46,14 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
           {labelComponent ? (
             labelComponent({ isOpen, toggleDropdown: this.toggleDropdown })
           ) : (
-            <Button
+            <DropDownButton
               isSelected={isSelected}
-              showShadow
-              type={type}
               isOpen={isOpen}
               onClick={this.toggleDropdown}
               disabled={disabled}
             >
               {buttonLabel}
-            </Button>
+            </DropDownButton>
           )}
           {this.state.isOpen && (
             <div
diff --git a/src/components/Stepper.tsx b/src/components/Stepper.tsx
index 07a447bb..6824ff8a 100644
--- a/src/components/Stepper.tsx
+++ b/src/components/Stepper.tsx
@@ -30,7 +30,7 @@ class Stepper extends React.PureComponent<StepperProps, StepperState> {
       return (
         <footer className={footerStyle}>
           <Button
-            large
+            size="large"
             width={100}
             type={"secondary"}
             onClick={leftButtonData.action}
@@ -38,7 +38,7 @@ class Stepper extends React.PureComponent<StepperProps, StepperState> {
             {leftButtonData.label}
           </Button>
           <Button
-            large
+            size="large"
             width={100}
             loading={props.isRightButtonLoading}
             onClick={rightButtonData.action}
diff --git a/src/components/styles/Button.styles.ts b/src/components/styles/Button.styles.ts
index 819781e7..76c1349d 100644
--- a/src/components/styles/Button.styles.ts
+++ b/src/components/styles/Button.styles.ts
@@ -1,5 +1,6 @@
-import { css, keyframes } from "emotion";
+import { css } from "emotion";
 import { colors, constants, typography } from "../../theme";
+const { violet, gray, white, red, emerald } = colors;
 
 export const iconStyle = css({
   marginLeft: 15,
@@ -10,19 +11,17 @@ export const iconStyle = css({
   marginTop: 2
 });
 
-const { violet, gray, white } = colors;
-
 const buttonPseudo = {
   primary: {
     color: white.base,
     backgroundColor: violet.base,
-    "&:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover": {
+    "&:not([disabled]):hover": {
       backgroundColor: violet.light
     },
-    "&:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active": {
+    "&:not([disabled]):active": {
       backgroundColor: violet.dark
     },
-    "&._pebble_btn_disabled": {
+    "&[disabled]": {
       color: white.base,
       backgroundColor: violet.lighter
     }
@@ -30,29 +29,62 @@ const buttonPseudo = {
   secondary: {
     color: gray.darker,
     backgroundColor: gray.lighter,
-    "&:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover": {
+    "&:not([disabled]):hover": {
       backgroundColor: gray.lightest
     },
-    "&:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active": {
+    "&:not([disabled]):active": {
       backgroundColor: gray.light
     },
-    "&._pebble_btn_disabled": {
+    "&[disabled]": {
+      color: gray.base,
+      backgroundColor: gray.lighter
+    }
+  },
+  success: {
+    color: white.base,
+    backgroundColor: emerald.base,
+    "&:not([disabled]):hover": {
+      backgroundColor: emerald.light
+    },
+    "&:not([disabled]):active": {
+      backgroundColor: emerald.light
+    },
+    "&[disabled]": {
+      color: gray.base,
+      backgroundColor: gray.lighter
+    }
+  },
+  alert: {
+    color: white.base,
+    backgroundColor: red.base,
+    "&:not([disabled]):hover": {
+      backgroundColor: red.light
+    },
+    "&:not([disabled]):active": {
+      backgroundColor: red.light
+    },
+    "&[disabled]": {
       color: gray.base,
       backgroundColor: gray.lighter
     }
-  }
-};
-
-const rotate = keyframes({
-  from: {
-    transform: "rotate(0deg)"
   },
-  to: {
-    transform: "rotate(360deg)"
+  link: {
+    backgroundColor: "transparent",
+    border: 0,
+    color: violet.base,
+    minWidth: 0,
+    padding: 0,
+    fontSize: 14,
+    ":not([disabled]):hover": {
+      textDecoration: "underline"
+    },
+    "&[disabled]": {
+      color: violet.lighter
+    }
   }
-});
+};
 
-export const buttonStyle = css({
+export const commonButtonStyle = css({
   lineHeight: "23px",
   height: constants.buttonHeight,
   padding: "0 20px",
@@ -67,60 +99,42 @@ export const buttonStyle = css({
   whiteSpace: "nowrap",
   justifyContent: "center",
   border: 0,
-  "&._pebble_btn_disabled": {
+  "&[disabled]": {
     cursor: "not-allowed",
     backgroundColor: colors.white.base,
     ":focus": {
       border: "none"
     }
   },
-  "&._pebble_btn_dropdown": {
-    ...buttonPseudo.secondary,
-    backgroundColor: white.base
-  },
-  "&._pebble_btn_dropdown_open": {
-    ...buttonPseudo.primary,
-    ":focus": {
-      border: "none"
-    }
-  },
-  "&._pebble_btn_dropdown_selected": {
-    backgroundColor: colors.violet.base,
-    color: colors.white.base
-  },
   ":focus": {
     border: "none"
-  },
-  "&._pebble_btn_loading": {
-    ".icon-spinner": {
-      animation: `${rotate} 1500ms infinite linear`
-    }
-  },
-  "&._pebble_btn_link": {
-    backgroundColor: "transparent",
-    border: 0,
-    color: violet.base,
-    minWidth: 0,
-    padding: 0,
-    fontSize: 14,
-    ":not(._pebble_btn_disabled):hover": {
-      textDecoration: "underline"
-    },
-    "&._pebble_btn_disabled": {
-      color: violet.lighter,
-      cursor: "not-allowed"
-    }
   }
 });
 
-export const getDynamicButtonStyle = (isLarge, type, showShadow) => {
-  const isPrimary = type === "primary";
-  return css({
-    ...(isLarge ? typography.normal.regular : typography.s.regular),
-    minWidth: isLarge ? 140 : 100,
-    height: isLarge ? 50 : 40,
-    backgroundColor: isPrimary ? violet.base : gray.lighter,
-    boxShadow: showShadow ? constants.boxShadow.base : "none",
-    ...buttonPseudo[type]
-  });
+const styleBasedOnSize = {
+  "x-small": {
+    height: 25,
+    minWidth: 70,
+    ...typography.xs.light
+  },
+  small: {
+    height: 40,
+    minWidth: 100,
+    ...typography.s.regular
+  },
+  large: {
+    height: 50,
+    minWidth: 140,
+    ...typography.normal.regular
+  }
 };
+
+export const getButtonStyle = (size, type, showShadow) =>
+  css([
+    commonButtonStyle,
+    {
+      ...styleBasedOnSize[size],
+      ...buttonPseudo[type],
+      boxShadow: showShadow ? constants.boxShadow.base : "none"
+    }
+  ]);
diff --git a/src/components/typings/Button.ts b/src/components/typings/Button.ts
index bcdf0154..dfecc839 100644
--- a/src/components/typings/Button.ts
+++ b/src/components/typings/Button.ts
@@ -1,18 +1,23 @@
 import * as React from "react";
 
-export type ButtonType = "primary" | "secondary" | "dropdown" | "link";
+export type ButtonType = "primary" | "secondary" | "link" | "success" | "alert";
+
+type Children = JSX.Element | string | number | React.ReactChildren;
 
 export interface ButtonProps {
-  children: JSX.Element | string | number | React.ReactChildren;
+  children: Children;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   showShadow?: boolean;
   disabled?: boolean;
   type?: ButtonType;
-  isOpen?: boolean;
-  large?: boolean;
+  size?: "x-small" | "small" | "large";
   width?: number;
   className?: string;
   showRipple?: boolean;
-  isSelected?: boolean;
   loading?: boolean;
 }
+
+export interface DropDownButtonProps extends ButtonProps {
+  isOpen: boolean;
+  isSelected: boolean;
+}
diff --git a/stories/button.story.tsx b/stories/button.story.tsx
index 5c61cc7c..4a4648d1 100644
--- a/stories/button.story.tsx
+++ b/stories/button.story.tsx
@@ -2,43 +2,21 @@ import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { boolean, select } from "@storybook/addon-knobs";
 import { action } from "@storybook/addon-actions";
-import Combinations from "./Combinations";
 import Button from "../src/components/Button";
 
-const t = ["primary", "secondary", "dropdown", "link"];
+const t = ["primary", "secondary", "link", "success", "alert"];
+const size = ["x-small", "small", "large"];
 
-storiesOf("Button", module)
-  .add("Playground", () => (
-    <Button
-      large={boolean("Large")}
-      disabled={boolean("Disabled")}
-      type={select("Type", t, "primary")}
-      showShadow={boolean("Box Shadow")}
-      isOpen={boolean("Dropdown open")}
-      onClick={action("click")}
-      isSelected={boolean("isSelected")}
-      showRipple={boolean("showRipple")}
-      loading={boolean("loading")}
-    >
-      Submit
-    </Button>
-  ))
-  .add("Design System", () => (
-    <Combinations
-      Component={Button}
-      titleExtractor={x => x.type}
-      props={{
-        onClick: () => {}
-      }}
-      groupProps={{
-        type: t,
-        large: [true, false]
-      }}
-      randomProps={{
-        disabled: [true, false],
-        showShadow: [true, false]
-      }}
-    >
-      Submit
-    </Combinations>
-  ));
+storiesOf("Button", module).add("Playground", () => (
+  <Button
+    size={select("size", size, "small")}
+    disabled={boolean("Disabled")}
+    type={select("Type", t, "primary")}
+    showShadow={boolean("Box Shadow")}
+    onClick={action("click")}
+    showRipple={boolean("showRipple", true)}
+    loading={boolean("loading")}
+  >
+    Submit
+  </Button>
+));

From a7fa8286cc8b69ab17f1c1e753588e850074c0f6 Mon Sep 17 00:00:00 2001
From: ritz078 <rkritesh078@gmail.com>
Date: Fri, 10 Aug 2018 19:02:38 +0530
Subject: [PATCH 2/4] test(button): updated snapshots

---
 src/components/Button.tsx                     |   18 +-
 .../__snapshots__/button.test.tsx.snap        | 8324 ++++++-----------
 .../__snapshots__/popper.test.tsx.snap        |   92 +-
 .../__tests__/__snapshots__/tag.test.tsx.snap |    4 +-
 src/components/__tests__/button.test.tsx      |    2 +-
 src/components/styles/Button.styles.ts        |  184 +-
 src/components/typings/Button.ts              |   16 +
 src/theme/colors.ts                           |   12 +-
 src/theme/typings/colors.d.ts                 |   38 +-
 stories/Combinations.tsx                      |  144 -
 stories/button.story.tsx                      |    1 +
 11 files changed, 2918 insertions(+), 5917 deletions(-)
 delete mode 100644 stories/Combinations.tsx

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 696da0d2..36f9e06f 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -16,13 +16,22 @@ const Button: React.SFC<ButtonProps> = ({
   className,
   showRipple = true,
   loading,
-  size = "small"
+  size = "small",
+  filled = "true"
 }) => {
   const disableAction = disabled || loading;
 
+  const _className = cx(
+    getButtonStyle(size, type, showShadow, filled),
+    className,
+    {
+      _pebble_button_xs_small: size === "x-small"
+    }
+  );
+
   return (
     <button
-      className={cx(getButtonStyle(size, type, showShadow), className)}
+      className={_className}
       onClick={!disableAction ? onClick : undefined}
       style={{ width }}
       disabled={disabled}
@@ -37,9 +46,10 @@ export const DropDownButton: React.SFC<DropDownButtonProps> = ({
   isOpen,
   isSelected,
   children,
+  className,
   ...props
 }) => {
-  const className = cx(
+  const _className = cx(
     css({
       border: constants.border.base
     }),
@@ -52,7 +62,7 @@ export const DropDownButton: React.SFC<DropDownButtonProps> = ({
   );
 
   return (
-    <Button {...props} type="secondary" className={className}>
+    <Button {...props} type="secondary" className={cx(_className, className)}>
       <React.Fragment>
         {children}{" "}
         <i
diff --git a/src/components/__tests__/__snapshots__/button.test.tsx.snap b/src/components/__tests__/__snapshots__/button.test.tsx.snap
index 12866d27..7d3cd1e7 100644
--- a/src/components/__tests__/__snapshots__/button.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/button.test.tsx.snap
@@ -1,22 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button Combos test { disabled: false,
-  type: 'dropdown',
+  type: 'alert',
   showRipple: false,
   loading: false,
   large: false } 1`] = `
 .emotion-0 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
-.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -41,99 +30,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_dropdown emotion-1"
+  className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -142,35 +73,15 @@ exports[`Button Combos test { disabled: false,
   }
 >
   Submit
-   
-  <i
-    className="icon-arrow-down emotion-0"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
 exports[`Button Combos test { disabled: false,
-  type: 'dropdown',
+  type: 'alert',
   showRipple: false,
   loading: false,
   large: true } 1`] = `
 .emotion-0 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
-.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -195,99 +106,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
 }
 
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_dropdown emotion-1"
+  className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -296,34 +149,14 @@ exports[`Button Combos test { disabled: false,
   }
 >
   Submit
-   
-  <i
-    className="icon-arrow-down emotion-0"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
 exports[`Button Combos test { disabled: false,
-  type: 'dropdown',
+  type: 'alert',
   showRipple: false,
   loading: true,
   large: false } 1`] = `
-.emotion-1 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -361,7 +194,7 @@ exports[`Button Combos test { disabled: false,
   animation-delay: -0.16s;
 }
 
-.emotion-2 {
+.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -386,99 +219,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-2._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
 }
 
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-2._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-2._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-2._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-2._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-2:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-2._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-2._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-2._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_dropdown _pebble_btn_loading emotion-2"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -515,34 +290,14 @@ exports[`Button Combos test { disabled: false,
       }
     />
   </div>
-   
-  <i
-    className="icon-arrow-down emotion-1"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
 exports[`Button Combos test { disabled: false,
-  type: 'dropdown',
+  type: 'alert',
   showRipple: false,
   loading: true,
   large: true } 1`] = `
-.emotion-1 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -580,7 +335,7 @@ exports[`Button Combos test { disabled: false,
   animation-delay: -0.16s;
 }
 
-.emotion-2 {
+.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -605,99 +360,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-2._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
 }
 
-.emotion-2._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-2._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-2._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-2._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-2._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-2:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-2._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-2._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-2._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_dropdown _pebble_btn_loading emotion-2"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -734,35 +431,15 @@ exports[`Button Combos test { disabled: false,
       }
     />
   </div>
-   
-  <i
-    className="icon-arrow-down emotion-1"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
 exports[`Button Combos test { disabled: false,
-  type: 'dropdown',
+  type: 'alert',
   showRipple: true,
   loading: false,
   large: false } 1`] = `
 .emotion-0 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
-.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -787,99 +464,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
 }
 
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_dropdown emotion-1"
+  className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -888,15 +507,6 @@ exports[`Button Combos test { disabled: false,
   }
 >
   Submit
-   
-  <i
-    className="icon-arrow-down emotion-0"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
   <canvas
     height={0}
     onDragOver={[Function]}
@@ -919,22 +529,11 @@ exports[`Button Combos test { disabled: false,
 `;
 
 exports[`Button Combos test { disabled: false,
-  type: 'dropdown',
+  type: 'alert',
   showRipple: true,
   loading: false,
   large: true } 1`] = `
 .emotion-0 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
-.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -959,99 +558,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
 }
 
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_dropdown emotion-1"
+  className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -1060,15 +601,6 @@ exports[`Button Combos test { disabled: false,
   }
 >
   Submit
-   
-  <i
-    className="icon-arrow-down emotion-0"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
   <canvas
     height={0}
     onDragOver={[Function]}
@@ -1091,21 +623,10 @@ exports[`Button Combos test { disabled: false,
 `;
 
 exports[`Button Combos test { disabled: false,
-  type: 'dropdown',
+  type: 'alert',
   showRipple: true,
   loading: true,
   large: false } 1`] = `
-.emotion-1 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1143,7 +664,7 @@ exports[`Button Combos test { disabled: false,
   animation-delay: -0.16s;
 }
 
-.emotion-2 {
+.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -1168,99 +689,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-2._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-2._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-2._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-2._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-2._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-2:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-2._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-2._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-2._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_dropdown _pebble_btn_loading emotion-2"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -1297,34 +760,14 @@ exports[`Button Combos test { disabled: false,
       }
     />
   </div>
-   
-  <i
-    className="icon-arrow-down emotion-1"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
 exports[`Button Combos test { disabled: false,
-  type: 'dropdown',
+  type: 'alert',
   showRipple: true,
   loading: true,
   large: true } 1`] = `
-.emotion-1 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1362,7 +805,7 @@ exports[`Button Combos test { disabled: false,
   animation-delay: -0.16s;
 }
 
-.emotion-2 {
+.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -1387,99 +830,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-2._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-2._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-2._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-2._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-2._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-2:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-2._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-2._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-2._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_dropdown _pebble_btn_loading emotion-2"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -1516,15 +901,6 @@ exports[`Button Combos test { disabled: false,
       }
     />
   </div>
-   
-  <i
-    className="icon-arrow-down emotion-1"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
@@ -1558,99 +934,33 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
-  font-weight: 400;
-  color: #101721;
-  font-size: 12px;
-  min-width: 100px;
   height: 40px;
-  background-color: #EDEDED;
+  min-width: 0;
+  font-weight: 400;
+  color: #6161FF;
+  font-size: 14px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
 }
 
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-0:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
 }
 
 <button
-  className="_pebble_btn_link emotion-0"
+  className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -1692,99 +1002,33 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 0;
   font-weight: 400;
-  color: #101721;
+  color: #6161FF;
   font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
 }
 
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-0:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
 }
 
 <button
-  className="_pebble_btn_link emotion-0"
+  className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -1863,99 +1107,33 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
-  font-weight: 400;
-  color: #101721;
-  font-size: 12px;
-  min-width: 100px;
   height: 40px;
-  background-color: #EDEDED;
+  min-width: 0;
+  font-weight: 400;
+  color: #6161FF;
+  font-size: 14px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
 }
 
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-1:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
+.emotion-1[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
 }
 
 <button
-  className="_pebble_btn_link _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -2062,99 +1240,33 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 0;
   font-weight: 400;
-  color: #101721;
+  color: #6161FF;
   font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
 }
 
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-1:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
+.emotion-1[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
 }
 
 <button
-  className="_pebble_btn_link _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -2224,99 +1336,33 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
-  font-weight: 400;
-  color: #101721;
-  font-size: 12px;
-  min-width: 100px;
   height: 40px;
-  background-color: #EDEDED;
-  box-shadow: none;
-}
-
-.emotion-0._pebble_btn_disabled {
-  cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
+  min-width: 0;
+  font-weight: 400;
+  color: #6161FF;
+  font-size: 14px;
   background-color: transparent;
   border: 0;
-  color: #6161FF;
-  min-width: 0;
   padding: 0;
-  font-size: 14px;
+  box-shadow: none;
+}
+
+.emotion-0[disabled] {
+  cursor: not-allowed;
 }
 
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-0:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
 }
 
 <button
-  className="_pebble_btn_link emotion-0"
+  className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -2358,99 +1404,33 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 0;
   font-weight: 400;
-  color: #101721;
+  color: #6161FF;
   font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
 }
 
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-0:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
 }
 
 <button
-  className="_pebble_btn_link emotion-0"
+  className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -2529,99 +1509,33 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
-  font-weight: 400;
-  color: #101721;
-  font-size: 12px;
-  min-width: 100px;
   height: 40px;
-  background-color: #EDEDED;
+  min-width: 0;
+  font-weight: 400;
+  color: #6161FF;
+  font-size: 14px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
 }
 
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-1:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
+.emotion-1[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
 }
 
 <button
-  className="_pebble_btn_link _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -2728,99 +1642,33 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 0;
   font-weight: 400;
-  color: #101721;
+  color: #6161FF;
   font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
 }
 
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-1:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
+.emotion-1[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
 }
 
 <button
-  className="_pebble_btn_link _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -2890,112 +1738,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
   background-color: #6161FF;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
   background-color: #7070FF;
+  border-color: #7070FF;
 }
 
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
+.emotion-0:not([disabled]):active {
+  color: #ffffff;
   background-color: #5656ED;
+  border-color: #5656ED;
 }
 
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #ffffff;
   background-color: #C0C0FF;
+  border-color: #C0C0FF;
 }
 
 <button
   className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -3037,112 +1814,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #ffffff;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
+  font-size: 12px;
   background-color: #6161FF;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
   background-color: #7070FF;
+  border-color: #7070FF;
 }
 
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
   background-color: #5656ED;
+  border-color: #5656ED;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #ffffff;
   background-color: #C0C0FF;
+  border-color: #C0C0FF;
 }
 
 <button
   className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -3221,112 +1927,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
   background-color: #6161FF;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
   background-color: #7070FF;
+  border-color: #7070FF;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
   background-color: #5656ED;
+  border-color: #5656ED;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   color: #ffffff;
   background-color: #C0C0FF;
+  border-color: #C0C0FF;
 }
 
 <button
-  className="_pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -3433,112 +2068,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #ffffff;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
+  font-size: 12px;
   background-color: #6161FF;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
   background-color: #7070FF;
+  border-color: #7070FF;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
   background-color: #5656ED;
+  border-color: #5656ED;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   color: #ffffff;
   background-color: #C0C0FF;
+  border-color: #C0C0FF;
 }
 
 <button
-  className="_pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -3608,112 +2172,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
   background-color: #6161FF;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
 }
 
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
   background-color: #7070FF;
+  border-color: #7070FF;
 }
 
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
+.emotion-0:not([disabled]):active {
+  color: #ffffff;
   background-color: #5656ED;
+  border-color: #5656ED;
 }
 
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #ffffff;
   background-color: #C0C0FF;
+  border-color: #C0C0FF;
 }
 
 <button
   className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -3773,112 +2266,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #ffffff;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
+  font-size: 12px;
   background-color: #6161FF;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
   background-color: #7070FF;
+  border-color: #7070FF;
 }
 
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
   background-color: #5656ED;
+  border-color: #5656ED;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #ffffff;
   background-color: #C0C0FF;
+  border-color: #C0C0FF;
 }
 
 <button
   className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -3975,112 +2397,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
   background-color: #6161FF;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
 }
 
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
   background-color: #7070FF;
+  border-color: #7070FF;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
   background-color: #5656ED;
+  border-color: #5656ED;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   color: #ffffff;
   background-color: #C0C0FF;
+  border-color: #C0C0FF;
 }
 
 <button
-  className="_pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -4187,112 +2538,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #ffffff;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
+  font-size: 12px;
   background-color: #6161FF;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
   background-color: #7070FF;
+  border-color: #7070FF;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
   background-color: #5656ED;
+  border-color: #5656ED;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   color: #ffffff;
   background-color: #C0C0FF;
+  border-color: #C0C0FF;
 }
 
 <button
-  className="_pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -4362,112 +2642,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #101721;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
   background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
 }
 
-.emotion-0._pebble_btn_dropdown {
+.emotion-0:not([disabled]):hover {
   color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
   background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
+.emotion-0:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-0._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-0[disabled] {
+  color: #101721;
   background-color: #EDEDED;
+  border-color: #EDEDED;
 }
 
 <button
   className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -4509,112 +2718,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
+  font-size: 12px;
   background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
 }
 
-.emotion-0._pebble_btn_dropdown {
+.emotion-0:not([disabled]):hover {
   color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
   background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
+.emotion-0:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-0._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-0[disabled] {
+  color: #101721;
   background-color: #EDEDED;
+  border-color: #EDEDED;
 }
 
 <button
   className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -4693,112 +2831,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #101721;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
   background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
 }
 
-.emotion-1._pebble_btn_dropdown {
+.emotion-1:not([disabled]):hover {
   color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
   background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
+.emotion-1:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-1._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-1[disabled] {
+  color: #101721;
   background-color: #EDEDED;
+  border-color: #EDEDED;
 }
 
 <button
-  className="_pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -4905,112 +2972,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
+  font-size: 12px;
   background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
 }
 
-.emotion-1._pebble_btn_dropdown {
+.emotion-1:not([disabled]):hover {
   color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
   background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
+.emotion-1:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-1._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-1[disabled] {
+  color: #101721;
   background-color: #EDEDED;
+  border-color: #EDEDED;
 }
 
 <button
-  className="_pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -5080,112 +3076,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #101721;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
   background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
 }
 
-.emotion-0._pebble_btn_dropdown {
+.emotion-0:not([disabled]):hover {
   color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
   background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
+.emotion-0:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-0._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-0[disabled] {
+  color: #101721;
   background-color: #EDEDED;
+  border-color: #EDEDED;
 }
 
 <button
   className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -5245,112 +3170,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
+  font-size: 12px;
   background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
 }
 
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
+.emotion-0:not([disabled]):hover {
+  color: #101721;
+  background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-0._pebble_btn_dropdown {
+.emotion-0:not([disabled]):active {
   color: #101721;
-  background-color: #ffffff;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-0[disabled] {
+  color: #101721;
   background-color: #EDEDED;
+  border-color: #EDEDED;
 }
 
 <button
   className="emotion-0"
+  disabled={false}
   onClick={[Function]}
   style={
     Object {
@@ -5447,112 +3301,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #101721;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
   background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
 }
 
-.emotion-1._pebble_btn_dropdown {
+.emotion-1:not([disabled]):hover {
   color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
   background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
+.emotion-1:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-1._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-1[disabled] {
+  color: #101721;
   background-color: #EDEDED;
+  border-color: #EDEDED;
 }
 
 <button
-  className="_pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -5659,112 +3442,41 @@ exports[`Button Combos test { disabled: false,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
+  font-size: 12px;
   background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
 }
 
-.emotion-1._pebble_btn_dropdown {
+.emotion-1:not([disabled]):hover {
   color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
   background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
+.emotion-1:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-1._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-1[disabled] {
+  color: #101721;
   background-color: #EDEDED;
+  border-color: #EDEDED;
 }
 
 <button
-  className="_pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -5804,23 +3516,12 @@ exports[`Button Combos test { disabled: false,
 </button>
 `;
 
-exports[`Button Combos test { disabled: true,
-  type: 'dropdown',
+exports[`Button Combos test { disabled: false,
+  type: 'success',
   showRipple: false,
   loading: false,
   large: false } 1`] = `
 .emotion-0 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
-.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -5845,99 +3546,42 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_dropdown emotion-1"
+  className="emotion-0"
+  disabled={false}
+  onClick={[Function]}
   style={
     Object {
       "width": undefined,
@@ -5945,35 +3589,15 @@ exports[`Button Combos test { disabled: true,
   }
 >
   Submit
-   
-  <i
-    className="icon-arrow-down emotion-0"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
-exports[`Button Combos test { disabled: true,
-  type: 'dropdown',
+exports[`Button Combos test { disabled: false,
+  type: 'success',
   showRipple: false,
   loading: false,
   large: true } 1`] = `
 .emotion-0 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
-.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -5998,99 +3622,42 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_dropdown emotion-1"
+  className="emotion-0"
+  disabled={false}
+  onClick={[Function]}
   style={
     Object {
       "width": undefined,
@@ -6098,34 +3665,14 @@ exports[`Button Combos test { disabled: true,
   }
 >
   Submit
-   
-  <i
-    className="icon-arrow-down emotion-0"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
-exports[`Button Combos test { disabled: true,
-  type: 'dropdown',
+exports[`Button Combos test { disabled: false,
+  type: 'success',
   showRipple: false,
   loading: true,
   large: false } 1`] = `
-.emotion-1 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -6163,7 +3710,7 @@ exports[`Button Combos test { disabled: true,
   animation-delay: -0.16s;
 }
 
-.emotion-2 {
+.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -6188,99 +3735,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-2._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-2._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-2._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-2._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-2._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-2:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-2._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-2._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-2._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_dropdown _pebble_btn_loading emotion-2"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -6317,34 +3806,14 @@ exports[`Button Combos test { disabled: true,
       }
     />
   </div>
-   
-  <i
-    className="icon-arrow-down emotion-1"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
-exports[`Button Combos test { disabled: true,
-  type: 'dropdown',
+exports[`Button Combos test { disabled: false,
+  type: 'success',
   showRipple: false,
   loading: true,
   large: true } 1`] = `
-.emotion-1 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -6382,7 +3851,7 @@ exports[`Button Combos test { disabled: true,
   animation-delay: -0.16s;
 }
 
-.emotion-2 {
+.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -6407,99 +3876,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-2._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-2._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-2._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-2._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-2._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-2:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-2._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-2._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-2._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_dropdown _pebble_btn_loading emotion-2"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -6536,35 +3947,15 @@ exports[`Button Combos test { disabled: true,
       }
     />
   </div>
-   
-  <i
-    className="icon-arrow-down emotion-1"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
-exports[`Button Combos test { disabled: true,
-  type: 'dropdown',
+exports[`Button Combos test { disabled: false,
+  type: 'success',
   showRipple: true,
   loading: false,
   large: false } 1`] = `
 .emotion-0 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
-.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -6589,135 +3980,76 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
 }
 
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_dropdown emotion-1"
-  style={
+  className="emotion-0"
+  disabled={false}
+  onClick={[Function]}
+  style={
     Object {
       "width": undefined,
     }
   }
 >
   Submit
-   
-  <i
-    className="icon-arrow-down emotion-0"
+  <canvas
+    height={0}
+    onDragOver={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
     style={
       Object {
-        "transform": "none",
+        "borderRadius": "inherit",
+        "height": "100%",
+        "left": 0,
+        "position": "absolute",
+        "top": 0,
+        "width": "100%",
       }
     }
+    width={0}
   />
 </button>
 `;
 
-exports[`Button Combos test { disabled: true,
-  type: 'dropdown',
+exports[`Button Combos test { disabled: false,
+  type: 'success',
   showRipple: true,
   loading: false,
   large: true } 1`] = `
 .emotion-0 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
-.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -6742,99 +4074,42 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_dropdown emotion-1"
+  className="emotion-0"
+  disabled={false}
+  onClick={[Function]}
   style={
     Object {
       "width": undefined,
@@ -6842,34 +4117,32 @@ exports[`Button Combos test { disabled: true,
   }
 >
   Submit
-   
-  <i
-    className="icon-arrow-down emotion-0"
+  <canvas
+    height={0}
+    onDragOver={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
     style={
       Object {
-        "transform": "none",
+        "borderRadius": "inherit",
+        "height": "100%",
+        "left": 0,
+        "position": "absolute",
+        "top": 0,
+        "width": "100%",
       }
     }
+    width={0}
   />
 </button>
 `;
 
-exports[`Button Combos test { disabled: true,
-  type: 'dropdown',
+exports[`Button Combos test { disabled: false,
+  type: 'success',
   showRipple: true,
   loading: true,
   large: false } 1`] = `
-.emotion-1 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -6907,7 +4180,7 @@ exports[`Button Combos test { disabled: true,
   animation-delay: -0.16s;
 }
 
-.emotion-2 {
+.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -6932,99 +4205,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-2._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-2._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-2._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-2._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-2._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-2:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-2._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-2._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-2._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_dropdown _pebble_btn_loading emotion-2"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -7061,34 +4276,14 @@ exports[`Button Combos test { disabled: true,
       }
     />
   </div>
-   
-  <i
-    className="icon-arrow-down emotion-1"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
-exports[`Button Combos test { disabled: true,
-  type: 'dropdown',
+exports[`Button Combos test { disabled: false,
+  type: 'success',
   showRipple: true,
   loading: true,
   large: true } 1`] = `
-.emotion-1 {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 12px;
-  -webkit-transition: -webkit-transform ease-out .2s;
-  -webkit-transition: transform ease-out .2s;
-  transition: transform ease-out .2s;
-  will-transform: transform;
-  margin-top: 2px;
-}
-
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -7126,7 +4321,7 @@ exports[`Button Combos test { disabled: true,
   animation-delay: -0.16s;
 }
 
-.emotion-2 {
+.emotion-1 {
   line-height: 23px;
   height: 40px;
   padding: 0 20px;
@@ -7151,99 +4346,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-2._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-2._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-2._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-2._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-2._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-2._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-2._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-2:focus {
-  border: none;
-}
-
-.emotion-2._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-2._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-2._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-2._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_dropdown _pebble_btn_loading emotion-2"
+  className="emotion-1"
+  disabled={false}
   style={
     Object {
       "width": undefined,
@@ -7280,20 +4417,11 @@ exports[`Button Combos test { disabled: true,
       }
     />
   </div>
-   
-  <i
-    className="icon-arrow-down emotion-1"
-    style={
-      Object {
-        "transform": "none",
-      }
-    }
-  />
 </button>
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'link',
+  type: 'alert',
   showRipple: false,
   loading: false,
   large: false } 1`] = `
@@ -7322,99 +4450,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+.emotion-0:not([disabled]):active {
+  color: #ffffff;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_link emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -7426,7 +4496,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'link',
+  type: 'alert',
   showRipple: false,
   loading: false,
   large: true } 1`] = `
@@ -7455,99 +4525,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_link emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -7559,7 +4571,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'link',
+  type: 'alert',
   showRipple: false,
   loading: true,
   large: false } 1`] = `
@@ -7625,99 +4637,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
 }
 
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_link _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -7758,7 +4712,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'link',
+  type: 'alert',
   showRipple: false,
   loading: true,
   large: true } 1`] = `
@@ -7824,99 +4778,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
 }
 
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_link _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -7957,7 +4853,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'link',
+  type: 'alert',
   showRipple: true,
   loading: false,
   large: false } 1`] = `
@@ -7986,99 +4882,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
 }
 
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_link emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -8090,7 +4928,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'link',
+  type: 'alert',
   showRipple: true,
   loading: false,
   large: true } 1`] = `
@@ -8119,99 +4957,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_link emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -8223,7 +5003,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'link',
+  type: 'alert',
   showRipple: true,
   loading: true,
   large: false } 1`] = `
@@ -8289,99 +5069,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
 }
 
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_link _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -8422,7 +5144,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'link',
+  type: 'alert',
   showRipple: true,
   loading: true,
   large: true } 1`] = `
@@ -8488,99 +5210,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #D32F02;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
 }
 
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
+  background-color: #D94C26;
+  border-color: #D94C26;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #BD2900;
+  border-color: #BD2900;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
+  background-color: #EFBBAD;
+  border-color: #EFBBAD;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_link _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -8621,7 +5285,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'primary',
+  type: 'link',
   showRipple: false,
   loading: false,
   large: false } 1`] = `
@@ -8650,112 +5314,33 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
-  font-weight: 400;
-  color: #ffffff;
-  font-size: 12px;
-  min-width: 100px;
   height: 40px;
-  background-color: #6161FF;
+  min-width: 0;
+  font-weight: 400;
+  color: #6161FF;
+  font-size: 14px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
 }
 
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-0:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
 }
 
 <button
-  className="_pebble_btn_disabled emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -8767,7 +5352,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'primary',
+  type: 'link',
   showRipple: false,
   loading: false,
   large: true } 1`] = `
@@ -8796,112 +5381,33 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 0;
   font-weight: 400;
-  color: #ffffff;
+  color: #6161FF;
   font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #6161FF;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
 }
 
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
+.emotion-0:not([disabled]):hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
 }
 
 <button
-  className="_pebble_btn_disabled emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -8913,7 +5419,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'primary',
+  type: 'link',
   showRipple: false,
   loading: true,
   large: false } 1`] = `
@@ -8979,112 +5485,33 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
-  font-weight: 400;
-  color: #ffffff;
-  font-size: 12px;
-  min-width: 100px;
   height: 40px;
-  background-color: #6161FF;
+  min-width: 0;
+  font-weight: 400;
+  color: #6161FF;
+  font-size: 14px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
 }
 
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-1:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
+.emotion-1[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -9125,7 +5552,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'primary',
+  type: 'link',
   showRipple: false,
   loading: true,
   large: true } 1`] = `
@@ -9191,112 +5618,33 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 0;
   font-weight: 400;
-  color: #ffffff;
+  color: #6161FF;
   font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #6161FF;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
 }
 
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
+.emotion-1:not([disabled]):hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
+.emotion-1[disabled] {
   color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -9337,7 +5685,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'primary',
+  type: 'link',
   showRipple: true,
   loading: false,
   large: false } 1`] = `
@@ -9366,112 +5714,1737 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
-  font-weight: 400;
-  color: #ffffff;
-  font-size: 12px;
-  min-width: 100px;
   height: 40px;
-  background-color: #6161FF;
+  min-width: 0;
+  font-weight: 400;
+  color: #6161FF;
+  font-size: 14px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
 }
 
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+.emotion-0:not([disabled]):hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
+.emotion-0[disabled] {
+  color: #C0C0FF;
 }
 
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
+<button
+  className="emotion-0"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  Submit
+</button>
+`;
 
-.emotion-0._pebble_btn_dropdown_selected {
+exports[`Button Combos test { disabled: true,
+  type: 'link',
+  showRipple: true,
+  loading: false,
+  large: true } 1`] = `
+.emotion-0 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 0;
+  font-weight: 400;
+  color: #6161FF;
+  font-size: 14px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  box-shadow: none;
+}
+
+.emotion-0[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-0:not([disabled]):hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-0[disabled] {
+  color: #C0C0FF;
+}
+
+<button
+  className="emotion-0"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  Submit
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'link',
+  showRipple: true,
+  loading: true,
+  large: false } 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: initial;
+  -ms-flex-line-pack: initial;
+  align-content: initial;
+  width: 70px;
+}
+
+.emotion-0 > div {
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: animation-zl77bl 1.4s infinite ease-in-out both;
+  animation: animation-zl77bl 1.4s infinite ease-in-out both;
+}
+
+.emotion-0 > div:first-of-type {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.emotion-0 > div:nth-of-type(2n) {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+.emotion-1 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 0;
+  font-weight: 400;
+  color: #6161FF;
+  font-size: 14px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  box-shadow: none;
+}
+
+.emotion-1[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-1:not([disabled]):hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-1[disabled] {
+  color: #C0C0FF;
+}
+
+<button
+  className="emotion-1"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className="emotion-0"
+    style={
+      Object {
+        "transform": "scale(0.4)",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+  </div>
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'link',
+  showRipple: true,
+  loading: true,
+  large: true } 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: initial;
+  -ms-flex-line-pack: initial;
+  align-content: initial;
+  width: 70px;
+}
+
+.emotion-0 > div {
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: animation-zl77bl 1.4s infinite ease-in-out both;
+  animation: animation-zl77bl 1.4s infinite ease-in-out both;
+}
+
+.emotion-0 > div:first-of-type {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.emotion-0 > div:nth-of-type(2n) {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+.emotion-1 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 0;
+  font-weight: 400;
+  color: #6161FF;
+  font-size: 14px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  box-shadow: none;
+}
+
+.emotion-1[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-1:not([disabled]):hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-1[disabled] {
+  color: #C0C0FF;
+}
+
+<button
+  className="emotion-1"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className="emotion-0"
+    style={
+      Object {
+        "transform": "scale(0.4)",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+  </div>
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'primary',
+  showRipple: false,
+  loading: false,
+  large: false } 1`] = `
+.emotion-0 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #6161FF;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-0[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-0:not([disabled]):hover {
+  color: #ffffff;
+  background-color: #7070FF;
+  border-color: #7070FF;
+}
+
+.emotion-0:not([disabled]):active {
+  color: #ffffff;
+  background-color: #5656ED;
+  border-color: #5656ED;
+}
+
+.emotion-0[disabled] {
+  color: #ffffff;
+  background-color: #C0C0FF;
+  border-color: #C0C0FF;
+}
+
+<button
+  className="emotion-0"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  Submit
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'primary',
+  showRipple: false,
+  loading: false,
+  large: true } 1`] = `
+.emotion-0 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #6161FF;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-0[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-0:not([disabled]):hover {
+  color: #ffffff;
+  background-color: #7070FF;
+  border-color: #7070FF;
+}
+
+.emotion-0:not([disabled]):active {
+  color: #ffffff;
+  background-color: #5656ED;
+  border-color: #5656ED;
+}
+
+.emotion-0[disabled] {
+  color: #ffffff;
+  background-color: #C0C0FF;
+  border-color: #C0C0FF;
+}
+
+<button
+  className="emotion-0"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  Submit
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'primary',
+  showRipple: false,
+  loading: true,
+  large: false } 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: initial;
+  -ms-flex-line-pack: initial;
+  align-content: initial;
+  width: 70px;
+}
+
+.emotion-0 > div {
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: animation-zl77bl 1.4s infinite ease-in-out both;
+  animation: animation-zl77bl 1.4s infinite ease-in-out both;
+}
+
+.emotion-0 > div:first-of-type {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.emotion-0 > div:nth-of-type(2n) {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+.emotion-1 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #6161FF;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-1[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-1:not([disabled]):hover {
+  color: #ffffff;
+  background-color: #7070FF;
+  border-color: #7070FF;
+}
+
+.emotion-1:not([disabled]):active {
+  color: #ffffff;
+  background-color: #5656ED;
+  border-color: #5656ED;
+}
+
+.emotion-1[disabled] {
+  color: #ffffff;
+  background-color: #C0C0FF;
+  border-color: #C0C0FF;
+}
+
+<button
+  className="emotion-1"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className="emotion-0"
+    style={
+      Object {
+        "transform": "scale(0.4)",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+  </div>
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'primary',
+  showRipple: false,
+  loading: true,
+  large: true } 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: initial;
+  -ms-flex-line-pack: initial;
+  align-content: initial;
+  width: 70px;
+}
+
+.emotion-0 > div {
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: animation-zl77bl 1.4s infinite ease-in-out both;
+  animation: animation-zl77bl 1.4s infinite ease-in-out both;
+}
+
+.emotion-0 > div:first-of-type {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.emotion-0 > div:nth-of-type(2n) {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+.emotion-1 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #6161FF;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-1[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-1:not([disabled]):hover {
+  color: #ffffff;
+  background-color: #7070FF;
+  border-color: #7070FF;
+}
+
+.emotion-1:not([disabled]):active {
+  color: #ffffff;
+  background-color: #5656ED;
+  border-color: #5656ED;
+}
+
+.emotion-1[disabled] {
+  color: #ffffff;
+  background-color: #C0C0FF;
+  border-color: #C0C0FF;
+}
+
+<button
+  className="emotion-1"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className="emotion-0"
+    style={
+      Object {
+        "transform": "scale(0.4)",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+  </div>
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'primary',
+  showRipple: true,
+  loading: false,
+  large: false } 1`] = `
+.emotion-0 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #6161FF;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-0[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-0:not([disabled]):hover {
+  color: #ffffff;
+  background-color: #7070FF;
+  border-color: #7070FF;
+}
+
+.emotion-0:not([disabled]):active {
+  color: #ffffff;
+  background-color: #5656ED;
+  border-color: #5656ED;
+}
+
+.emotion-0[disabled] {
+  color: #ffffff;
+  background-color: #C0C0FF;
+  border-color: #C0C0FF;
+}
+
+<button
+  className="emotion-0"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  Submit
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'primary',
+  showRipple: true,
+  loading: false,
+  large: true } 1`] = `
+.emotion-0 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #6161FF;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-0[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-0:not([disabled]):hover {
+  color: #ffffff;
+  background-color: #7070FF;
+  border-color: #7070FF;
+}
+
+.emotion-0:not([disabled]):active {
+  color: #ffffff;
+  background-color: #5656ED;
+  border-color: #5656ED;
+}
+
+.emotion-0[disabled] {
+  color: #ffffff;
+  background-color: #C0C0FF;
+  border-color: #C0C0FF;
+}
+
+<button
+  className="emotion-0"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  Submit
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'primary',
+  showRipple: true,
+  loading: true,
+  large: false } 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: initial;
+  -ms-flex-line-pack: initial;
+  align-content: initial;
+  width: 70px;
+}
+
+.emotion-0 > div {
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: animation-zl77bl 1.4s infinite ease-in-out both;
+  animation: animation-zl77bl 1.4s infinite ease-in-out both;
+}
+
+.emotion-0 > div:first-of-type {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.emotion-0 > div:nth-of-type(2n) {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+.emotion-1 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #6161FF;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-1[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-1:not([disabled]):hover {
+  color: #ffffff;
+  background-color: #7070FF;
+  border-color: #7070FF;
+}
+
+.emotion-1:not([disabled]):active {
+  color: #ffffff;
+  background-color: #5656ED;
+  border-color: #5656ED;
+}
+
+.emotion-1[disabled] {
+  color: #ffffff;
+  background-color: #C0C0FF;
+  border-color: #C0C0FF;
+}
+
+<button
+  className="emotion-1"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className="emotion-0"
+    style={
+      Object {
+        "transform": "scale(0.4)",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+  </div>
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'primary',
+  showRipple: true,
+  loading: true,
+  large: true } 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: initial;
+  -ms-flex-line-pack: initial;
+  align-content: initial;
+  width: 70px;
+}
+
+.emotion-0 > div {
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: animation-zl77bl 1.4s infinite ease-in-out both;
+  animation: animation-zl77bl 1.4s infinite ease-in-out both;
+}
+
+.emotion-0 > div:first-of-type {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.emotion-0 > div:nth-of-type(2n) {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+.emotion-1 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #ffffff;
+  font-size: 12px;
   background-color: #6161FF;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-1[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-1:not([disabled]):hover {
+  color: #ffffff;
+  background-color: #7070FF;
+  border-color: #7070FF;
+}
+
+.emotion-1:not([disabled]):active {
+  color: #ffffff;
+  background-color: #5656ED;
+  border-color: #5656ED;
+}
+
+.emotion-1[disabled] {
   color: #ffffff;
+  background-color: #C0C0FF;
+  border-color: #C0C0FF;
+}
+
+<button
+  className="emotion-1"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className="emotion-0"
+    style={
+      Object {
+        "transform": "scale(0.4)",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+  </div>
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'secondary',
+  showRipple: false,
+  loading: false,
+  large: false } 1`] = `
+.emotion-0 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #101721;
+  font-size: 12px;
+  background-color: #EDEDED;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-0[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-0:not([disabled]):hover {
+  color: #101721;
+  background-color: #F7F7F9;
+  border-color: #F7F7F9;
+}
+
+.emotion-0:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
+}
+
+.emotion-0[disabled] {
+  color: #101721;
+  background-color: #EDEDED;
+  border-color: #EDEDED;
+}
+
+<button
+  className="emotion-0"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  Submit
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'secondary',
+  showRipple: false,
+  loading: false,
+  large: true } 1`] = `
+.emotion-0 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #101721;
+  font-size: 12px;
+  background-color: #EDEDED;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-0[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-0:not([disabled]):hover {
+  color: #101721;
+  background-color: #F7F7F9;
+  border-color: #F7F7F9;
+}
+
+.emotion-0:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
+}
+
+.emotion-0[disabled] {
+  color: #101721;
+  background-color: #EDEDED;
+  border-color: #EDEDED;
+}
+
+<button
+  className="emotion-0"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  Submit
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'secondary',
+  showRipple: false,
+  loading: true,
+  large: false } 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: initial;
+  -ms-flex-line-pack: initial;
+  align-content: initial;
+  width: 70px;
+}
+
+.emotion-0 > div {
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: animation-zl77bl 1.4s infinite ease-in-out both;
+  animation: animation-zl77bl 1.4s infinite ease-in-out both;
+}
+
+.emotion-0 > div:first-of-type {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.emotion-0 > div:nth-of-type(2n) {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
 }
 
-.emotion-0:focus {
+.emotion-1 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #101721;
+  font-size: 12px;
+  background-color: #EDEDED;
   border: none;
+  box-shadow: none;
 }
 
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
+.emotion-1[disabled] {
+  cursor: not-allowed;
 }
 
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
+.emotion-1:not([disabled]):hover {
+  color: #101721;
+  background-color: #F7F7F9;
+  border-color: #F7F7F9;
+}
+
+.emotion-1:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
+}
+
+.emotion-1[disabled] {
+  color: #101721;
+  background-color: #EDEDED;
+  border-color: #EDEDED;
+}
+
+<button
+  className="emotion-1"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className="emotion-0"
+    style={
+      Object {
+        "transform": "scale(0.4)",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+  </div>
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'secondary',
+  showRipple: false,
+  loading: true,
+  large: true } 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: initial;
+  -ms-flex-line-pack: initial;
+  align-content: initial;
+  width: 70px;
+}
+
+.emotion-0 > div {
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: animation-zl77bl 1.4s infinite ease-in-out both;
+  animation: animation-zl77bl 1.4s infinite ease-in-out both;
+}
+
+.emotion-0 > div:first-of-type {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.emotion-0 > div:nth-of-type(2n) {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+.emotion-1 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border: 0;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #101721;
+  font-size: 12px;
+  background-color: #EDEDED;
+  border: none;
+  box-shadow: none;
+}
+
+.emotion-1[disabled] {
+  cursor: not-allowed;
+}
+
+.emotion-1:not([disabled]):hover {
+  color: #101721;
+  background-color: #F7F7F9;
+  border-color: #F7F7F9;
+}
+
+.emotion-1:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
+}
+
+.emotion-1[disabled] {
+  color: #101721;
+  background-color: #EDEDED;
+  border-color: #EDEDED;
+}
+
+<button
+  className="emotion-1"
+  disabled={true}
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className="emotion-0"
+    style={
+      Object {
+        "transform": "scale(0.4)",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+    <div
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+        }
+      }
+    />
+  </div>
+</button>
+`;
+
+exports[`Button Combos test { disabled: true,
+  type: 'secondary',
+  showRipple: true,
+  loading: false,
+  large: false } 1`] = `
+.emotion-0 {
+  line-height: 23px;
+  height: 40px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: all ease-out .2s;
+  transition: all ease-out .2s;
+  border-radius: 3px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
+  height: 40px;
+  min-width: 100px;
+  font-weight: 400;
+  color: #101721;
+  font-size: 12px;
+  background-color: #EDEDED;
+  border: none;
+  box-shadow: none;
 }
 
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
+.emotion-0[disabled] {
   cursor: not-allowed;
 }
 
-.emotion-0:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
+.emotion-0:not([disabled]):hover {
+  color: #101721;
+  background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+.emotion-0:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-0._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
+.emotion-0[disabled] {
+  color: #101721;
+  background-color: #EDEDED;
+  border-color: #EDEDED;
 }
 
 <button
-  className="_pebble_btn_disabled emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -9483,7 +7456,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'primary',
+  type: 'secondary',
   showRipple: true,
   loading: false,
   large: true } 1`] = `
@@ -9512,112 +7485,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #ffffff;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #6161FF;
+  color: #101721;
+  font-size: 12px;
+  background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
 }
 
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
+.emotion-0:not([disabled]):hover {
   color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
   background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
+.emotion-0:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-0[disabled] {
+  color: #101721;
   background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
+  border-color: #EDEDED;
 }
 
 <button
-  className="_pebble_btn_disabled emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -9629,7 +7531,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'primary',
+  type: 'secondary',
   showRipple: true,
   loading: true,
   large: false } 1`] = `
@@ -9695,112 +7597,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #ffffff;
+  color: #101721;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #6161FF;
+  background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
 }
 
-.emotion-1._pebble_btn_dropdown {
+.emotion-1:not([disabled]):hover {
   color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
   background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
+.emotion-1:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-1[disabled] {
+  color: #101721;
   background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
+  border-color: #EDEDED;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -9841,7 +7672,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'primary',
+  type: 'secondary',
   showRipple: true,
   loading: true,
   large: true } 1`] = `
@@ -9907,112 +7738,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #ffffff;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #6161FF;
+  color: #101721;
+  font-size: 12px;
+  background-color: #EDEDED;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
 }
 
-.emotion-1._pebble_btn_dropdown {
+.emotion-1:not([disabled]):hover {
   color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
   background-color: #F7F7F9;
+  border-color: #F7F7F9;
 }
 
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
+.emotion-1:not([disabled]):active {
+  color: #101721;
+  background-color: #9FA6B0;
+  border-color: #9FA6B0;
 }
 
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
+.emotion-1[disabled] {
+  color: #101721;
   background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
-  color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
-  color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
+  border-color: #EDEDED;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -10053,7 +7813,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'secondary',
+  type: 'success',
   showRipple: false,
   loading: false,
   large: false } 1`] = `
@@ -10082,112 +7842,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
 }
 
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -10199,7 +7888,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'secondary',
+  type: 'success',
   showRipple: false,
   loading: false,
   large: true } 1`] = `
@@ -10228,112 +7917,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -10345,7 +7963,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'secondary',
+  type: 'success',
   showRipple: false,
   loading: true,
   large: false } 1`] = `
@@ -10411,112 +8029,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
 }
 
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -10557,7 +8104,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'secondary',
+  type: 'success',
   showRipple: false,
   loading: true,
   large: true } 1`] = `
@@ -10623,112 +8170,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
 }
 
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -10769,7 +8245,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'secondary',
+  type: 'success',
   showRipple: true,
   loading: false,
   large: false } 1`] = `
@@ -10798,112 +8274,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
 }
 
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -10915,7 +8320,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'secondary',
+  type: 'success',
   showRipple: true,
   loading: false,
   large: true } 1`] = `
@@ -10944,112 +8349,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
 }
 
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0[disabled] {
   color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled emotion-0"
+  className="emotion-0"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -11061,7 +8395,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'secondary',
+  type: 'success',
   showRipple: true,
   loading: true,
   large: false } 1`] = `
@@ -11127,112 +8461,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
+  color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
-  background-color: #EDEDED;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
 }
 
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
@@ -11273,7 +8536,7 @@ exports[`Button Combos test { disabled: true,
 `;
 
 exports[`Button Combos test { disabled: true,
-  type: 'secondary',
+  type: 'success',
   showRipple: true,
   loading: true,
   large: true } 1`] = `
@@ -11339,112 +8602,41 @@ exports[`Button Combos test { disabled: true,
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
-  color: #101721;
-  font-size: 14px;
-  min-width: 140px;
-  height: 50px;
-  background-color: #EDEDED;
+  color: #ffffff;
+  font-size: 12px;
+  background-color: #10AC60;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-1._pebble_btn_disabled {
+.emotion-1[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
 }
 
-.emotion-1._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-1._pebble_btn_dropdown_open {
+.emotion-1:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
+  background-color: #40BD80;
+  border-color: #40BD80;
 }
 
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-1._pebble_btn_dropdown_open._pebble_btn_disabled {
+.emotion-1:not([disabled]):active {
   color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-1._pebble_btn_dropdown_open:focus {
-  border: none;
+  background-color: #0E9A56;
+  border-color: #0E9A56;
 }
 
-.emotion-1._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-1[disabled] {
   color: #ffffff;
-}
-
-.emotion-1:focus {
-  border: none;
-}
-
-.emotion-1._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-1._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-1._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-1._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
-}
-
-.emotion-1:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-1._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
+  background-color: #9DDCBE;
+  border-color: #9DDCBE;
 }
 
 <button
-  className="_pebble_btn_disabled _pebble_btn_loading emotion-1"
+  className="emotion-1"
+  disabled={true}
   style={
     Object {
       "width": undefined,
diff --git a/src/components/__tests__/__snapshots__/popper.test.tsx.snap b/src/components/__tests__/__snapshots__/popper.test.tsx.snap
index 01b22312..bc6e0a68 100644
--- a/src/components/__tests__/__snapshots__/popper.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/popper.test.tsx.snap
@@ -62,108 +62,36 @@ exports[`Component: Popper snapshot 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   border: 0;
+  height: 40px;
+  min-width: 100px;
   font-weight: 400;
   color: #ffffff;
   font-size: 12px;
-  min-width: 100px;
-  height: 40px;
   background-color: #6161FF;
+  border: none;
   box-shadow: none;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   cursor: not-allowed;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_disabled:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown {
-  color: #101721;
-  background-color: #ffffff;
-}
-
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):hover {
-  background-color: #F7F7F9;
 }
 
-.emotion-0._pebble_btn_dropdown:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #E0E0E0;
-}
-
-.emotion-0._pebble_btn_dropdown._pebble_btn_disabled {
-  color: #9FA6B0;
-  background-color: #EDEDED;
-}
-
-.emotion-0._pebble_btn_dropdown_open {
+.emotion-0:not([disabled]):hover {
   color: #ffffff;
-  background-color: #6161FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
   background-color: #7070FF;
+  border-color: #7070FF;
 }
 
-.emotion-0._pebble_btn_dropdown_open:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
-  background-color: #5656ED;
-}
-
-.emotion-0._pebble_btn_dropdown_open._pebble_btn_disabled {
-  color: #ffffff;
-  background-color: #C0C0FF;
-}
-
-.emotion-0._pebble_btn_dropdown_open:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_dropdown_selected {
-  background-color: #6161FF;
+.emotion-0:not([disabled]):active {
   color: #ffffff;
-}
-
-.emotion-0:focus {
-  border: none;
-}
-
-.emotion-0._pebble_btn_loading .icon-spinner {
-  -webkit-animation: animation-1q8eu9e 1500ms infinite linear;
-  animation: animation-1q8eu9e 1500ms infinite linear;
-}
-
-.emotion-0._pebble_btn_link {
-  background-color: transparent;
-  border: 0;
-  color: #6161FF;
-  min-width: 0;
-  padding: 0;
-  font-size: 14px;
-}
-
-.emotion-0._pebble_btn_link:not(._pebble_btn_disabled):hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-0._pebble_btn_link._pebble_btn_disabled {
-  color: #C0C0FF;
-  cursor: not-allowed;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(._pebble_btn_disabled):hover {
-  background-color: #7070FF;
-}
-
-.emotion-0:not(._pebble_btn_dropdown):not(_pebble_btn_disabled):active {
   background-color: #5656ED;
+  border-color: #5656ED;
 }
 
-.emotion-0._pebble_btn_disabled {
+.emotion-0[disabled] {
   color: #ffffff;
   background-color: #C0C0FF;
+  border-color: #C0C0FF;
 }
 
 <div>
diff --git a/src/components/__tests__/__snapshots__/tag.test.tsx.snap b/src/components/__tests__/__snapshots__/tag.test.tsx.snap
index 940357d5..a0b39d84 100644
--- a/src/components/__tests__/__snapshots__/tag.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/tag.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`Component: Tag snapshot 1`] = `
   className="emotion-0"
   style={
     Object {
-      "backgroundColor": "#DBF3E7",
+      "backgroundColor": "#40BD80",
       "color": "#10AC60",
     }
   }
@@ -104,7 +104,7 @@ exports[`Component: Tag snapshot 2`] = `
   className="emotion-0 __pebble__tag__with__close"
   style={
     Object {
-      "backgroundColor": "#DBF3E7",
+      "backgroundColor": "#40BD80",
       "color": "#10AC60",
     }
   }
diff --git a/src/components/__tests__/button.test.tsx b/src/components/__tests__/button.test.tsx
index 42074498..df8aaaa0 100644
--- a/src/components/__tests__/button.test.tsx
+++ b/src/components/__tests__/button.test.tsx
@@ -11,7 +11,7 @@ function noop() {}
 describe("Button Combos test", () => {
   const _props = {
     disabled: [true, false],
-    type: ["primary", "secondary", "dropdown", "link"],
+    type: ["primary", "secondary", "alert", "link", "success"],
     showRipple: [true, false],
     loading: [true, false],
     large: [true, false]
diff --git a/src/components/styles/Button.styles.ts b/src/components/styles/Button.styles.ts
index 76c1349d..d5064965 100644
--- a/src/components/styles/Button.styles.ts
+++ b/src/components/styles/Button.styles.ts
@@ -1,90 +1,10 @@
 import { css } from "emotion";
 import { colors, constants, typography } from "../../theme";
-const { violet, gray, white, red, emerald } = colors;
+import { ButtonType, MappingColorByType } from "../typings/Button";
 
-export const iconStyle = css({
-  marginLeft: 15,
-  fontWeight: "bold",
-  fontSize: 12,
-  transition: "transform ease-out .2s",
-  willTransform: "transform",
-  marginTop: 2
-});
-
-const buttonPseudo = {
-  primary: {
-    color: white.base,
-    backgroundColor: violet.base,
-    "&:not([disabled]):hover": {
-      backgroundColor: violet.light
-    },
-    "&:not([disabled]):active": {
-      backgroundColor: violet.dark
-    },
-    "&[disabled]": {
-      color: white.base,
-      backgroundColor: violet.lighter
-    }
-  },
-  secondary: {
-    color: gray.darker,
-    backgroundColor: gray.lighter,
-    "&:not([disabled]):hover": {
-      backgroundColor: gray.lightest
-    },
-    "&:not([disabled]):active": {
-      backgroundColor: gray.light
-    },
-    "&[disabled]": {
-      color: gray.base,
-      backgroundColor: gray.lighter
-    }
-  },
-  success: {
-    color: white.base,
-    backgroundColor: emerald.base,
-    "&:not([disabled]):hover": {
-      backgroundColor: emerald.light
-    },
-    "&:not([disabled]):active": {
-      backgroundColor: emerald.light
-    },
-    "&[disabled]": {
-      color: gray.base,
-      backgroundColor: gray.lighter
-    }
-  },
-  alert: {
-    color: white.base,
-    backgroundColor: red.base,
-    "&:not([disabled]):hover": {
-      backgroundColor: red.light
-    },
-    "&:not([disabled]):active": {
-      backgroundColor: red.light
-    },
-    "&[disabled]": {
-      color: gray.base,
-      backgroundColor: gray.lighter
-    }
-  },
-  link: {
-    backgroundColor: "transparent",
-    border: 0,
-    color: violet.base,
-    minWidth: 0,
-    padding: 0,
-    fontSize: 14,
-    ":not([disabled]):hover": {
-      textDecoration: "underline"
-    },
-    "&[disabled]": {
-      color: violet.lighter
-    }
-  }
-};
+const { violet, gray, white, red, emerald } = colors;
 
-export const commonButtonStyle = css({
+const commonButtonStyle = css({
   lineHeight: "23px",
   height: constants.buttonHeight,
   padding: "0 20px",
@@ -100,17 +20,83 @@ export const commonButtonStyle = css({
   justifyContent: "center",
   border: 0,
   "&[disabled]": {
-    cursor: "not-allowed",
-    backgroundColor: colors.white.base,
-    ":focus": {
-      border: "none"
-    }
-  },
-  ":focus": {
-    border: "none"
+    cursor: "not-allowed"
   }
 });
 
+const mappingColorByType: MappingColorByType = {
+  primary: {
+    base: violet.base,
+    hover: violet.light,
+    active: violet.dark,
+    disabled: violet.lighter
+  },
+  secondary: {
+    textColor: gray.darker,
+    base: gray.lighter,
+    hover: gray.lightest,
+    active: gray.base,
+    disabled: gray.lighter
+  },
+  success: {
+    base: emerald.base,
+    hover: emerald.light,
+    active: emerald.dark,
+    disabled: emerald.lighter
+  },
+  alert: {
+    base: red.base,
+    hover: red.light,
+    active: red.dark,
+    disabled: red.lighter
+  }
+};
+
+const linkStyle = {
+  backgroundColor: "transparent",
+  border: 0,
+  color: violet.base,
+  minWidth: 0,
+  padding: 0,
+  fontSize: 14,
+  ":not([disabled]):hover": {
+    textDecoration: "underline"
+  },
+  "&[disabled]": {
+    color: violet.lighter
+  }
+};
+
+const getStyleByType = (type: ButtonType, filled: boolean) => {
+  if (type === "link") return linkStyle;
+
+  const _color = mappingColorByType[type];
+  const { base: colorBase, disabled, hover, active, textColor } = _color;
+
+  const defaultFontColor = filled ? textColor || white.base : colorBase;
+
+  return {
+    color: defaultFontColor,
+    backgroundColor: filled ? colorBase : white.base,
+    border: filled ? "none" : `1px solid ${colorBase}`,
+    "&:not([disabled]):hover": {
+      color: textColor || white.base,
+      backgroundColor: hover,
+      borderColor: hover
+    },
+    "&:not([disabled]):active": {
+      color: textColor || white.base,
+      backgroundColor: active,
+      borderColor: active
+    },
+    "&[disabled]": {
+      color: textColor || white.base,
+      backgroundColor: disabled,
+      borderColor: disabled
+    }
+  };
+};
+
 const styleBasedOnSize = {
   "x-small": {
     height: 25,
@@ -129,12 +115,22 @@ const styleBasedOnSize = {
   }
 };
 
-export const getButtonStyle = (size, type, showShadow) =>
-  css([
+export const getButtonStyle = (size, type, showShadow, filled) => {
+  return css([
     commonButtonStyle,
     {
       ...styleBasedOnSize[size],
-      ...buttonPseudo[type],
+      ...getStyleByType(type, filled),
       boxShadow: showShadow ? constants.boxShadow.base : "none"
     }
   ]);
+};
+
+export const iconStyle = css({
+  marginLeft: 15,
+  fontWeight: "bold",
+  fontSize: 12,
+  transition: "transform ease-out .2s",
+  willTransform: "transform",
+  marginTop: 2
+});
diff --git a/src/components/typings/Button.ts b/src/components/typings/Button.ts
index dfecc839..c8183db3 100644
--- a/src/components/typings/Button.ts
+++ b/src/components/typings/Button.ts
@@ -15,9 +15,25 @@ export interface ButtonProps {
   className?: string;
   showRipple?: boolean;
   loading?: boolean;
+  filled?: boolean;
 }
 
 export interface DropDownButtonProps extends ButtonProps {
   isOpen: boolean;
   isSelected: boolean;
 }
+
+interface MappingColorByTypeOptions {
+  textColor?: string;
+  base: string;
+  hover: string;
+  active: string;
+  disabled: string;
+}
+
+export interface MappingColorByType {
+  primary: MappingColorByTypeOptions;
+  secondary: MappingColorByTypeOptions;
+  success: MappingColorByTypeOptions;
+  alert: MappingColorByTypeOptions;
+}
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index 0f3e8483..333728db 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -25,12 +25,20 @@ export const colors: Colors = {
     base: "#ffffff"
   },
   emerald: {
+    darker: "#088649",
+    dark: "#0E9A56",
     base: "#10AC60",
-    light: "#DBF3E7"
+    light: "#40BD80",
+    lighter: "#9DDCBE",
+    lightest: "#DBF3E7"
   },
   red: {
+    darker: "#A91D00",
+    dark: "#BD2900",
     base: "#D32F02",
-    light: "#F9E0D9"
+    light: "#D94C26",
+    lighter: "#EFBBAD",
+    lightest: "#F9E0D9"
   },
   purple: {
     base: "#9254E3",
diff --git a/src/theme/typings/colors.d.ts b/src/theme/typings/colors.d.ts
index e20a9e18..5ef3c351 100644
--- a/src/theme/typings/colors.d.ts
+++ b/src/theme/typings/colors.d.ts
@@ -1,4 +1,4 @@
-interface Violet {
+interface Dense {
   darker: string;
   dark: string;
   base: string;
@@ -6,34 +6,28 @@ interface Violet {
   lighter: string;
   lightest: string;
 }
+
 interface White {
   base: string;
 }
-interface Secondary {
-  base: string;
-  light: string;
-}
-interface Gray {
-  darker: string;
-  dark: string;
+
+interface Light {
   base: string;
   light: string;
-  lighter: string;
-  lightest: string;
 }
 
 export interface Colors {
-  violet: Violet;
-  green: Secondary;
-  yellow: Secondary;
-  blue: Secondary;
+  violet: Dense;
+  green: Light;
+  yellow: Light;
+  blue: Light;
   white: White;
-  emerald: Secondary;
-  red: Secondary;
-  purple: Secondary;
-  pink: Secondary;
-  teal: Secondary;
-  coral: Secondary;
-  jade: Secondary;
-  gray: Gray;
+  emerald: Dense;
+  red: Dense;
+  purple: Light;
+  pink: Light;
+  teal: Light;
+  coral: Light;
+  jade: Light;
+  gray: Dense;
 }
diff --git a/stories/Combinations.tsx b/stories/Combinations.tsx
deleted file mode 100644
index 7e38ee1a..00000000
--- a/stories/Combinations.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import * as React from "react";
-import combos from "combos";
-import { css } from "emotion";
-import { colors, constants, mixins, typography } from "../src/theme";
-import prettier from "prettier/standalone";
-import babylon from "prettier/parser-babylon";
-import Highlight from "react-highlight";
-import entries from "just-entries";
-
-const wrapper = css({
-  width: "100vw",
-  minHeight: "100vh",
-  padding: 30,
-  paddingTop: 110
-});
-
-const sectionWrapper = css({
-  display: "flex",
-  flexDirection: "row",
-  flexWrap: "wrap",
-  padding: "30px 0",
-  "> div": {
-    flex: 1,
-    margin: 10,
-    display: "flex",
-    alignItems: "center",
-    borderRadius: constants.borderRadius,
-    backgroundColor: colors.white.base,
-    border: constants.border.light
-  },
-  code: {
-    fontFamily:
-      '"Operator Mono", "Fira Code Retina", "Fira Code", FiraCode-Retina, "Andale Mono", "Lucida Console", Consolas, Monaco, monospace',
-    fontWeight: 500,
-    fontSize: 14
-  },
-  ".componentWrapper": {
-    padding: 30,
-    flex: 1,
-    justifyContent: "center",
-    display: "flex"
-  },
-  ".codeWrapper": {
-    display: "flex",
-    flex: 1,
-    padding: 30,
-    backgroundColor: "#f8f8f8",
-    borderLeft: constants.border.light
-  }
-});
-
-const header = css({
-  height: 80,
-  ...mixins.flexSpaceBetween,
-  position: "fixed",
-  boxShadow: constants.boxShadow.base,
-  zIndex: 999,
-  width: "100%",
-  backgroundColor: colors.white.base,
-  padding: "0 30px",
-  alignItems: "center"
-});
-
-function getJSXSource(componentName: string, props: any) {
-  const _entries = entries(props);
-  let jsxProps = _entries.reduce(
-    (acc, entry) =>
-      (acc += `${entry[0]}={${
-        typeof entry[1] === "string" ? `"${entry[1]}"` : entry[1]
-      }} `),
-    ""
-  );
-  return prettier.format(`<${componentName} ${jsxProps}></${componentName}>`, {
-    parser: "babylon",
-    plugins: [babylon]
-  });
-}
-
-interface CombinationProps {
-  Component: any;
-  props: any;
-  groupProps: any;
-  randomProps: any;
-  children: any;
-  titleExtractor?: (item: any) => any;
-}
-
-const Combinations: React.SFC<CombinationProps> = ({
-  Component,
-  props,
-  groupProps,
-  randomProps,
-  children,
-  titleExtractor
-}) => {
-  return (
-    <React.Fragment>
-      <link
-        rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"
-      />
-      <header className={header}>
-        <h1 style={typography.xll.bold}>{Component.name}</h1>
-      </header>
-      <div className={wrapper}>
-        {combos(groupProps).map(groupProp => (
-          <div>
-            <h4 style={{ ...typography.l.light, textTransform: "capitalize" }}>
-              {titleExtractor
-                ? titleExtractor(groupProp)
-                : JSON.stringify(groupProp)}
-            </h4>
-            <div className={sectionWrapper}>
-              {combos(randomProps).map(prop => {
-                const _props = {
-                  ...props,
-                  ...groupProp,
-                  ...prop
-                };
-                return (
-                  <React.Fragment>
-                    <div>
-                      <div className="componentWrapper">
-                        <Component {..._props}>{children}</Component>
-                      </div>
-
-                      <div className="codeWrapper">
-                        <Highlight className="jsx">
-                          {getJSXSource(Component.name, _props)}
-                        </Highlight>
-                      </div>
-                    </div>
-                  </React.Fragment>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-    </React.Fragment>
-  );
-};
-
-export default Combinations;
diff --git a/stories/button.story.tsx b/stories/button.story.tsx
index 4a4648d1..869eb0d1 100644
--- a/stories/button.story.tsx
+++ b/stories/button.story.tsx
@@ -16,6 +16,7 @@ storiesOf("Button", module).add("Playground", () => (
     onClick={action("click")}
     showRipple={boolean("showRipple", true)}
     loading={boolean("loading")}
+    filled={boolean("filled", true)}
   >
     Submit
   </Button>

From 06653369aecd3ddbc9da560629ad711e8a77ecf8 Mon Sep 17 00:00:00 2001
From: ritz078 <rkritesh078@gmail.com>
Date: Fri, 10 Aug 2018 19:16:06 +0530
Subject: [PATCH 3/4] refactor(button): automatically set filled to false when
 size is x-small

---
 src/components/Button.tsx | 9 +++------
 stories/button.story.tsx  | 1 -
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 36f9e06f..2cecca18 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -16,17 +16,14 @@ const Button: React.SFC<ButtonProps> = ({
   className,
   showRipple = true,
   loading,
-  size = "small",
-  filled = "true"
+  size = "small"
 }) => {
   const disableAction = disabled || loading;
 
+  const filled = size !== "x-small";
   const _className = cx(
     getButtonStyle(size, type, showShadow, filled),
-    className,
-    {
-      _pebble_button_xs_small: size === "x-small"
-    }
+    className
   );
 
   return (
diff --git a/stories/button.story.tsx b/stories/button.story.tsx
index 869eb0d1..4a4648d1 100644
--- a/stories/button.story.tsx
+++ b/stories/button.story.tsx
@@ -16,7 +16,6 @@ storiesOf("Button", module).add("Playground", () => (
     onClick={action("click")}
     showRipple={boolean("showRipple", true)}
     loading={boolean("loading")}
-    filled={boolean("filled", true)}
   >
     Submit
   </Button>

From e1a85d187992e32e6460627d1408a77e6d37de3f Mon Sep 17 00:00:00 2001
From: ritz078 <rkritesh078@gmail.com>
Date: Fri, 10 Aug 2018 19:27:51 +0530
Subject: [PATCH 4/4] fixes

---
 package.json |  2 --
 yarn.lock    | 12 +-----------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/package.json b/package.json
index f3c6abbe..d03cd911 100644
--- a/package.json
+++ b/package.json
@@ -97,9 +97,7 @@
     "pretty-quick": "^1.6.0",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
-    "react-highlight": "^0.12.0",
     "react-native-vector-icons": "^5.0.0",
-    "react-prism": "^4.3.2",
     "react-test-renderer": "^16.4.2",
     "rimraf": "^2.6.2",
     "rollup": "^0.63.5",
diff --git a/yarn.lock b/yarn.lock
index 4002e9c5..4d303e01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5462,7 +5462,7 @@ he@1.1.x, he@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
-highlight.js@^9.11.0, highlight.js@~9.12.0:
+highlight.js@~9.12.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
 
@@ -8997,12 +8997,6 @@ react-fuzzy@^0.5.2:
     fuse.js "^3.0.1"
     prop-types "^15.5.9"
 
-react-highlight@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/react-highlight/-/react-highlight-0.12.0.tgz#34de986a0bfdf228904d0c269b69538d95b35802"
-  dependencies:
-    highlight.js "^9.11.0"
-
 react-icon-base@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d"
@@ -9077,10 +9071,6 @@ react-popper@^1.0.0:
     typed-styles "^0.0.5"
     warning "^3.0.0"
 
-react-prism@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/react-prism/-/react-prism-4.3.2.tgz#5c07609539b3ba6f45eb33e7d6a3588df3270c21"
-
 react-reconciler@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"