diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index f89912ada8c3..df340fa99a63 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -4328,6 +4328,9 @@ Map { "Link" => Object { "$$typeof": Symbol(react.forward_ref), "propTypes": Object { + "as": Object { + "type": "string", + }, "children": Object { "type": "node", }, diff --git a/packages/react/src/components/Link/Link.stories.js b/packages/react/src/components/Link/Link.stories.js index c1034f5a41a2..79b430512d11 100644 --- a/packages/react/src/components/Link/Link.stories.js +++ b/packages/react/src/components/Link/Link.stories.js @@ -29,6 +29,9 @@ export default { disable: true, }, }, + as: { + control: false, + }, renderIcon: { table: { disable: true, diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx index 11c8dc028415..6d78cb9784df 100644 --- a/packages/react/src/components/Link/Link.tsx +++ b/packages/react/src/components/Link/Link.tsx @@ -17,6 +17,12 @@ import React, { import { usePrefix } from '../../internal/usePrefix'; export interface LinkProps extends AnchorHTMLAttributes { + /** + * Provide a custom element or component to render the top-level node for the + * component. + */ + as?: string | undefined; + /** * @description Indicates the element that represents the * current item within a container or set of related @@ -70,6 +76,7 @@ export interface LinkProps extends AnchorHTMLAttributes { const Link = React.forwardRef>( function Link( { + as: BaseComponent, children, className: customClassName, href, @@ -92,7 +99,7 @@ const Link = React.forwardRef>( }); const rel = target === '_blank' ? 'noopener' : undefined; const linkProps: AnchorHTMLAttributes = { - className, + className: BaseComponent ? undefined : className, rel, target, }; @@ -106,15 +113,17 @@ const Link = React.forwardRef>( linkProps['aria-disabled'] = true; } + const BaseComponentAsAny = (BaseComponent ?? 'a') as any; + return ( - + {children} {!inline && Icon && (
)} -
+ ); } ); @@ -122,6 +131,12 @@ const Link = React.forwardRef>( Link.displayName = 'Link'; Link.propTypes = { + /** + * Provide a custom element or component to render the top-level node for the + * component. + */ + as: PropTypes.string, + /** * Provide the content for the Link */