scaleway · jsulpis · May 13, 2026
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+`Link`: update the decoration and sentiment behavior, fix styles for the different sizes
@@ -113,33 +113,28 @@ exports[`banner > renders correctly with a link 1`] = `
           class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_gap_1rem_xxsmall__toi52u3v"
         >
           <a
-            class="styles__1dtqm9e0 styles_prominence_default__1dtqm9e3 styles_sentiment_primary__1dtqm9e1 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_0__1dtqm9ee styles__1dtqm9en"
-            data-variant="standalone"
+            class="styles__1dtqm9e0 styles_prominence_default__1dtqm9e3 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_info__1dtqm9e2 styles_undefined_compound_1__1dtqm9ed styles__1dtqm9en"
             href=""
             rel="noopener noreferrer"
             target="_blank"
           >
             Link
-            <span
-              class="styles__1dtqm9em"
+            <svg
+              class="styles__1dtqm9ep styles_small__1dtqm9el uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzg uv_icons_1sbwqkz1n"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                class="styles__1dtqm9ep uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzg uv_icons_1sbwqkz1n"
-                height="16"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <title>
-                  OpenInNewIcon
-                </title>
-                <path
-                  d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69z"
-                />
-                <path
-                  d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25z"
-                />
-              </svg>
-            </span>
+              <title>
+                OpenInNewIcon
+              </title>
+              <path
+                d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69z"
+              />
+              <path
+                d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25z"
+              />
+            </svg>
           </a>
         </div>
       </div>
@@ -375,33 +370,28 @@ exports[`banner > should render correctly with dark theme 1`] = `
           class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_gap_1rem_xxsmall__toi52u3v"
         >
           <a
-            class="styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_primary__1dtqm9e1 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_2__1dtqm9eg styles__1dtqm9en"
-            data-variant="standalone"
+            class="styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_info__1dtqm9e2 styles_undefined_compound_5__1dtqm9eh styles__1dtqm9en"
             href=""
             rel="noopener noreferrer"
             target="_blank"
           >
             Learn more
-            <span
-              class="styles__1dtqm9em"
+            <svg
+              class="styles__1dtqm9ep styles_small__1dtqm9el uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzg uv_icons_1sbwqkz1n"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                class="styles__1dtqm9ep uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzg uv_icons_1sbwqkz1n"
-                height="16"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <title>
-                  OpenInNewIcon
-                </title>
-                <path
-                  d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69z"
-                />
-                <path
-                  d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25z"
-                />
-              </svg>
-            </span>
+              <title>
+                OpenInNewIcon
+              </title>
+              <path
+                d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69z"
+              />
+              <path
+                d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25z"
+              />
+            </svg>
           </a>
         </div>
       </div>

@@ -126,7 +126,7 @@ export const Banner = ({
               </Button>
             ) : null}
             {linkText ? (
-              <Link href={linkHref ?? ''} prominence={prominence} sentiment="primary" size="small" target="_blank">
+              <Link href={linkHref ?? ''} prominence={prominence} size="small" target="_blank">
                 {linkText}
               </Link>
             ) : null}

@@ -15,8 +15,7 @@ exports[`breadcrumbs > click on middle item 1`] = `
           class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
-            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
-            data-variant="standalone"
+            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
             href="/step1"
           >
             Step 1
@@ -62,8 +61,7 @@ exports[`breadcrumbs > last item should no be clickable 1`] = `
           class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
-            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
-            data-variant="standalone"
+            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
             href="/step1"
           >
             Step 1
@@ -73,8 +71,7 @@ exports[`breadcrumbs > last item should no be clickable 1`] = `
           class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
-            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
-            data-variant="standalone"
+            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
             href="/step1/step2"
           >
             I'm a very long long long long long long long long long long long long step
@@ -111,8 +108,7 @@ exports[`breadcrumbs > renders correctly with default values 1`] = `
           class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
-            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
-            data-variant="standalone"
+            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
             href="/step1"
           >
             Step 1
@@ -122,8 +118,7 @@ exports[`breadcrumbs > renders correctly with default values 1`] = `
           class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
-            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
-            data-variant="standalone"
+            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
             href="/step1/step2"
           >
             I'm a very long long long long long long long long long long long long step
@@ -177,8 +172,7 @@ exports[`breadcrumbs > renders correctly with minWidth and maxWidth 1`] = `
           class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
-            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
-            data-variant="standalone"
+            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
             href="/step1"
           >
             Step 1
@@ -189,8 +183,7 @@ exports[`breadcrumbs > renders correctly with minWidth and maxWidth 1`] = `
           style="--_1yxbbx41: 100px; --_1yxbbx40: 200px;"
         >
           <a
-            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
-            data-variant="standalone"
+            class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_4__1dtqm9eg styles__1dtqm9en"
             href="/step1/step2"
           >
             I'm a very long long long long long long long long long long long long step

@@ -136,8 +136,7 @@ exports[`emptySpace > should work with learn more 1`] = `
           class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_column_xxsmall__toi52u2d styles_gap_1rem_xxsmall__toi52u3v styles_justifyContent_center_xxsmall__toi52u61"
         >
           <a
