feat(Button): Add endIcon prop

src/Button/Button.stories.mdx

@@ -6,10 +6,15 @@ import {
   Props,
   Preview,
 } from "@storybook/addon-docs/blocks";
+import { IconExpandList } from "../icons/IconExpandList";
 import { IconShip2 } from "../icons/IconShip2";
 import { ButtonLayout } from "./button.stories/ButtonLayout";
 import { colors } from "../colors";
 
+export const ExpandIcon = () => (
+  <IconExpandList style={{ height: 12, width: 12, color: colors.grey.light }} />
+);
+
 export const SampleIcon = () => (
   <IconShip2 style={{ height: "100%", width: "100%" }} />
 );
@@ -449,6 +454,25 @@ In space constrained places or for floating action buttons (FAB), we can show an
   </Story>
 </Preview>
 
+### End Icons
+
+You can specify that a button has an additional icon at the end of the row
+
+<Preview>
+  <Story name="light end icon">
+    <ButtonLayout theme="light">
+      <Button endIcon={<ExpandIcon />}>Submit</Button>
+    </ButtonLayout>
+  </Story>
+  <Story name="dark end icon">
+    <ButtonLayout theme="dark">
+      <Button theme="dark" endIcon={<ExpandIcon />}>
+        Submit
+      </Button>
+    </ButtonLayout>
+  </Story>
+</Preview>
+
 ### Loading
 
 You can specify that a button is in a loading state with the `loading` prop

src/Button/Button.tsx

@@ -179,6 +179,13 @@ interface Props
    */
   disabled?: boolean;
 
+  /**
+   * Icon to use at the end of a button
+   *
+   * The size of icons will be automatically determined, but can be overriden
+   */
+  endIcon?: React.ReactElement;
+
   /**
    * Which feel to display
    *
@@ -264,6 +271,7 @@ export const Button = React.forwardRef<HTMLElement, Props>(
       color = defaultColor,
       disabled: disabledProps = false,
       variant,
+      endIcon,
       feel = "raised",
       icon: iconProp,
       loading,
@@ -516,6 +524,25 @@ export const Button = React.forwardRef<HTMLElement, Props>(
                 </span>
               )}
               {children}
+              {endIcon && !loading && (
+                <span
+                  className={cx(
+                    css({
+                      alignItems: "center",
+                      // This needs to be `inline-flex` and not the default of
+                      // `inline-block` to vertically center the icon automatically
+                      display: "inline-flex",
+                      height: iconSize,
+                      justifyContent: "center",
+                      // The `4px` will be on the right to separate the icon from the text
+                      margin: iconOnly ? 0 : "0 0 0 4px",
+                      width: iconSize,
+                    })
+                  )}
+                >
+                  {endIcon}
+                </span>
+              )}
             </>
           ),
         };