diff --git a/docs/stories/04-components/IconButton.mdx b/docs/stories/04-components/IconButton.mdx
index 5eb41a81b..96e615e0a 100644
--- a/docs/stories/04-components/IconButton.mdx
+++ b/docs/stories/04-components/IconButton.mdx
@@ -15,8 +15,8 @@ import * as IconButtonStories from './IconButton.stories';
## Overview
-A type of button that does not have a visible label but instead an icon to denote its action. The component does
-require a label for accessibility & by default, will show a tooltip with that label.
+A type of button that does not have a visible label but instead an icon to denote its action. The component does require
+a label for accessibility & by default, will show a tooltip with that label.
diff --git a/docs/stories/04-components/LinkButton.mdx b/docs/stories/04-components/LinkButton.mdx
index 713dfc5a4..ab37be6f9 100644
--- a/docs/stories/04-components/LinkButton.mdx
+++ b/docs/stories/04-components/LinkButton.mdx
@@ -32,32 +32,19 @@ import { LinkButton } from '@strapi/design-system';
### React Router
-To use the LinkButton component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink`
-component to the `tag` prop in order to replace the default HTML anchor ``. You'll now be able to pass all
-`NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
```jsx
import { LinkButton } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
Home
;
```
-### NextJS
-
-For NextJS, you'll need to wrap the `LinkButton` with the `NextLink` component
-
-```jsx
-import { LinkButton } from '@strapi/design-system';
-import NextLink from 'next/link';
-
-
- Home
-;
-```
-
## Props
diff --git a/docs/stories/04-components/TextButton.mdx b/docs/stories/04-components/TextButton.mdx
index 4500bd37c..f9915a800 100644
--- a/docs/stories/04-components/TextButton.mdx
+++ b/docs/stories/04-components/TextButton.mdx
@@ -54,28 +54,15 @@ import { TextButton } from '@strapi/design-system';
### React Router
-To use the LinkButton component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink`
-component to the `tag` prop in order to replace the default HTML anchor ``. You'll now be able to pass all
-`NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
```jsx
import { TextButton } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
Home
;
```
-
-### NextJS
-
-For NextJS, you'll need to wrap the `LinkButton` with the `NextLink` component
-
-```jsx
-import { TextButton } from '@strapi/design-system';
-import NextLink from 'next/link';
-
-
- Home
-;
-```
diff --git a/docs/stories/Breadcrumbs.mdx b/docs/stories/Breadcrumbs.mdx
index 37ad81901..d3a83be2d 100644
--- a/docs/stories/Breadcrumbs.mdx
+++ b/docs/stories/Breadcrumbs.mdx
@@ -47,35 +47,21 @@ Breadcrumbs with Crumb are visual information only and cannot be navigated. They
### Usage with other routing libraries
-To use the Link component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink` component to
-the `as` prop in order to replace the default HTML anchor ``. You'll now be able to pass all `NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
```jsx
import { Breadcrumbs, CrumbLink } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
-
+
Media Library
;
```
-#### NextJS usage
-
-For NextJS, you'll need to wrap the `CrumbLink` with the `NextLink` component
-
-```jsx
-import { Breadcrumbs, CrumbLink } from '@strapi/design-system';
-import NextLink from 'next/link';
-
-
-
- Media Library
-
-;
-```
-
## Props
diff --git a/docs/stories/Link.mdx b/docs/stories/Link.mdx
index 83c15b550..fc1095431 100644
--- a/docs/stories/Link.mdx
+++ b/docs/stories/Link.mdx
@@ -50,31 +50,19 @@ Display icons on the left or right side.
### Usage with other routing libraries
-To use the Link component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink` component to
-the `as` prop in order to replace the default HTML anchor ``. You'll now be able to pass all `NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
```jsx
import { Link } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
Home
;
```
-#### NextJS usage
-
-For NextJS, you'll need to wrap the `Link` with the `NextLink` component
-
-```jsx
-import { Link } from '@strapi/design-system';
-import NextLink from 'next/link';
-
-
- Home
-;
-```
-
## Props
diff --git a/docs/stories/Pagination.mdx b/docs/stories/Pagination.mdx
index 1cd007660..eb0ab420e 100644
--- a/docs/stories/Pagination.mdx
+++ b/docs/stories/Pagination.mdx
@@ -23,13 +23,13 @@ import { Dots, NextLink, PageLink, Pagination, PreviousLink } from '@strapi/desi
### Usage with routing libraries
-To use the PreviousLink/PageLink/NextLink component with a routing library (e.g. react-router-dom), you'll need to pass
-the `NavLink` component to the `as` prop in order to replace the default HTML anchor ``. You'll now be able to pass
-all `NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
```jsx
import { PreviousLink, PageLink, NextLink } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
@@ -47,30 +47,6 @@ import { NavLink } from 'react-router-dom';
;
```
-#### Usage with NextJS
-
-For NextJS, you'll need to wrap the `Link` with the `NextLink` component
-
-```jsx
-import { PreviousLink, PageLink, NextLink } from '@strapi/design-system';
-import NextLink from 'next/link';
-
-
-
- Previous
-
-
- 1
-
-
- 2
-
-
- Next page
-
-;
-```
-
## Props
diff --git a/docs/stories/SimpleMenu.mdx b/docs/stories/SimpleMenu.mdx
index 13f5c8571..1b4b671a7 100644
--- a/docs/stories/SimpleMenu.mdx
+++ b/docs/stories/SimpleMenu.mdx
@@ -32,7 +32,7 @@ internal link so specific defaults may be different to what you expect.
If you're using a framework e.g. `react-router-dom` or `nextjs` you'll probably want to use their `Link` component as a
-base. This is completely possible by using the `as` prop:
+base. This is completely possible by using the `tag` prop:
```jsx
import { SimpleMenu, MenuItem } from '@strapi/design-system';
diff --git a/docs/stories/SubNav.mdx b/docs/stories/SubNav.mdx
index 8bb521fa8..87219623c 100644
--- a/docs/stories/SubNav.mdx
+++ b/docs/stories/SubNav.mdx
@@ -52,32 +52,19 @@ import {
### Usage with other routing libraries
-To use the Strapi design system SubNavLink component with a routing library (e.g. react-router-dom), you'll need to pass
-the react-router-dom `NavLink` component to the `as` prop in order to replace the default HTML anchor ``. You'll
-now be able to pass all `NavLink` props.
+To use this component with a routing library (e.g. react-router-dom), you'll need to pass the library's specific `Link`
+component to the `tag` prop in order to replace the default html tag the component has. You'll now be able to pass all
+the props associated to that component.
```jsx
import { SubNavLink } from '@strapi/design-system';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'my-routing-library';
-
+
Home
;
```
-#### NextJS usage
-
-For NextJS, you'll need to wrap the `NavLink` with the `NextLink` component
-
-```jsx
-import { SubNavLink } from '@strapi/design-system/SubNavLink';
-import NextLink from 'next/link';
-
-
- Home
-;
-```
-
## SubNav Props