diff --git a/packages/web-react/docs/stories/examples/FooterContent.stories.tsx b/packages/web-react/docs/stories/examples/FooterContent.stories.tsx
index 1e3372334b..3cc91190a8 100644
--- a/packages/web-react/docs/stories/examples/FooterContent.stories.tsx
+++ b/packages/web-react/docs/stories/examples/FooterContent.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '../../../src/components/Button';
+import { ButtonLink } from '../../../src/components/ButtonLink';
 import { Container } from '../../../src/components/Container';
 import { Divider } from '../../../src/components/Divider';
 import { Flex } from '../../../src/components/Flex';
@@ -264,7 +264,7 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
         )}
 
         {/* Divider */}
-        {showDividers && numberOfLinkColumns > 0 && <Divider UNSAFE_className="my-900" />}
+        {showDividers && numberOfLinkColumns > 0 && <Divider marginY="space-900" />}
 
         {/* Grid with product logo, social media links and language switch */}
         <Grid
@@ -285,34 +285,34 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
           {showSocialMediaButtons && (
             <Flex elementType="ul" alignmentX={showLanguageSwitch ? 'center' : 'right'} alignmentY="center">
               <li>
-                <Button elementType="a" size="medium" color="secondary" isSquare>
+                <ButtonLink size="medium" color="secondary" isSquare>
                   <span className="accessibility-hidden">Facebook</span>
                   <Icon name="logo-facebook" />
-                </Button>
+                </ButtonLink>
               </li>
               <li>
-                <Button elementType="a" size="medium" color="secondary" isSquare>
+                <ButtonLink size="medium" color="secondary" isSquare>
                   <span className="accessibility-hidden">X</span>
                   <Icon name="logo-x" />
-                </Button>
+                </ButtonLink>
               </li>
               <li>
-                <Button elementType="a" size="medium" color="secondary" isSquare>
+                <ButtonLink size="medium" color="secondary" isSquare>
                   <span className="accessibility-hidden">YouTube</span>
                   <Icon name="logo-youtube" />
-                </Button>
+                </ButtonLink>
               </li>
               <li>
-                <Button elementType="a" size="medium" color="secondary" isSquare>
+                <ButtonLink size="medium" color="secondary" isSquare>
                   <span className="accessibility-hidden">Google</span>
                   <Icon name="logo-google" />
-                </Button>
+                </ButtonLink>
               </li>
               <li>
-                <Button elementType="a" size="medium" color="secondary" isSquare>
+                <ButtonLink size="medium" color="secondary" isSquare>
                   <span className="accessibility-hidden">LinkedIn</span>
                   <Icon name="logo-linkedin" />
-                </Button>
+                </ButtonLink>
               </li>
             </Flex>
           )}
@@ -329,7 +329,7 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
         </Grid>
 
         {/* Divider */}
