diff --git a/src/components/Button.js b/src/components/Button.js
index f031b25f..051ec2b7 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -399,22 +399,18 @@ const ButtonLink = styled.a``;
// The main purpose of this component is to strip certain props that get passed
// down to the styled component, so that we don't end up passing them to a
// tag which would throw warnings for non-standard props.
-function ButtonComponentPicker({
- appearance,
- ButtonWrapper,
- containsIcon,
- isLink,
- isLoading,
- isUnclickable,
- size,
- ...rest
-}) {
- // Use the UnstyledButton here to avoid duplicating styles and creating
- // specificity conflicts by first rendering the StyledLink higher up the chain
- // and then re-rendering it through the 'as' prop.
- const ButtonComponent = isLink ? ButtonLink : ButtonWrapper || UnstyledButton;
- return ;
-}
+const ButtonComponentPicker = forwardRef(
+ (
+ { appearance, ButtonWrapper, containsIcon, isLink, isLoading, isUnclickable, size, ...rest },
+ ref
+ ) => {
+ // Use the UnstyledButton here to avoid duplicating styles and creating
+ // specificity conflicts by first rendering the StyledLink higher up the chain
+ // and then re-rendering it through the 'as' prop.
+ const ButtonComponent = isLink ? ButtonLink : ButtonWrapper || UnstyledButton;
+ return ;
+ }
+);
const buttonStyleProps = {
appearance: PropTypes.oneOf(Object.values(APPEARANCES)),
diff --git a/src/components/Link.js b/src/components/Link.js
index 8058a7df..21ba774d 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -130,22 +130,18 @@ const LinkButton = styled.button`
// The main purpose of this component is to strip certain props that get passed
// down to the styled component, so that we don't end up passing them to a
// tag which would throw warnings for non-standard props.
-function LinkComponentPicker({
- containsIcon,
- inverse,
- isButton,
- LinkWrapper,
- nochrome,
- secondary,
- tertiary,
- ...rest
-}) {
- // Use the UnstyledLink here to avoid duplicating styles and creating
- // specificity conflicts by first rendering the StyledLink higher up the chain
- // and then re-rendering it through the 'as' prop.
- const LinkComponent = isButton ? LinkButton : LinkWrapper || UnstyledLink;
- return ;
-}
+const LinkComponentPicker = forwardRef(
+ (
+ { containsIcon, inverse, isButton, LinkWrapper, nochrome, secondary, tertiary, ...rest },
+ ref
+ ) => {
+ // Use the UnstyledLink here to avoid duplicating styles and creating
+ // specificity conflicts by first rendering the StyledLink higher up the chain
+ // and then re-rendering it through the 'as' prop.
+ const LinkComponent = isButton ? LinkButton : LinkWrapper || UnstyledLink;
+ return ;
+ }
+);
const linkStyleProps = {
containsIcon: PropTypes.bool,