diff --git a/apps/vr-tests-react-components/src/stories/Link.stories.tsx b/apps/vr-tests-react-components/src/stories/Link.stories.tsx
index df8553f75265c..ab14aceca9756 100644
--- a/apps/vr-tests-react-components/src/stories/Link.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Link.stories.tsx
@@ -8,6 +8,7 @@ import { tokens } from '@fluentui/react-theme';
const AnchorLink = (props: LinkProps & { as?: 'a' }) => ;
const ButtonLink = (props: LinkProps) => ;
+const SpanLink = (props: LinkProps & { as?: 'span' }) => ;
const useInvertedBackgroundStyles = makeStyles({
root: {
@@ -216,3 +217,101 @@ storiesOf('Link Converged - Rendered as button', module)
used alongside other text content.
));
+
+storiesOf('Link Converged - Rendered as span', module)
+ .addDecorator(story => (
+
+ {story()}
+
+ ))
+ .addStory('Stand-alone', () => Stand-alone link, { includeRtl: true })
+ .addStory('Stand-alone Disabled Focusable', () => (
+
+ Stand-alone disabled focusable link
+
+ ))
+ .addStory(
+ 'Inline',
+ () => (
+
+ This is a link used alongside other text content.
+
+ ),
+ { includeRtl: true },
+ )
+ .addStory('Inline Disabled Focusable', () => (
+
+ This is{' '}
+
+ a disabled focusable link
+ {' '}
+ used alongside other text content.
+
+ ))
+ .addStory(
+ 'Inverted',
+ () => (
+
+ Link on inverted background
+
+ ),
+ { includeDarkMode: true, includeHighContrast: true },
+ )
+ .addStory(
+ 'Inverted disabled',
+ () => (
+
+
+ Disabled link on inverted background
+
+
+ ),
+ { includeDarkMode: true, includeHighContrast: true },
+ )
+ .addStory('Wraps correctly as an inline element', () => (
+
+ This link wraps correctly between different lines, behaving as an inline element as
+ expected.
+
+ ));
+
+// We put the disabled stories separately so they do not error on the focused step.
+storiesOf('Link Converged - Rendered as button', module)
+ .addDecorator(story => (
+
+ {story()}
+
+ ))
+ .addStory('Stand-alone Disabled', () => Stand-alone disabled link)
+ .addStory('Inline Disabled', () => (
+
+ This is{' '}
+
+ a disabled link
+ {' '}
+ used alongside other text content.
+
+ ));
diff --git a/change/@fluentui-react-link-aaa21628-9075-404d-8305-6cf56982b4ba.json b/change/@fluentui-react-link-aaa21628-9075-404d-8305-6cf56982b4ba.json
new file mode 100644
index 0000000000000..a426a5a05be19
--- /dev/null
+++ b/change/@fluentui-react-link-aaa21628-9075-404d-8305-6cf56982b4ba.json
@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "feat: Adding span as an option for Link to render as.",
+ "packageName": "@fluentui/react-link",
+ "email": "humbertomakotomorimoto@gmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-link/etc/react-link.api.md b/packages/react-components/react-link/etc/react-link.api.md
index 447413f3149e6..4ad6f2a58b645 100644
--- a/packages/react-components/react-link/etc/react-link.api.md
+++ b/packages/react-components/react-link/etc/react-link.api.md
@@ -28,7 +28,7 @@ export type LinkProps = ComponentProps & {
// @public (undocumented)
export type LinkSlots = {
- root: Slot<'a', 'button'>;
+ root: Slot<'a', 'button' | 'span'>;
};
// @public (undocumented)
@@ -40,7 +40,7 @@ export type LinkState = ComponentState & Required JSX.Element;
// @public
-export const useLink_unstable: (props: LinkProps, ref: React_2.Ref) => LinkState;
+export const useLink_unstable: (props: LinkProps, ref: React_2.Ref) => LinkState;
// @public
export const useLinkState_unstable: (state: LinkState) => LinkState;
diff --git a/packages/react-components/react-link/src/components/Link/Link.types.ts b/packages/react-components/react-link/src/components/Link/Link.types.ts
index da7c745c8a307..13e221fad5bf3 100644
--- a/packages/react-components/react-link/src/components/Link/Link.types.ts
+++ b/packages/react-components/react-link/src/components/Link/Link.types.ts
@@ -5,7 +5,7 @@ export type LinkSlots = {
/**
* Root of the component that renders as either an or a