From 1b6560eb4a0f95e3d9921e8041b0fbca7fe165ac Mon Sep 17 00:00:00 2001 From: Nikita Kononenko Date: Fri, 20 Dec 2024 16:28:35 -0800 Subject: [PATCH] Add support NextLink and other custom link components Added support for using custom link components (e.g., NextLink) in the Button component via the new hrefComponent prop. If hrefComponent is not specified, it defaults to . Details: - Introduced a new prop hrefComponent in ButtonProps. - If hrefComponent is provided, it will render the specified component for links instead of . - Maintains backward compatibility by defaulting to when hrefComponent is not set. - Ensures flexibility for projects using custom routing libraries like Next.js. Signed-off-by: Nikita Kononenko --- src/components/Button/Button.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 173ffa2282..b4af228e16 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -50,6 +50,7 @@ export interface ButtonProps extends DOMProps, QAProps { type?: 'button' | 'submit' | 'reset'; component?: React.ElementType; href?: string; + hrefComponent?: React.ElementType; target?: string; rel?: string; extraProps?: @@ -80,6 +81,7 @@ const ButtonWithHandlers = React.forwardRef(function B type = 'button', component, href, + hrefComponent, target, rel, extraProps, @@ -137,14 +139,17 @@ const ButtonWithHandlers = React.forwardRef(function B 'data-qa': qa, }; - if (typeof href === 'string' || component) { + if (href || component) { const linkProps = { href, target, rel: target === '_blank' && !rel ? 'noopener noreferrer' : rel, }; + + const LinkComponent = hrefComponent || 'a'; + return React.createElement( - component || 'a', + component || LinkComponent, { ...extraProps, ...commonProps,