-        {showDividers && showSecondaryLinks && <Divider UNSAFE_className="my-900" />}
+        {showDividers && showSecondaryLinks && <Divider marginY="space-900" />}
 
         {/* Flex with secondary links */}
         {showSecondaryLinks && (
@@ -342,22 +342,22 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
               isWrapping
             >
               <li>
-                <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+                <Link href="https://www.example.com" color="secondary">
                   Legal notice
                 </Link>
               </li>
               <li>
-                <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+                <Link href="https://www.example.com" color="secondary">
                   Terms of service
                 </Link>
               </li>
               <li>
-                <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+                <Link href="https://www.example.com" color="secondary">
                   Privacy policy
                 </Link>
               </li>
               <li>
-                <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+                <Link href="https://www.example.com" color="secondary">
                   Manage cookies
                 </Link>
               </li>
diff --git a/packages/web-react/src/components/Footer/README.md b/packages/web-react/src/components/Footer/README.md
index a7f396b92e..5353504b61 100644
--- a/packages/web-react/src/components/Footer/README.md
+++ b/packages/web-react/src/components/Footer/README.md
@@ -90,16 +90,16 @@ Use the [Product Logo][product-logo] component to display the logo of your produ
 
 ### Social Media Links
 
-Use the secondary [Button][button] component to create social media links inside a [Flex][flex] container.
+Use the secondary [ButtonLink][buttonlink] component to create social media links inside a [Flex][flex] container.
 
 ```jsx
 <Flex elementType="ul" alignmentX="center" alignmentY="center">
   {/* Repeat the `<li>` block for each social media link. */}
   <li>
-    <Button elementType="a" size="medium" color="secondary" isSquare>
+    <ButtonLink size="medium" color="secondary" isSquare>
       <span className="accessibility-hidden">Facebook</span>
       <Icon name="logo-facebook" />
-    </Button>
+    </ButtonLink>
   </li>
 <Flex>
 ```
@@ -161,7 +161,7 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
     </Grid>
 
     {/* Divider */}
-    <Divider UNSAFE_className="my-900" />
+    <Divider marginY="space-900" />
 
     {/* Grid with product logo, social media links and language switch */}
     <Grid
@@ -180,22 +180,22 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
       {/* Flex with social media links */}
       <Flex elementType="ul" alignmentX="center" alignmentY="center">
         <li>
-          <Button elementType="a" size="medium" color="secondary" isSquare>
+          <ButtonLinkLink size="medium" color="secondary" isSquare>
             <span className="accessibility-hidden">Facebook</span>
             <Icon name="logo-facebook" />
-          </Button>
+          </ButtonLink>
         </li>
         <li>
-          <Button elementType="a" size="medium" color="secondary" isSquare>
+          <ButtonLinkLink size="medium" color="secondary" isSquare>
             <span className="accessibility-hidden">X</span>
             <Icon name="logo-x" />
-          </Button>
+          </ButtonLink>
         </li>
         <li>
-          <Button elementType="a" size="medium" color="secondary" isSquare>
+          <ButtonLinkLink size="medium" color="secondary" isSquare>
             <span className="accessibility-hidden">YouTube</span>
             <Icon name="logo-youtube" />
-          </Button>
+          </ButtonLink>
         </li>
       </Flex>
 
@@ -209,7 +209,7 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
     </Grid>
 
     {/* Divider */}
-    <Divider UNSAFE_className="my-900" />
+    <Divider marginY="space-900" />
 
     {/* Flex with secondary links */}
     <nav aria-label="Secondary links">
@@ -221,22 +221,22 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
         isWrapping
       >
         <li>
-          <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+          <Link href="https://www.example.com" color="secondary">
             Legal notice
           </Link>
         </li>
         <li>
-          <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+          <Link href="https://www.example.com" color="secondary">
             Terms of service
           </Link>
         </li>
         <li>
-          <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+          <Link href="https://www.example.com" color="secondary">
             Privacy policy
           </Link>
         </li>
         <li>
-          <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+          <Link href="https://www.example.com" color="secondary">
             Manage cookies
           </Link>
         </li>
@@ -246,7 +246,7 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
 </Footer>
 ```
 
-[button]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Button/README.md
+[buttonlink]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/ButtonLink/README.md
 [divider]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Divider/README.md
 [flex]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Flex/README.md
 [grid]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Grid/README.md
diff --git a/packages/web-react/src/components/Footer/demo/FooterDefault.tsx b/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
index 9241fca2c5..5cd839ab33 100644
--- a/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
+++ b/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '../../Button';
+import { ButtonLink } from '../../ButtonLink';
 import { Container } from '../../Container';
 import { Divider } from '../../Divider';
 import { Flex } from '../../Flex';
@@ -86,7 +86,7 @@ const FooterDefault = () => {
         </Grid>
 
         {/* Divider */}
-        <Divider UNSAFE_className="my-900" />
+        <Divider marginY="space-900" />
 
         {/* Grid with product logo, social media links and language switch */}
         <Grid
@@ -105,34 +105,34 @@ const FooterDefault = () => {
           {/* Flex with social media links */}
           <Flex elementType="ul" alignmentX="center" alignmentY="center">
             <li>
-              <Button elementType="a" size="medium" color="secondary" isSquare>
+              <ButtonLink size="medium" color="secondary" isSquare>
                 <span className="accessibility-hidden">Facebook</span>
                 <Icon name="logo-facebook" />
-              </Button>
+              </ButtonLink>
             </li>
             <li>
-              <Button elementType="a" size="medium" color="secondary" isSquare>
+              <ButtonLink size="medium" color="secondary" isSquare>
                 <span className="accessibility-hidden">X</span>
                 <Icon name="logo-x" />
-              </Button>
+              </ButtonLink>
             </li>
             <li>
-              <Button elementType="a" size="medium" color="secondary" isSquare>
+              <ButtonLink size="medium" color="secondary" isSquare>
                 <span className="accessibility-hidden">YouTube</span>
                 <Icon name="logo-youtube" />
-              </Button>
+              </ButtonLink>
             </li>
             <li>
-              <Button elementType="a" size="medium" color="secondary" isSquare>
+              <ButtonLink size="medium" color="secondary" isSquare>
                 <span className="accessibility-hidden">Google</span>
                 <Icon name="logo-google" />
-              </Button>
+              </ButtonLink>
             </li>
             <li>
-              <Button elementType="a" size="medium" color="secondary" isSquare>
+              <ButtonLink size="medium" color="secondary" isSquare>
                 <span className="accessibility-hidden">LinkedIn</span>
                 <Icon name="logo-linkedin" />
-              </Button>
+              </ButtonLink>
             </li>
           </Flex>
 
@@ -146,7 +146,7 @@ const FooterDefault = () => {
         </Grid>
 
         {/* Divider */}
-        <Divider UNSAFE_className="my-900" />
+        <Divider marginY="space-900" />
 
         {/* Flex with secondary links */}
         <nav aria-label="Secondary links">
@@ -158,22 +158,22 @@ const FooterDefault = () => {
             isWrapping
           >
             <li>
-              <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+              <Link href="https://www.example.com" color="secondary">
                 Legal notice
               </Link>
             </li>
             <li>
-              <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+              <Link href="https://www.example.com" color="secondary">
                 Terms of service
               </Link>
             </li>
             <li>
-              <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+              <Link href="https://www.example.com" color="secondary">
                 Privacy policy
               </Link>
             </li>
             <li>
-              <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+              <Link href="https://www.example.com" color="secondary">
                 Manage cookies
               </Link>
             </li>
diff --git a/packages/web-react/src/components/Footer/demo/FooterNested.tsx b/packages/web-react/src/components/Footer/demo/FooterNested.tsx
index 1d91bc2bbf..a21f70a1a5 100644
--- a/packages/web-react/src/components/Footer/demo/FooterNested.tsx
+++ b/packages/web-react/src/components/Footer/demo/FooterNested.tsx
@@ -79,7 +79,7 @@ const FooterNested = () => {
         </Grid>
 
         {/* Divider */}
-        <Divider UNSAFE_className="my-900" />
+        <Divider marginY="space-900" />
 
         {/* Product logo */}
         <div className="text-center">
@@ -89,7 +89,7 @@ const FooterNested = () => {
         </div>
 
         {/* Divider */}
-        <Divider UNSAFE_className="my-900" />
+        <Divider marginY="space-900" />
 
         {/* Flex with secondary links */}
         <nav aria-label="Secondary links">
@@ -101,22 +101,22 @@ const FooterNested = () => {
             isWrapping
           >
             <li>
-              <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+              <Link href="https://www.example.com" color="secondary">
                 Legal notice
               </Link>
             </li>
             <li>
-              <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+              <Link href="https://www.example.com" color="secondary">
                 Terms of service
               </Link>
             </li>
             <li>
-              <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+              <Link href="https://www.example.com" color="secondary">
                 Privacy policy
               </Link>
             </li>
             <li>
-              <Link href="https://www.example.com" UNSAFE_className="link-secondary">
+              <Link href="https://www.example.com" color="secondary">
                 Manage cookies
               </Link>
             </li>