feat(ds): add Link for navigation

[talissoncosta]

Thanks for submitting a PR! Please check the boxes below:

• I have read the Contributing Guide.
• I have added information to docs/ if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Closes #8178 (epic #5746)

The goal is that in-app navigation goes through react-router's Link wherever it can, so the app does not reload, and that one component decides that rather than every call site choosing for itself. Today Button renders an <a> whenever it is given href, which it is at 30 sites, so the name tells you nothing about what you get and each one is a full page load whether it needs to be or not.

• to is the default, rendering a router link. href is for leaving the app. The type permits exactly one, so a link cannot render without a destination and passing both is a compile error rather than one silently winning.
• Owns its styling in Link.scss and imports nothing from Button. In light mode it is the same #6837fc as btn-link ($link-color resolves to $primary), so those call sites will not shift when they move over.
• Dark mode deliberately differs. .dark .btn-link keeps that same purple; this takes --purple-400, which is lighter and holds up better on a dark background. Moving a link over is therefore a visible change in dark mode, not a no-op.
• .link repeats itself under .dark. body.dark a in styles.scss colours every anchor at higher specificity than a bare .link, so the token never applied and links rendered as body text. .dark .btn-link already exists for the same reason. Both disappear if that global rule moves to a token.
• Six stories rather than a controls playground, so each variant snapshots. In-prose and with-icon earn their place: .link is inline-flex with a gap, so baseline alignment mid-sentence and icon spacing are what would break unnoticed.

Not in scope here: nothing uses it yet, deliberately, so this lands on its own. Adoption of the 30 Button href sites follows in batches under #8178, after which Button can drop its anchor branch and only ever render <button>. Roughly 20 of those are external, a handful are internal routes that become to, and about 6 are href='#' with an onClick, which are not navigation and want a real button.

How did you test this code?

• tsc: 0 new errors vs main.
• eslint: clean on all changed files.
• Storybook: six stories added under Components/Link.

Nobody has looked at it rendered, hence draft. Smoke test (light + dark):

• InSentence beside a btn-link elsewhere in the app: colour and weight match, baseline sits right mid-paragraph
• WithIcon: gap: 0.25rem spacing between icon and text
• Dark theme toggle: the one place behaviour differs from btn-link
• InApp: clicking navigates without a page reload
• NewTab: opens a new tab and rel="noreferrer" is set
• AlongsideAButton: the link and the button read as different things

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview	Aug 3, 2026 11:50am
flagsmith-frontend-staging	Ready	Preview	Aug 3, 2026 11:50am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Aug 3, 2026 11:50am

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The change adds a typed Link component for router and external navigation. It adds automatic noreferrer handling for external new-tab links. It adds light and dark mode styles with hover and focus states. It exposes the component and LinkProps through the index module. It adds six Storybook stories for common Link usage patterns.

Estimated code review effort: 3 (Moderate) | ~20 minutes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Zaimwa9]

Requesting changes for a quick one, sorry 🙏

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: d12e3c80-84ce-4e81-bbba-36e233f54ef3

📥 Commits

Reviewing files that changed from the base of the PR and between 2c86cb2 and 7d16a2a.

📒 Files selected for processing (1)

• frontend/web/components/base/link/Link.tsx

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 5b25c3b5-935b-4aff-bb6a-db9206b26d8e

📥 Commits

Reviewing files that changed from the base of the PR and between 7d16a2a and c59b6ee.

📒 Files selected for processing (4)

• frontend/documentation/components/Link.stories.tsx
• frontend/web/components/base/link/Link.scss
• frontend/web/components/base/link/Link.tsx
• frontend/web/components/base/link/index.ts

[Zaimwa9]

Approving as I think we can close our eyes on the relative import if you deem to