-            class="styles__1dtqm9e0 styles_prominence_default__1dtqm9e3 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodyStrong__1dtqm9eb styles_type_standalone__1dtqm9ed styles_undefined_compound_4__1dtqm9ei styles__1dtqm9en"
-            data-variant="standalone"
+            class="styles__1dtqm9e0 styles_prominence_default__1dtqm9e3 styles_oneLine_false__1dtqm9e8 styles_variant_bodyStrong__1dtqm9eb styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_0__1dtqm9ec styles__1dtqm9en"
             href="https://scaleway.com"
           >
             Learn more

@@ -310,8 +310,7 @@ exports[`globalAlert > renders correctly with link 1`] = `
         >
           This is a 
           <a
-            class="styles__1dtqm9e0 styles_prominence_strong__1dtqm9e4 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_inline__1dtqm9ec styles_undefined_compound_5__1dtqm9ej styles__1dtqm9en"
-            data-variant="inline"
+            class="styles__1dtqm9e0 styles_prominence_strong__1dtqm9e4 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_sentiment_primary__1dtqm9e1 styles_undefined_compound_2__1dtqm9ee styles__1dtqm9en"
             href="scaleway.com"
           >
             Global Alert

@@ -1,4 +1,5 @@
 import type { Decorator } from '@storybook/react-vite'
+import { DocPaperIcon } from '@ultraviolet/icons/DocPaperIcon'
 import type { ComponentProps } from 'react'
 import { Link } from '..'
 import { Stack } from '../../Stack'
@@ -11,24 +12,20 @@ export const Examples = (args: ComponentProps<typeof Link>) => {
     <>
       <Text as="p" variant="body">
         To know more about that feature please visit{' '}
-        <Link {...props} href="https://example.com" target="_blank" variant="inline">
+        <Link {...props} href="https://example.com" target="_blank">
           our website
-        </Link>{' '}
-        that is available any time.
+        </Link>
+        .
       </Text>
       <Text as="p" variant="body">
-        To know more about that feature please visit{' '}
-        <Link {...props} href="https://example.com" target="_blank">
-          our website
-        </Link>{' '}
-        that is available any time.
+        Update the view using the{' '}
+        <Link {...props}>
+          filters panel <DocPaperIcon />
+        </Link>
+        .
       </Text>
       <Text as="p" variant="body">
-        To know more about that feature please visit{' '}
-        <Link {...props} href="https://example.com" iconPosition="right">
-          our website
-        </Link>{' '}
-        that is available any time.
+        Go to your <Link {...props}>profile page</Link> to update your preferences.
       </Text>
     </>
   )

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react'
+import { Link } from '..'
+import { Stack } from '../../Stack'
+
+const sizes = ['large', 'small', 'xsmall'] as const
+
+export const Icons = (props: ComponentProps<typeof Link>) => (
+  <Stack gap={2}>
+    <Stack direction="row" alignItems="end" gap="3">
+      {sizes.map(size => (
+        <Link key={size} {...props} size={size} iconPosition="left">
+          {size}
+        </Link>
+      ))}
+    </Stack>
+    <Stack direction="row" alignItems="end" gap="3">
+      {sizes.map(size => (
+        <Link key={size} {...props} size={size} iconPosition="right">
+          {size}
+        </Link>
+      ))}
+    </Stack>
+  </Stack>
+)
+
+Icons.parameters = {
+  docs: {
+    description: { story: 'Add an arrow icon on the left or right with the `iconPosition` property.' },
+  },
+}
@@ -27,7 +27,7 @@ OneLine.parameters = {
   docs: {
     description: {
       story:
-        ' `oneLine` prop will force link to be display on a single line by adding `...` after cropped text and will display a tooltip with full text when hovered.',
+        'The `oneLine` property will force the link to be display on a single line by adding an ellipsis `...` after the cropped text and will display a tooltip with the full text when hovered.',
     },
   },
 }
@@ -1,21 +1,37 @@
-import type { Decorator } from '@storybook/react-vite'
+import { useTheme } from '@ultraviolet/themes'
 import type { ComponentProps } from 'react'
 import { Link } from '..'
-import type { ProminenceProps } from '..'
 import { Stack } from '../../Stack'
-import { PROMINENCES } from '../constants'
 
-export const Prominence = (props: ComponentProps<typeof Link>) =>
-  Object.keys(PROMINENCES).map(prominence => (
-    <Link key={prominence} {...props} prominence={prominence as ProminenceProps}>
-      {prominence}
-    </Link>
-  ))
+export const Prominence = (props: ComponentProps<typeof Link>) => {
+  const theme = useTheme()
 
-Prominence.decorators = [
-  StoryComponent => (
-    <Stack>
-      <StoryComponent />
+  return (
+    <Stack width="300px">
+      <Stack direction="row" gap={2} style={{ background: theme.colors.neutral.background, padding: '1rem' }}>
+        <Link {...props} prominence="default">
+          Default
+        </Link>
+        <Link prominence="default" target="_blank">
+          External
+        </Link>
+      </Stack>
+      <Stack direction="row" gap={2} style={{ background: theme.colors.neutral.backgroundStronger, padding: '1rem' }}>
+        <Link {...props} prominence="strong">
+          Default
+        </Link>
+        <Link prominence="strong" target="_blank">
+          External
+        </Link>
+      </Stack>
     </Stack>
-  ),
-] as Decorator[]
+  )
+}
+
+Prominence.parameters = {
+  docs: {
+    description: {
+      story: 'On a dark background, use `prominence="strong"` to make the link visible.',
+    },
+  },
+}