diff --git a/src/Button/Button.story.tsx b/src/Button/Button.story.tsx
index 9c907071..07744d6d 100644
--- a/src/Button/Button.story.tsx
+++ b/src/Button/Button.story.tsx
@@ -209,7 +209,7 @@ storiesOf("Button", module)
       >
         <VerticalButtonGroup
           title="Secondary"
-          buttonProps={{ feel: "secondary" }}
+          buttonProps={{ color: colors.white }}
         >
           <Button>Rest</Button>
           <Button data-force-hover-state="true">Hover</Button>
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index 43e534a0..34eee839 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -32,17 +32,20 @@ function getTextColor({
   theme: NonNullable<Props["theme"]>;
   mode?: CSS.SimplePseudos;
 }): CSS.ColorProperty | undefined {
+  // Text color will always be the same for secondary buttons
+  if (color === colors.white) {
+    return colors.grey.darker;
+  }
+
   switch (feel) {
     case "raised":
-    case "secondary":
-      // Set the base (meaning no pseudo-selectors) text color for raised and
-      // secondary buttons. Otherwise return `undefined` to not change the
-      // color.
+      // Set the base (meaning no pseudo-selectors) text color for raised
+      // buttons. Otherwise return `undefined` to not change the color.
       //
-      // We have some special logic for the raised and secondary color; set the
-      // text color to be what is most readable between white and the default
-      // text color and the _hover_ color's background. This is overrideable by
-      // the user, but it shouldn't need to be.
+      // We have some special logic for the raised color; set the text color to
+      // be what is most readable between white and the default text color and
+      // the _hover_ color's background. This is overrideable by the user, but
+      // it shouldn't need to be.
       return !mode
         ? tinycolor
             .mostReadable(
@@ -104,10 +107,12 @@ function getHoverBackgroundColor({
   feel: NonNullable<Props["feel"]>;
   theme: NonNullable<Props["theme"]>;
 }): CSS.BackgroundColorProperty {
+  if (color === colors.white) {
+    // Special case for secondary buttons
+    return colors.silver.light;
+  }
+
   switch (feel) {
-    case "secondary":
-      // Hardcode (special case)
-      return colors.silver.light;
     case "flat":
       // Hardcode if we're using the default color (special case), otherwise get
       // the next lightest color.
@@ -142,10 +147,9 @@ interface Props
    * This has a special meaning for buttons with a "flat" feel; this will change
    * the text color as well as the background colors.
    *
-   * This has no meaning with a feel of "secondary", so this component will
-   * `throw` if you pass a color for a secondary button.
+   * Pass `colors.white` to treat this button as a secondary button
    */
-  color?: PaletteColor;
+  color?: PaletteColor | typeof colors["white"];
 
   /**
    * Which feel to display
@@ -154,9 +158,8 @@ interface Props
    *
    * - `"raised"` (default): A button with a border and a background
    * - `"flat"`: No background or border
-   * - `"secondary"`: Similar to a raised button, but it's white
    */
-  feel?: "raised" | "flat" | "secondary";
+  feel?: "raised" | "flat";
 
   /**
    * Either an icon to show to the left of the button text, or on it's own
@@ -279,10 +282,10 @@ export const Button: React.FC<Props> = ({
           },
 
           backgroundColor:
-            feel === "raised"
-              ? color
-              : feel === "secondary"
+            color === colors.white
               ? colors.white
+              : feel === "raised"
+              ? color
               : "transparent",
 
           borderRadius: variant === "fab" ? "100%" : 4,
@@ -353,11 +356,13 @@ export const Button: React.FC<Props> = ({
             // light theme. For the dark theme we use a variant of the color to
             // make the borders sharp.
             boxShadow: `0 1px 4px 0 rgba(18, 21, 26, 0.08), 0 0 0 2px ${
-              theme === "light" || color === defaultColor
+              theme === "light" ||
+              color === defaultColor ||
+              color === colors.white
                 ? "#bbdbff"
                 : getOffsetInPalette(Infinity, "lighter", color)
             }, inset 0 0 0 1px ${
-              color === defaultColor
+              color === defaultColor || color === colors.white
                 ? "#2075d6"
                 : getOffsetInPalette(1, "darker", color)
             }, inset 0 -1px 0 0 rgba(18, 21, 26, 0.05)`,
@@ -368,10 +373,10 @@ export const Button: React.FC<Props> = ({
             }),
 
             backgroundColor:
-              feel === "raised"
-                ? color
-                : feel === "secondary"
+              color === colors.white
                 ? colors.white
+                : feel === "raised"
+                ? color
                 : color === defaultColor
                 ? theme === "dark"
                   ? colors.grey.darker
diff --git a/src/Modal/Modal.story.tsx b/src/Modal/Modal.story.tsx
index b76c2593..7655e5ff 100644
--- a/src/Modal/Modal.story.tsx
+++ b/src/Modal/Modal.story.tsx
@@ -82,7 +82,7 @@ storiesOf("Modal", module)
           </Button>
         }
         secondaryAction={
-          <Button feel="secondary" type="button">
+          <Button color={colors.white} type="button">
             Cancel
           </Button>
         }
@@ -151,7 +151,7 @@ storiesOf("Modal", module)
             Buy 1 Seat
           </Button>
         }
-        secondaryAction={<Button feel="secondary">Cancel</Button>}
+        secondaryAction={<Button color={colors.white}>Cancel</Button>}
         bottomLeftText={
           <span css={{ color: colors.blue.base }}>
             Update Billing Information