Button "to" prop to use react router

src/components/Button/Button.test.jsx

@@ -427,7 +427,7 @@ describe('Button', () => {
         expect(buttonElement.getAttribute('type')).toBe(null);
       });
 
-      test('it renders a target attribute if one is passed, the element is an anchor, and there is a href', () => {
+      test('it renders a target attribute if one is passed, the element is an anchor, and there is an href', () => {
         render(
           <Button href="http://palmetto.com" as="a" target="_blank">
             hey there

src/components/Button/Button.tsx

@@ -8,6 +8,7 @@
   ButtonHTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
+import { Link } from 'react-router-dom';
 import { IconName, ResponsiveProp } from '../../types';
 import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
 import { handleReactRouterClick } from '../../lib/reactRouterClickHandler';
@@ -48,9 +49,11 @@
   id?: string;
   /**
    * URL to navigate to when clicked. Passing this attribute automatically
-   * renders an anchor <a> tag, NOT a <button> element.
+   * renders an anchor <a> tag, NOT a <button> element, and does not use react-router.
    */
   href?: string;
+  /** URL to navigate to via react-router. */
+  to?: string;
   /**
    * Disables the button, making it inoperable.
    */
@@ -132,6 +135,7 @@
       fullWidth = false,
       id = undefined,
       href = undefined,
+      to = undefined,
       iconPrefix = undefined,
       iconSuffix = undefined,
       isDisabled = false,
@@ -257,8 +261,7 @@
     );
 
     const buttonElement = getElementType(Button, { as });
-
-    return createElement(
+    const button = createElement(
       buttonElement,
       {
         id,
@@ -267,7 +270,7 @@
         disabled,
         target: as === 'a' && href ? target : null,
         onBlur: handleBlur,
         onClick: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => handleClick(event, onClick, target, navigate),
         onFocus: handleFocus,
         ref,
         type: type || (as !== 'a' && !href ? 'button' : undefined),
@@ -276,5 +279,15 @@
       },
       buttonContent,
     );
+
+    if (to) {
+      return (
+        <Link to={to}>
+          {button}
+        </Link>
+      );
+    }
+
+    return button;
   },
 );