From 3e68fcae92b71de2d46f6ae34318f0d997e55a1a Mon Sep 17 00:00:00 2001
From: Ambrish R <ambrish.r@infosys.com>
Date: Fri, 6 Mar 2026 19:12:14 +0530
Subject: [PATCH] bui(docs-ui): Add discord link to backstage ui docs header
 (#33108)

* Add discord link to backstage ui docs header

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>

* Addressing review comments

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>

---------

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>
---
 docs-ui/src/components/Toolbar/Toolbar.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs-ui/src/components/Toolbar/Toolbar.tsx b/docs-ui/src/components/Toolbar/Toolbar.tsx
index 4a071bf45e..ea094b2a81 100644
--- a/docs-ui/src/components/Toolbar/Toolbar.tsx
+++ b/docs-ui/src/components/Toolbar/Toolbar.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import {
   RiArrowDownSLine,
+  RiDiscordLine,
   RiGithubLine,
   RiMoonLine,
   RiSearchLine,
@@ -95,6 +96,7 @@ export const Toolbar = ({ version }: ToolbarProps) => {
         <a
           href="https://www.npmjs.com/package/@backstage/ui"
           target="_blank"
+          rel="noopener noreferrer"
           className={styles.bubble}
           data-hide-tablet
         >
@@ -103,11 +105,23 @@ export const Toolbar = ({ version }: ToolbarProps) => {
         <a
           href="https://github.com/backstage/backstage/tree/master/packages/ui"
           target="_blank"
+          rel="noopener noreferrer"
           className={styles.bubble}
           data-hide-tablet
+          aria-label="View source on GitHub"
         >
           <RiGithubLine size={16} />
         </a>
+        <a
+          href="https://discord.gg/backstage-687207715902193673"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.bubble}
+          data-hide-tablet
+          aria-label="Join Backstage on Discord"
+        >
+          <RiDiscordLine size={16} />
+        </a>
         <ToggleButtonGroup
           defaultSelectedKeys={['light']}
           selectedKeys={selectedTheme}