diff --git a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
index 5cb8a8cfe..07f1c1db9 100644
--- a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
+++ b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
@@ -2,6 +2,7 @@ import { first } from "lodash";
 import React, { useState } from "react";
 import Button from "antd/lib/button";
 import Menu from "antd/lib/menu";
+import Link from "@/components/Link";
 import HelpTrigger from "@/components/HelpTrigger";
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
 import { Auth, currentUser } from "@/services/auth";
@@ -45,34 +46,36 @@ export default function DesktopNavbar() {
   return (
     <div className="desktop-navbar">
       <NavbarSection inlineCollapsed={collapsed} className="desktop-navbar-logo">
-        <a href="./">
-          <img src={logoUrl} alt="Redash" />
-        </a>
+        <div>
+          <Link href="./">
+            <img src={logoUrl} alt="Redash" />
+          </Link>
+        </div>
       </NavbarSection>
 
       <NavbarSection inlineCollapsed={collapsed}>
         {currentUser.hasPermission("list_dashboards") && (
           <Menu.Item key="dashboards">
-            <a href="dashboards">
+            <Link href="dashboards">
               <DesktopOutlinedIcon />
               <span>Dashboards</span>
-            </a>
+            </Link>
           </Menu.Item>
         )}
         {currentUser.hasPermission("view_query") && (
           <Menu.Item key="queries">
-            <a href="queries">
+            <Link href="queries">
               <CodeOutlinedIcon />
               <span>Queries</span>
-            </a>
+            </Link>
           </Menu.Item>
         )}
         {currentUser.hasPermission("list_alerts") && (
           <Menu.Item key="alerts">
-            <a href="alerts">
+            <Link href="alerts">
               <AlertOutlinedIcon />
               <span>Alerts</span>
-            </a>
+            </Link>
           </Menu.Item>
         )}
       </NavbarSection>
@@ -93,9 +96,9 @@ export default function DesktopNavbar() {
             }>
             {canCreateQuery && (
               <Menu.Item key="new-query">
-                <a href="queries/new" data-test="CreateQueryMenuItem">
+                <Link href="queries/new" data-test="CreateQueryMenuItem">
                   New Query
-                </a>
+                </Link>
               </Menu.Item>
             )}
             {canCreateDashboard && (
@@ -107,9 +110,9 @@ export default function DesktopNavbar() {
             )}
             {canCreateAlert && (
               <Menu.Item key="new-alert">
-                <a data-test="CreateAlertMenuItem" href="alerts/new">
+                <Link data-test="CreateAlertMenuItem" href="alerts/new">
                   New Alert
-                </a>
+                </Link>
               </Menu.Item>
             )}
           </Menu.SubMenu>
@@ -125,10 +128,10 @@ export default function DesktopNavbar() {
         </Menu.Item>
         {firstSettingsTab && (
           <Menu.Item key="settings">
-            <a href={firstSettingsTab.path} data-test="SettingsLink">
+            <Link href={firstSettingsTab.path} data-test="SettingsLink">
               <SettingOutlinedIcon />
               <span>Settings</span>
-            </a>
+            </Link>
           </Menu.Item>
         )}
         <Menu.Divider />
@@ -145,11 +148,11 @@ export default function DesktopNavbar() {
             </span>
           }>
           <Menu.Item key="profile">
-            <a href="users/me">Profile</a>
+            <Link href="users/me">Profile</Link>
           </Menu.Item>
           {currentUser.hasPermission("super_admin") && (
             <Menu.Item key="status">
-              <a href="admin/status">System Status</a>
+              <Link href="admin/status">System Status</Link>
             </Menu.Item>
           )}
           <Menu.Divider />
diff --git a/client/app/components/ApplicationArea/ApplicationLayout/MobileNavbar.jsx b/client/app/components/ApplicationArea/ApplicationLayout/MobileNavbar.jsx
index 20982b029..78eae2106 100644
--- a/client/app/components/ApplicationArea/ApplicationLayout/MobileNavbar.jsx
+++ b/client/app/components/ApplicationArea/ApplicationLayout/MobileNavbar.jsx
@@ -5,6 +5,7 @@ import Button from "antd/lib/button";
 import MenuOutlinedIcon from "@ant-design/icons/MenuOutlined";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
+import Link from "@/components/Link";
 import { Auth, currentUser } from "@/services/auth";
 import settingsMenu from "@/services/settingsMenu";
 import logoUrl from "@/assets/images/redash_icon_small.png";
@@ -17,9 +18,9 @@ export default function MobileNavbar({ getPopupContainer }) {
   return (
     <div className="mobile-navbar">
       <div className="mobile-navbar-logo">
-        <a href="./">
+        <Link href="./">
           <img src={logoUrl} alt="Redash" />
-        </a>
+        </Link>
       </div>
       <div>
         <Dropdown
@@ -30,39 +31,39 @@ export default function MobileNavbar({ getPopupContainer }) {
             <Menu mode="vertical" theme="dark" selectable={false} className="mobile-navbar-menu">
               {currentUser.hasPermission("list_dashboards") && (
                 <Menu.Item key="dashboards">
-                  <a href="dashboards">Dashboards</a>
+                  <Link href="dashboards">Dashboards</Link>
                 </Menu.Item>
               )}
               {currentUser.hasPermission("view_query") && (
                 <Menu.Item key="queries">
-                  <a href="queries">Queries</a>
+                  <Link href="queries">Queries</Link>
                 </Menu.Item>
               )}
               {currentUser.hasPermission("list_alerts") && (
                 <Menu.Item key="alerts">
-                  <a href="alerts">Alerts</a>
+                  <Link href="alerts">Alerts</Link>
                 </Menu.Item>
               )}
               <Menu.Item key="profile">
-                <a href="users/me">Edit Profile</a>
+                <Link href="users/me">Edit Profile</Link>
               </Menu.Item>
               <Menu.Divider />
               {firstSettingsTab && (
                 <Menu.Item key="settings">
-                  <a href={firstSettingsTab.path}>Settings</a>
+                  <Link href={firstSettingsTab.path}>Settings</Link>
                 </Menu.Item>
               )}
               {currentUser.hasPermission("super_admin") && (
                 <Menu.Item key="status">
-                  <a href="admin/status">System Status</a>
+                  <Link href="admin/status">System Status</Link>
                 </Menu.Item>
               )}
               {currentUser.hasPermission("super_admin") && <Menu.Divider />}
               <Menu.Item key="help">
                 {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                <a href="https://redash.io/help" target="_blank" rel="noopener">
+                <Link href="https://redash.io/help" target="_blank" rel="noopener">
                   Help
-                </a>
+                </Link>
               </Menu.Item>
               <Menu.Item key="logout" onClick={() => Auth.logout()}>
                 Log out
diff --git a/client/app/components/ApplicationArea/ApplicationLayout/VersionInfo.jsx b/client/app/components/ApplicationArea/ApplicationLayout/VersionInfo.jsx
index 832780f3b..e5c4aa68e 100644
--- a/client/app/components/ApplicationArea/ApplicationLayout/VersionInfo.jsx
+++ b/client/app/components/ApplicationArea/ApplicationLayout/VersionInfo.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "@/components/Link";
 import { clientConfig, currentUser } from "@/services/auth";
 import frontendVersion from "@/version.json";
 
@@ -12,10 +13,10 @@ export default function VersionInfo() {
       {clientConfig.newVersionAvailable && currentUser.hasPermission("super_admin") && (
         <div className="m-t-10">
           {/* eslint-disable react/jsx-no-target-blank */}
-          <a href="https://version.redash.io/" className="update-available" target="_blank" rel="noopener">
+          <Link href="https://version.redash.io/" className="update-available" target="_blank" rel="noopener">
             Update Available
             <i className="fa fa-external-link m-l-5" />
-          </a>
+          </Link>
         </div>
       )}
     </React.Fragment>
diff --git a/client/app/components/BeaconConsent.jsx b/client/app/components/BeaconConsent.jsx
index 4db162f32..3ee9b2475 100644
--- a/client/app/components/BeaconConsent.jsx
+++ b/client/app/components/BeaconConsent.jsx
@@ -3,6 +3,7 @@ import Card from "antd/lib/card";
 import Button from "antd/lib/button";
 import Typography from "antd/lib/typography";
 import { clientConfig } from "@/services/auth";
+import Link from "@/components/Link";
 import HelpTrigger from "@/components/HelpTrigger";
 import DynamicComponent from "@/components/DynamicComponent";
 import OrgSettings from "@/services/organizationSettings";
@@ -65,8 +66,8 @@ function BeaconConsent() {
           </div>
           <div className="m-t-15">
             <Text type="secondary">
-              You can change this setting anytime from the <a href="settings/organization">Organization Settings</a>{" "}
-              page.
+              You can change this setting anytime from the{" "}
+              <Link href="settings/organization">Organization Settings</Link> page.
             </Text>
           </div>
         </Card>
diff --git a/client/app/components/CreateSourceDialog.jsx b/client/app/components/CreateSourceDialog.jsx
index e58f90d0e..2d5ba0646 100644
--- a/client/app/components/CreateSourceDialog.jsx
+++ b/client/app/components/CreateSourceDialog.jsx
@@ -7,6 +7,7 @@ import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import Steps from "antd/lib/steps";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
+import Link from "@/components/Link";
 import { PreviewCard } from "@/components/PreviewCard";
 import EmptyState from "@/components/items-list/components/EmptyState";
 import DynamicForm from "@/components/dynamic-form/DynamicForm";
@@ -118,9 +119,9 @@ class CreateSourceDialog extends React.Component {
         {selectedType.type === "databricks" && (
           <small>
             By using the Databricks Data Source you agree to the Databricks JDBC/ODBC{" "}
-            <a href="https://databricks.com/spark/odbc-driver-download" target="_blank" rel="noopener noreferrer">
+            <Link href="https://databricks.com/spark/odbc-driver-download" target="_blank" rel="noopener noreferrer">
               Driver Download Terms and Conditions
-            </a>
+            </Link>
             .
           </small>
         )}
diff --git a/client/app/components/EditVisualizationButton/QueryResultsLink.jsx b/client/app/components/EditVisualizationButton/QueryResultsLink.jsx
index f3ac4bffe..74b6e09a7 100644
--- a/client/app/components/EditVisualizationButton/QueryResultsLink.jsx
+++ b/client/app/components/EditVisualizationButton/QueryResultsLink.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import Link from "@/components/Link";
 
 export default function QueryResultsLink(props) {
   let href = "";
@@ -17,9 +18,9 @@ export default function QueryResultsLink(props) {
   }
 
   return (
-    <a target="_blank" rel="noopener noreferrer" disabled={props.disabled} href={href} download>
+    <Link target="_blank" rel="noopener noreferrer" disabled={props.disabled} href={href} download>
       {props.children}
-    </a>
+    </Link>
   );
 }
 
diff --git a/client/app/components/HelpTrigger.jsx b/client/app/components/HelpTrigger.jsx
index 64fe747b6..e9528e3d8 100644
--- a/client/app/components/HelpTrigger.jsx
+++ b/client/app/components/HelpTrigger.jsx
@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import cx from "classnames";
 import Tooltip from "antd/lib/tooltip";
 import Drawer from "antd/lib/drawer";
+import Link from "@/components/Link";
 import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
 import BigMessage from "@/components/BigMessage";
 import DynamicComponent from "@/components/DynamicComponent";
@@ -149,9 +150,9 @@ export default class HelpTrigger extends React.Component {
               {this.props.children}
             </a>
           ) : (
-            <a href={url || this.getUrl()} className={className} rel="noopener noreferrer" target="_blank">
+            <Link href={url || this.getUrl()} className={className} rel="noopener noreferrer" target="_blank">
               {this.props.children}
-            </a>
+            </Link>
           )}
         </Tooltip>
         <Drawer
@@ -167,9 +168,9 @@ export default class HelpTrigger extends React.Component {
               {url && (
                 <Tooltip title="Open page in a new window" placement="left">
                   {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                  <a href={url} target="_blank">
+                  <Link href={url} target="_blank">
                     <i className="fa fa-external-link" />
-                  </a>
+                  </Link>
                 </Tooltip>
               )}
               <Tooltip title="Close" placement="bottom">
@@ -201,9 +202,9 @@ export default class HelpTrigger extends React.Component {
                 Something went wrong.
                 <br />
                 {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                <a href={this.state.error} target="_blank" rel="noopener">
+                <Link href={this.state.error} target="_blank" rel="noopener">
                   Click here
-                </a>{" "}
+                </Link>{" "}
                 to open the page in a new window.
               </BigMessage>
             )}
diff --git a/client/app/components/Link.jsx b/client/app/components/Link.jsx
new file mode 100644
index 000000000..2cd700976
--- /dev/null
+++ b/client/app/components/Link.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import Button from "antd/lib/button";
+
+function DefaultLinkComponent(props) {
+  return <a {...props} />; // eslint-disable-line jsx-a11y/anchor-has-content
+}
+
+function Link(props) {
+  return <Link.Component {...props} />;
+}
+
+Link.Component = DefaultLinkComponent;
+
+function DefaultButtonLinkComponent(props) {
+  return <Button {...props} />;
+}
+
+function ButtonLink(props) {
+  return <ButtonLink.Component {...props} />;
+}
+
+ButtonLink.Component = DefaultButtonLinkComponent;
+
+Link.Button = ButtonLink;
+
+export default Link;
diff --git a/client/app/components/PreviewCard.jsx b/client/app/components/PreviewCard.jsx
index 87b647310..ea652e96d 100644
--- a/client/app/components/PreviewCard.jsx
+++ b/client/app/components/PreviewCard.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
+import Link from "@/components/Link";
 
 // PreviewCard
 
@@ -42,7 +43,7 @@ PreviewCard.defaultProps = {
 // UserPreviewCard
 
 export function UserPreviewCard({ user, withLink, children, ...props }) {
-  const title = withLink ? <a href={"users/" + user.id}>{user.name}</a> : user.name;
+  const title = withLink ? <Link href={"users/" + user.id}>{user.name}</Link> : user.name;
   return (
     <PreviewCard {...props} imageUrl={user.profile_image_url} title={title} body={user.email}>
       {children}
@@ -69,7 +70,7 @@ UserPreviewCard.defaultProps = {
 
 export function DataSourcePreviewCard({ dataSource, withLink, children, ...props }) {
   const imageUrl = `static/images/db-logos/${dataSource.type}.png`;
-  const title = withLink ? <a href={"data_sources/" + dataSource.id}>{dataSource.name}</a> : dataSource.name;
+  const title = withLink ? <Link href={"data_sources/" + dataSource.id}>{dataSource.name}</Link> : dataSource.name;
   return (
     <PreviewCard {...props} imageUrl={imageUrl} title={title}>
       {children}
diff --git a/client/app/components/QueryLink.jsx b/client/app/components/QueryLink.jsx
index 1a5a934ca..28ec478de 100644
--- a/client/app/components/QueryLink.jsx
+++ b/client/app/components/QueryLink.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { VisualizationType } from "@redash/viz/lib";
+import Link from "@/components/Link";
 import VisualizationName from "@/components/visualizations/VisualizationName";
 
 import "./QueryLink.less";
@@ -21,9 +22,9 @@ function QueryLink({ query, visualization, readOnly }) {
   };
 
   return (
-    <a href={readOnly ? null : getUrl()} className="query-link">
+    <Link href={readOnly ? null : getUrl()} className="query-link">
       <VisualizationName visualization={visualization} /> <span>{query.name}</span>
-    </a>
+    </Link>
   );
 }
 
diff --git a/client/app/components/SettingsWrapper.jsx b/client/app/components/SettingsWrapper.jsx
index 1ad78cc40..f62142408 100644
--- a/client/app/components/SettingsWrapper.jsx
+++ b/client/app/components/SettingsWrapper.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Menu from "antd/lib/menu";
 import PageHeader from "@/components/PageHeader";
+import Link from "@/components/Link";
 import location from "@/services/location";
 import settingsMenu from "@/services/settingsMenu";
 
@@ -17,9 +18,9 @@ function wrapSettingsTab(id, options, WrappedComponent) {
             <Menu selectedKeys={[activeItem && activeItem.title]} selectable={false} mode="horizontal">
               {settingsMenu.getAvailableItems().map(item => (
                 <Menu.Item key={item.title}>
-                  <a href={item.path} data-test="SettingsScreenItem">
+                  <Link href={item.path} data-test="SettingsScreenItem">
                     {item.title}
-                  </a>
+                  </Link>
                 </Menu.Item>
               ))}
             </Menu>
diff --git a/client/app/components/admin/Layout.jsx b/client/app/components/admin/Layout.jsx
index faa675ccd..854bdd2f7 100644
--- a/client/app/components/admin/Layout.jsx
+++ b/client/app/components/admin/Layout.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Menu from "antd/lib/menu";
 import PageHeader from "@/components/PageHeader";
+import Link from "@/components/Link";
 
 import "./layout.less";
 
@@ -13,13 +14,13 @@ export default function Layout({ activeTab, children }) {
         <div className="bg-white tiled">
           <Menu selectedKeys={[activeTab]} selectable={false} mode="horizontal">
             <Menu.Item key="system_status">
-              <a href="admin/status">System Status</a>
+              <Link href="admin/status">System Status</Link>
             </Menu.Item>
             <Menu.Item key="jobs">
-              <a href="admin/queries/jobs">RQ Status</a>
+              <Link href="admin/queries/jobs">RQ Status</Link>
             </Menu.Item>
             <Menu.Item key="outdated_queries">
-              <a href="admin/queries/outdated">Outdated Queries</a>
+              <Link href="admin/queries/outdated">Outdated Queries</Link>
             </Menu.Item>
           </Menu>
           {children}
diff --git a/client/app/components/cards-list/CardsList.jsx b/client/app/components/cards-list/CardsList.jsx
index a59c3890e..39a9747fa 100644
--- a/client/app/components/cards-list/CardsList.jsx
+++ b/client/app/components/cards-list/CardsList.jsx
@@ -2,6 +2,7 @@ import Input from "antd/lib/input";
 import { includes, isEmpty } from "lodash";
 import PropTypes from "prop-types";
 import React from "react";
+import Link from "@/components/Link";
 import EmptyState from "@/components/items-list/components/EmptyState";
 
 import "./CardsList.less";
@@ -44,10 +45,10 @@ export default class CardsList extends React.Component {
   // eslint-disable-next-line class-methods-use-this
   renderListItem(item) {
     return (
-      <a key={`card${item.id}`} className="visual-card" onClick={item.onClick} href={item.href}>
+      <Link key={`card${item.id}`} className="visual-card" onClick={item.onClick} href={item.href}>
         <img alt={item.title} src={item.imgSrc} />
         <h3>{item.title}</h3>
-      </a>
+      </Link>
     );
   }
 
diff --git a/client/app/components/dashboards/TextboxDialog.jsx b/client/app/components/dashboards/TextboxDialog.jsx
index e908dbc8d..02e0ff3b2 100644
--- a/client/app/components/dashboards/TextboxDialog.jsx
+++ b/client/app/components/dashboards/TextboxDialog.jsx
@@ -7,6 +7,7 @@ import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import Tooltip from "antd/lib/tooltip";
 import Divider from "antd/lib/divider";
+import Link from "@/components/Link";
 import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import notification from "@/services/notification";
@@ -78,9 +79,12 @@ function TextboxDialog({ dialog, isNew, ...props }) {
         />
         <small>
           Supports basic{" "}
-          <a target="_blank" rel="noopener noreferrer" href="https://www.markdownguide.org/cheat-sheet/#basic-syntax">
+          <Link
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://www.markdownguide.org/cheat-sheet/#basic-syntax">
             <Tooltip title="Markdown guide opens in new window">Markdown</Tooltip>
-          </a>
+          </Link>
           .
         </small>
         {text && (
diff --git a/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx b/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
index 7ec9736c1..2dc307054 100644
--- a/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
+++ b/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
@@ -8,6 +8,7 @@ import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import { currentUser } from "@/services/auth";
 import recordEvent from "@/services/recordEvent";
 import { formatDateTime } from "@/lib/utils";
+import Link from "@/components/Link";
 import Parameters from "@/components/Parameters";
 import TimeAgo from "@/components/TimeAgo";
 import Timer from "@/components/Timer";
@@ -30,27 +31,27 @@ function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParameters
   return compact([
     <Menu.Item key="download_csv" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
-        <a href={downloadLink("csv")} download={downloadName("csv")} target="_self">
+        <Link href={downloadLink("csv")} download={downloadName("csv")} target="_self">
           Download as CSV File
-        </a>
+        </Link>
       ) : (
         "Download as CSV File"
       )}
     </Menu.Item>,
     <Menu.Item key="download_tsv" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
-        <a href={downloadLink("tsv")} download={downloadName("tsv")} target="_self">
+        <Link href={downloadLink("tsv")} download={downloadName("tsv")} target="_self">
           Download as TSV File
-        </a>
+        </Link>
       ) : (
         "Download as TSV File"
       )}
     </Menu.Item>,
     <Menu.Item key="download_excel" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
-        <a href={downloadLink("xlsx")} download={downloadName("xlsx")} target="_self">
+        <Link href={downloadLink("xlsx")} download={downloadName("xlsx")} target="_self">
           Download as Excel File
-        </a>
+        </Link>
       ) : (
         "Download as Excel File"
       )}
@@ -58,7 +59,7 @@ function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParameters
     (canViewQuery || canEditParameters) && <Menu.Divider key="divider" />,
     canViewQuery && (
       <Menu.Item key="view_query">
-        <a href={widget.getQuery().getUrl(true, widget.visualization.id)}>View Query</a>
+        <Link href={widget.getQuery().getUrl(true, widget.visualization.id)}>View Query</Link>
       </Menu.Item>
     ),
     canEditParameters && (
diff --git a/client/app/components/empty-state/EmptyState.jsx b/client/app/components/empty-state/EmptyState.jsx
index 9c4493508..d971e249c 100644
--- a/client/app/components/empty-state/EmptyState.jsx
+++ b/client/app/components/empty-state/EmptyState.jsx
@@ -2,6 +2,7 @@ import { keys, some } from "lodash";
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
+import Link from "@/components/Link";
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
 import { currentUser } from "@/services/auth";
 import organizationStatus from "@/services/organizationStatus";
@@ -14,9 +15,9 @@ export function Step({ show, completed, text, url, urlText, onClick }) {
 
   return (
     <li className={classNames({ done: completed })}>
-      <a href={url} onClick={onClick}>
+      <Link href={url} onClick={onClick}>
         {urlText}
-      </a>{" "}
+      </Link>{" "}
       {text}
     </li>
   );
@@ -179,10 +180,10 @@ function EmptyState({
         <ol>{stepsItems.map(item => item.node)}</ol>
         <p>
           Need more support?{" "}
-          <a href={helpLink} target="_blank" rel="noopener noreferrer">
+          <Link href={helpLink} target="_blank" rel="noopener noreferrer">
             See our Help
             <i className="fa fa-external-link m-l-5" aria-hidden="true" />
-          </a>
+          </Link>
         </p>
       </div>
     </div>
diff --git a/client/app/components/items-list/components/Sidebar.jsx b/client/app/components/items-list/components/Sidebar.jsx
index af3755a46..9807e4f95 100644
--- a/client/app/components/items-list/components/Sidebar.jsx
+++ b/client/app/components/items-list/components/Sidebar.jsx
@@ -3,6 +3,7 @@ import React, { useState, useCallback, useEffect } from "react";
 import PropTypes from "prop-types";
 import Input from "antd/lib/input";
 import AntdMenu from "antd/lib/menu";
+import Link from "@/components/Link";
 import TagsList from "@/components/TagsList";
 
 /*
@@ -59,7 +60,7 @@ export function Menu({ items, selected }) {
       <AntdMenu className="invert-stripe-position" mode="inline" selectable={false} selectedKeys={[selected]}>
         {map(items, item => (
           <AntdMenu.Item key={item.key} className="m-0">
-            <a href={item.href}>
+            <Link href={item.href}>
               {isString(item.icon) && item.icon !== "" && (
                 <span className="btn-favourite m-r-5">
                   <i className={item.icon} aria-hidden="true" />
@@ -67,7 +68,7 @@ export function Menu({ items, selected }) {
               )}
               {isFunction(item.icon) && (item.icon(item) || null)}
               {item.title}
-            </a>
+            </Link>
           </AntdMenu.Item>
         ))}
       </AntdMenu>
diff --git a/client/app/components/queries/AddToDashboardDialog.jsx b/client/app/components/queries/AddToDashboardDialog.jsx
index b6b731276..2c1cc07f5 100644
--- a/client/app/components/queries/AddToDashboardDialog.jsx
+++ b/client/app/components/queries/AddToDashboardDialog.jsx
@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import List from "antd/lib/list";
+import Link from "@/components/Link";
 import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
@@ -51,9 +52,9 @@ function AddToDashboardDialog({ dialog, visualization }) {
         notification.success(
           "Widget added to dashboard",
           <React.Fragment>
-            <a href={`${dashboard.url}`} onClick={() => notification.close(key)}>
+            <Link href={`${dashboard.url}`} onClick={() => notification.close(key)}>
               {dashboard.name}
-            </a>
+            </Link>
             <QueryTagsControl isDraft={dashboard.is_draft} tags={dashboard.tags} />
           </React.Fragment>,
           { key }
diff --git a/client/app/components/visualizations/visualizationComponents.jsx b/client/app/components/visualizations/visualizationComponents.jsx
index 848b1cab1..cdaf2d516 100644
--- a/client/app/components/visualizations/visualizationComponents.jsx
+++ b/client/app/components/visualizations/visualizationComponents.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { pick } from "lodash";
 import HelpTrigger from "@/components/HelpTrigger";
+import Link from "@/components/Link";
 import { Renderer as VisRenderer, Editor as VisEditor, updateVisualizationsSettings } from "@redash/viz/lib";
 import { clientConfig } from "@/services/auth";
 
@@ -11,6 +12,7 @@ function wrapComponentWithSettings(WrappedComponent) {
   return function VisualizationComponent(props) {
     updateVisualizationsSettings({
       HelpTriggerComponent: HelpTrigger,
+      LinkComponent: Link,
       choroplethAvailableMaps: {
         countries: {
           name: "Countries",
diff --git a/client/app/pages/admin/OutdatedQueries.jsx b/client/app/pages/admin/OutdatedQueries.jsx
index 6764ea419..e97e76284 100644
--- a/client/app/pages/admin/OutdatedQueries.jsx
+++ b/client/app/pages/admin/OutdatedQueries.jsx
@@ -3,6 +3,7 @@ import React from "react";
 
 import Switch from "antd/lib/switch";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
+import Link from "@/components/Link";
 import Paginator from "@/components/Paginator";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
 import SchedulePhrase from "@/components/queries/SchedulePhrase";
@@ -37,9 +38,9 @@ class OutdatedQueries extends React.Component {
     Columns.custom.sortable(
       (text, item) => (
         <React.Fragment>
-          <a className="table-main-title" href={"queries/" + item.id}>
+          <Link className="table-main-title" href={"queries/" + item.id}>
             {item.name}
-          </a>
+          </Link>
           <QueryTagsControl
             className="d-block"
             tags={item.tags}
diff --git a/client/app/pages/alert/AlertView.jsx b/client/app/pages/alert/AlertView.jsx
index 57d470e7f..b63682977 100644
--- a/client/app/pages/alert/AlertView.jsx
+++ b/client/app/pages/alert/AlertView.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 
+import Link from "@/components/Link";
 import TimeAgo from "@/components/TimeAgo";
 import { Alert as AlertType } from "@/components/proptypes";
 
@@ -136,9 +137,9 @@ export default class AlertView extends React.Component {
               <h4>
                 Destinations{" "}
                 <Tooltip title="Open Alert Destinations page in a new tab.">
-                  <a href="destinations" target="_blank">
+                  <Link href="destinations" target="_blank">
                     <i className="fa fa-external-link f-13" />
-                  </a>
+                  </Link>
                 </Tooltip>
               </h4>
               <AlertDestinations alertId={alert.id} />
diff --git a/client/app/pages/alert/components/AlertDestinations.jsx b/client/app/pages/alert/components/AlertDestinations.jsx
index c0da87a34..3034f4ce0 100644
--- a/client/app/pages/alert/components/AlertDestinations.jsx
+++ b/client/app/pages/alert/components/AlertDestinations.jsx
@@ -2,6 +2,7 @@ import { without, find, includes, map, toLower } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 
+import Link from "@/components/Link";
 import SelectItemsDialog from "@/components/SelectItemsDialog";
 import { Destination as DestinationType, UserProfile as UserType } from "@/components/proptypes";
 
@@ -89,9 +90,9 @@ export default class AlertDestinations extends React.Component {
         <>
           <i className="fa fa-info-circle" /> Create new destinations in{" "}
           <Tooltip title="Opens page in a new tab.">
-            <a href="destinations/new" target="_blank">
+            <Link href="destinations/new" target="_blank">
               Alert Destinations
-            </a>
+            </Link>
           </Tooltip>
         </>
       ),
diff --git a/client/app/pages/alert/components/Query.jsx b/client/app/pages/alert/components/Query.jsx
index d1a6d896b..5793407c9 100644
--- a/client/app/pages/alert/components/Query.jsx
+++ b/client/app/pages/alert/components/Query.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import Link from "@/components/Link";
 import QuerySelector from "@/components/QuerySelector";
 import SchedulePhrase from "@/components/queries/SchedulePhrase";
 import { Query as QueryType } from "@/components/proptypes";
@@ -39,10 +40,10 @@ export default function QueryFormItem({ query, queryResult, onChange, editMode }
         <QuerySelector onChange={onChange} selectedQuery={query} className="alert-query-selector" type="select" />
       ) : (
         <Tooltip title="Open query in a new tab.">
-          <a href={`queries/${query.id}`} target="_blank" rel="noopener noreferrer" className="alert-query-link">
+          <Link href={`queries/${query.id}`} target="_blank" rel="noopener noreferrer" className="alert-query-link">
             {query.name}
             <i className="fa fa-external-link" />
-          </a>
+          </Link>
         </Tooltip>
       )}
       <div className="ant-form-item-explain">{query && queryHint}</div>
diff --git a/client/app/pages/alerts/AlertsList.jsx b/client/app/pages/alerts/AlertsList.jsx
index b236362d9..08c8f2954 100644
--- a/client/app/pages/alerts/AlertsList.jsx
+++ b/client/app/pages/alerts/AlertsList.jsx
@@ -1,7 +1,7 @@
 import { toUpper } from "lodash";
 import React from "react";
-import Button from "antd/lib/button";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
+import Link from "@/components/Link";
 import PageHeader from "@/components/PageHeader";
 import Paginator from "@/components/Paginator";
 import EmptyState from "@/components/empty-state/EmptyState";
@@ -38,9 +38,9 @@ class AlertsList extends React.Component {
     Columns.custom.sortable(
       (text, alert) => (
         <div>
-          <a className="table-main-title" href={"alerts/" + alert.id}>
+          <Link className="table-main-title" href={"alerts/" + alert.id}>
             {alert.name}
-          </a>
+          </Link>
         </div>
       ),
       {
@@ -76,10 +76,10 @@ class AlertsList extends React.Component {
             title={controller.params.pageTitle}
             actions={
               currentUser.hasPermission("list_alerts") ? (
-                <Button block type="primary" href="alerts/new">
+                <Link.Button block type="primary" href="alerts/new">
                   <i className="fa fa-plus m-r-5" />
                   New Alert
-                </Button>
+                </Link.Button>
               ) : null
             }
           />
diff --git a/client/app/pages/dashboards/DashboardList.jsx b/client/app/pages/dashboards/DashboardList.jsx
index dc4ec7814..c2c9d29e1 100644
--- a/client/app/pages/dashboards/DashboardList.jsx
+++ b/client/app/pages/dashboards/DashboardList.jsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import Button from "antd/lib/button";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
+import Link from "@/components/Link";
 import PageHeader from "@/components/PageHeader";
 import Paginator from "@/components/Paginator";
 import { DashboardTagsControl } from "@/components/tags-control/TagsControl";
@@ -45,9 +46,9 @@ class DashboardList extends React.Component {
     Columns.custom.sortable(
       (text, item) => (
         <React.Fragment>
-          <a className="table-main-title" href={item.url} data-test={`DashboardId${item.id}`}>
+          <Link className="table-main-title" href={item.url} data-test={`DashboardId${item.id}`}>
             {item.name}
-          </a>
+          </Link>
           <DashboardTagsControl
             className="d-block"
             tags={item.tags}
diff --git a/client/app/pages/dashboards/PublicDashboardPage.jsx b/client/app/pages/dashboards/PublicDashboardPage.jsx
index 604143850..7edbd0c30 100644
--- a/client/app/pages/dashboards/PublicDashboardPage.jsx
+++ b/client/app/pages/dashboards/PublicDashboardPage.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import routeWithApiKeySession from "@/components/ApplicationArea/routeWithApiKeySession";
+import Link from "@/components/Link";
 import BigMessage from "@/components/BigMessage";
 import PageHeader from "@/components/PageHeader";
 import Parameters from "@/components/Parameters";
@@ -89,11 +90,11 @@ class PublicDashboardPage extends React.Component {
         )}
         <div id="footer">
           <div className="text-center">
-            <a href="https://redash.io">
+            <Link href="https://redash.io">
               <img alt="Redash Logo" src={logoUrl} width="38" />
-            </a>
+            </Link>
           </div>
-          Powered by <a href="https://redash.io/?ref=public-dashboard">Redash</a>
+          Powered by <Link href="https://redash.io/?ref=public-dashboard">Redash</Link>
         </div>
       </div>
     );
diff --git a/client/app/pages/groups/GroupsList.jsx b/client/app/pages/groups/GroupsList.jsx
index 571315936..0710e671e 100644
--- a/client/app/pages/groups/GroupsList.jsx
+++ b/client/app/pages/groups/GroupsList.jsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import Button from "antd/lib/button";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
+import Link from "@/components/Link";
 import navigateTo from "@/components/ApplicationArea/navigateTo";
 import Paginator from "@/components/Paginator";
 
@@ -30,7 +31,7 @@ class GroupsList extends React.Component {
     Columns.custom(
       (text, group) => (
         <div>
-          <a href={"groups/" + group.id}>{group.name}</a>
+          <Link href={"groups/" + group.id}>{group.name}</Link>
           {group.type === "builtin" && <span className="label label-default m-l-10">built-in</span>}
         </div>
       ),
@@ -42,8 +43,8 @@ class GroupsList extends React.Component {
     Columns.custom(
       (text, group) => (
         <Button.Group>
-          <Button href={`groups/${group.id}`}>Members</Button>
-          {currentUser.isAdmin && <Button href={`groups/${group.id}/data_sources`}>Data Sources</Button>}
+          <Link.Button href={`groups/${group.id}`}>Members</Link.Button>
+          {currentUser.isAdmin && <Link.Button href={`groups/${group.id}/data_sources`}>Data Sources</Link.Button>}
         </Button.Group>
       ),
       {
diff --git a/client/app/pages/home/Home.jsx b/client/app/pages/home/Home.jsx
index d0a8f700e..8bba0dcb8 100644
--- a/client/app/pages/home/Home.jsx
+++ b/client/app/pages/home/Home.jsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
 import Alert from "antd/lib/alert";
+import Link from "@/components/Link";
 import LoadingOutlinedIcon from "@ant-design/icons/LoadingOutlined";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
 import EmptyState from "@/components/empty-state/EmptyState";
@@ -28,12 +29,12 @@ function DeprecatedEmbedFeatureAlert() {
         <>
           You have enabled <code>ALLOW_PARAMETERS_IN_EMBEDS</code>. This setting is now deprecated and should be turned
           off. Parameters in embeds are supported by default.{" "}
-          <a
+          <Link
             href="https://discuss.redash.io/t/support-for-parameters-in-embedded-visualizations/3337"
             target="_blank"
             rel="noopener noreferrer">
             Read more
-          </a>
+          </Link>
           .
         </>
       }
@@ -87,13 +88,13 @@ function FavoriteList({ title, resource, itemUrl, emptyState }) {
       {!isEmpty(items) && (
         <div className="list-group">
           {items.map(item => (
-            <a key={itemUrl(item)} className="list-group-item" href={itemUrl(item)}>
+            <Link key={itemUrl(item)} className="list-group-item" href={itemUrl(item)}>
               <span className="btn-favourite m-r-5">
                 <i className="fa fa-star" aria-hidden="true" />
               </span>
               {item.name}
               {item.is_draft && <span className="label label-default m-l-5">Unpublished</span>}
-            </a>
+            </Link>
           ))}
         </div>
       )}
@@ -125,7 +126,7 @@ function DashboardAndQueryFavoritesList() {
                   <span className="btn-favourite m-r-5">
                     <i className="fa fa-star" aria-hidden="true" />
                   </span>
-                  Favorite <a href="dashboards">Dashboards</a> will appear here
+                  Favorite <Link href="dashboards">Dashboards</Link> will appear here
                 </p>
               }
             />
@@ -140,7 +141,7 @@ function DashboardAndQueryFavoritesList() {
                   <span className="btn-favourite m-r-5">
                     <i className="fa fa-star" aria-hidden="true" />
                   </span>
-                  Favorite <a href="queries">Queries</a> will appear here
+                  Favorite <Link href="queries">Queries</Link> will appear here
                 </p>
               }
             />
diff --git a/client/app/pages/queries-list/QueriesList.jsx b/client/app/pages/queries-list/QueriesList.jsx
index e23094b11..5bebb6646 100644
--- a/client/app/pages/queries-list/QueriesList.jsx
+++ b/client/app/pages/queries-list/QueriesList.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import Button from "antd/lib/button";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
+import Link from "@/components/Link";
 import PageHeader from "@/components/PageHeader";
 import Paginator from "@/components/Paginator";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
@@ -62,9 +62,9 @@ class QueriesList extends React.Component {
     Columns.custom.sortable(
       (text, item) => (
         <React.Fragment>
-          <a className="table-main-title" href={"queries/" + item.id}>
+          <Link className="table-main-title" href={"queries/" + item.id}>
             {item.name}
-          </a>
+          </Link>
           <QueryTagsControl
             className="d-block"
             tags={item.tags}
@@ -119,10 +119,10 @@ class QueriesList extends React.Component {
             title={controller.params.pageTitle}
             actions={
               currentUser.hasPermission("create_query") ? (
-                <Button block type="primary" href="queries/new">
+                <Link.Button block type="primary" href="queries/new">
                   <i className="fa fa-plus m-r-5" />
                   New Query
-                </Button>
+                </Link.Button>
               ) : null
             }
           />
diff --git a/client/app/pages/queries-list/QueriesListEmptyState.jsx b/client/app/pages/queries-list/QueriesListEmptyState.jsx
index fecadba53..5e9fb53f8 100644
--- a/client/app/pages/queries-list/QueriesListEmptyState.jsx
+++ b/client/app/pages/queries-list/QueriesListEmptyState.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import Link from "@/components/Link";
 import BigMessage from "@/components/BigMessage";
 import NoTaggedObjectsFound from "@/components/NoTaggedObjectsFound";
 import EmptyState from "@/components/empty-state/EmptyState";
@@ -19,11 +20,11 @@ export default function QueriesListEmptyState({ page, searchTerm, selectedTags }
     case "my":
       return (
         <div className="tiled bg-white p-15">
-          <a href="queries/new" className="btn btn-primary btn-sm">
+          <Link.Button href="queries/new" type="primary" size="small">
             Create your first query
-          </a>{" "}
+          </Link.Button>{" "}
           to populate My Queries list. Need help? Check out our{" "}
-          <a href="https://redash.io/help/user-guide/querying/writing-queries">query writing documentation</a>.
+          <Link href="https://redash.io/help/user-guide/querying/writing-queries">query writing documentation</Link>.
         </div>
       );
     default:
diff --git a/client/app/pages/queries/VisualizationEmbed.jsx b/client/app/pages/queries/VisualizationEmbed.jsx
index 05cb2b576..f054538a2 100644
--- a/client/app/pages/queries/VisualizationEmbed.jsx
+++ b/client/app/pages/queries/VisualizationEmbed.jsx
@@ -8,6 +8,7 @@ import Button from "antd/lib/button";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
 import Tooltip from "antd/lib/tooltip";
+import Link from "@/components/Link";
 import routeWithApiKeySession from "@/components/ApplicationArea/routeWithApiKeySession";
 import Parameters from "@/components/Parameters";
 import { Moment } from "@/components/proptypes";
@@ -118,9 +119,9 @@ function VisualizationEmbedFooter({
       {queryUrl && (
         <span className="hidden-print">
           <Tooltip title="Open in Redash">
-            <Button className="icon-button" href={queryUrl} target="_blank">
+            <Link.Button className="icon-button" href={queryUrl} target="_blank">
               <i className="fa fa-external-link" />
-            </Button>
+            </Link.Button>
           </Tooltip>
           {!query.hasParameters() && (
             <Dropdown overlay={downloadMenu} disabled={!queryResults} trigger={["click"]} placement="topLeft">
diff --git a/client/app/pages/queries/components/QueryPageHeader.jsx b/client/app/pages/queries/components/QueryPageHeader.jsx
index ceec749f0..b925e94e1 100644
--- a/client/app/pages/queries/components/QueryPageHeader.jsx
+++ b/client/app/pages/queries/components/QueryPageHeader.jsx
@@ -6,6 +6,7 @@ import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
 import EllipsisOutlinedIcon from "@ant-design/icons/EllipsisOutlined";
 import useMedia from "use-media";
+import Link from "@/components/Link";
 import EditInPlace from "@/components/EditInPlace";
 import FavoritesControl from "@/components/FavoritesControl";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
@@ -179,19 +180,19 @@ export default function QueryPageHeader({
         {!queryFlags.isNew && queryFlags.canViewSource && (
           <span>
             {!sourceMode && (
-              <Button className="m-r-5" href={query.getUrl(true, selectedVisualization)}>
+              <Link.Button className="m-r-5" href={query.getUrl(true, selectedVisualization)}>
                 <i className="fa fa-pencil-square-o" aria-hidden="true" />
                 <span className="m-l-5">Edit Source</span>
-              </Button>
+              </Link.Button>
             )}
             {sourceMode && (
-              <Button
+              <Link.Button
                 className="m-r-5"
                 href={query.getUrl(false, selectedVisualization)}
                 data-test="QueryPageShowDataOnly">
                 <i className="fa fa-table" aria-hidden="true" />
                 <span className="m-l-5">Show Data Only</span>
-              </Button>
+              </Link.Button>
             )}
           </span>
         )}
diff --git a/client/app/pages/queries/components/QuerySourceAlerts.jsx b/client/app/pages/queries/components/QuerySourceAlerts.jsx
index 75b472972..f4128a8c3 100644
--- a/client/app/pages/queries/components/QuerySourceAlerts.jsx
+++ b/client/app/pages/queries/components/QuerySourceAlerts.jsx
@@ -2,8 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import Card from "antd/lib/card";
 import WarningFilledIcon from "@ant-design/icons/WarningFilled";
-import Button from "antd/lib/button";
 import Typography from "antd/lib/typography";
+import Link from "@/components/Link";
 import { currentUser } from "@/services/auth";
 
 import useQueryFlags from "../hooks/useQueryFlags";
@@ -21,8 +21,8 @@ export default function QuerySourceAlerts({ query, dataSourcesAvailable }) {
         </Typography.Title>
         <p>
           <Typography.Text type="secondary">
-            You can either <a href="queries">browse existing queries</a>, or ask for additional permissions from your
-            Redash admin.
+            You can either <Link href="queries">browse existing queries</Link>, or ask for additional permissions from
+            your Redash admin.
           </Typography.Text>
         </p>
       </React.Fragment>
@@ -39,12 +39,12 @@ export default function QuerySourceAlerts({ query, dataSourcesAvailable }) {
           </p>
 
           <div className="query-source-alerts-actions">
-            <Button type="primary" href="data_sources/new">
+            <Link.Button type="primary" href="data_sources/new">
               Create Data Source
-            </Button>
-            <Button type="default" href="groups">
+            </Link.Button>
+            <Link.Button type="default" href="groups">
               Manage Group Permissions
-            </Button>
+            </Link.Button>
           </div>
         </React.Fragment>
       );
diff --git a/client/app/pages/users/UsersList.jsx b/client/app/pages/users/UsersList.jsx
index bae16148a..6e19c8fac 100644
--- a/client/app/pages/users/UsersList.jsx
+++ b/client/app/pages/users/UsersList.jsx
@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import Modal from "antd/lib/modal";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
+import Link from "@/components/Link";
 import Paginator from "@/components/Paginator";
 import DynamicComponent from "@/components/DynamicComponent";
 import { UserPreviewCard } from "@/components/PreviewCard";
@@ -98,9 +99,9 @@ class UsersList extends React.Component {
     Columns.custom.sortable(
       (text, user) =>
         map(user.groups, group => (
-          <a key={"group" + group.id} className="label label-tag" href={"groups/" + group.id}>
+          <Link key={"group" + group.id} className="label label-tag" href={"groups/" + group.id}>
             {group.name}
-          </a>
+          </Link>
         )),
       {
         title: "Groups",
diff --git a/client/app/pages/users/components/UserGroups.jsx b/client/app/pages/users/components/UserGroups.jsx
index 989aa7a89..5f0c6d28d 100644
--- a/client/app/pages/users/components/UserGroups.jsx
+++ b/client/app/pages/users/components/UserGroups.jsx
@@ -2,13 +2,14 @@ import { map } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 import Tag from "antd/lib/tag";
+import Link from "@/components/Link";
 
 export default function UserGroups({ groups, ...props }) {
   return (
     <div {...props}>
       {map(groups, group => (
         <Tag className="m-b-5 m-r-5" key={group.id}>
-          <a href={`groups/${group.id}`}>{group.name}</a>
+          <Link href={`groups/${group.id}`}>{group.name}</Link>
         </Tag>
       ))}
     </div>
diff --git a/viz-lib/src/lib/value-format.js b/viz-lib/src/lib/value-format.js
deleted file mode 100644
index fb0b5b35c..000000000
--- a/viz-lib/src/lib/value-format.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import moment from "moment/moment";
-import numeral from "numeral";
-import { isString, isArray, isUndefined, isFinite, isNil, toString } from "lodash";
-
-numeral.options.scalePercentBy100 = false;
-
-// eslint-disable-next-line
-const urlPattern = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
-
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
-export function createTextFormatter(highlightLinks) {
-  if (highlightLinks) {
-    return value => {
-      if (isString(value)) {
-        value = value.replace(urlPattern, '$1<a href="$2" target="_blank">$2</a>');
-      }
-      return toString(value);
-    };
-  }
-  return value => toString(value);
-}
-
-function toMoment(value) {
-  if (moment.isMoment(value)) {
-    return value;
-  }
-  if (isFinite(value)) {
-    return moment(value);
-  }
-  // same as default `moment(value)`, but avoid fallback to `new Date()`
-  return moment(toString(value), [moment.ISO_8601, moment.RFC_2822]);
-}
-
-export function createDateTimeFormatter(format) {
-  if (isString(format) && format !== "") {
-    return value => {
-      const wrapped = toMoment(value);
-      return wrapped.isValid() ? wrapped.format(format) : toString(value);
-    };
-  }
-  return value => toString(value);
-}
-
-export function createBooleanFormatter(values) {
-  if (isArray(values)) {
-    if (values.length >= 2) {
-      // Both `true` and `false` specified
-      return value => {
-        if (isNil(value)) {
-          return "";
-        }
-        return "" + values[value ? 1 : 0];
-      };
-    } else if (values.length === 1) {
-      // Only `true`
-      return value => (value ? values[0] : "");
-    }
-  }
-  return value => {
-    if (isNil(value)) {
-      return "";
-    }
-    return value ? "true" : "false";
-  };
-}
-
-export function createNumberFormatter(format) {
-  if (isString(format) && format !== "") {
-    const n = numeral(0); // cache `numeral` instance
-    return value => (value === null || value === "" ? "" : n.set(value).format(format));
-  }
-  return value => toString(value);
-}
-
-export function formatSimpleTemplate(str, data) {
-  if (!isString(str)) {
-    return "";
-  }
-  return str.replace(/{{\s*([^\s]+?)\s*}}/g, (match, prop) => {
-    if (hasOwnProperty.call(data, prop) && !isUndefined(data[prop])) {
-      return data[prop];
-    }
-    return match;
-  });
-}
diff --git a/client/app/lib/value-format.js b/viz-lib/src/lib/value-format.jsx
similarity index 81%
rename from client/app/lib/value-format.js
rename to viz-lib/src/lib/value-format.jsx
index fb0b5b35c..0d8de1909 100644
--- a/client/app/lib/value-format.js
+++ b/viz-lib/src/lib/value-format.jsx
@@ -1,6 +1,9 @@
+import React from "react";
+import ReactDOMServer from "react-dom/server";
 import moment from "moment/moment";
 import numeral from "numeral";
 import { isString, isArray, isUndefined, isFinite, isNil, toString } from "lodash";
+import { visualizationsSettings } from "@/visualizations/visualizationsSettings";
 
 numeral.options.scalePercentBy100 = false;
 
@@ -13,7 +16,15 @@ export function createTextFormatter(highlightLinks) {
   if (highlightLinks) {
     return value => {
       if (isString(value)) {
-        value = value.replace(urlPattern, '$1<a href="$2" target="_blank">$2</a>');
+        const Link = visualizationsSettings.LinkComponent;
+        value = value.replace(urlPattern, (unused, prefix, href) => {
+          const link = ReactDOMServer.renderToStaticMarkup(
+            <Link href={href} target="_blank" rel="noopener noreferrer">
+              {href}
+            </Link>
+          );
+          return prefix + link;
+        });
       }
       return toString(value);
     };
diff --git a/viz-lib/src/visualizations/visualizationsSettings.js b/viz-lib/src/visualizations/visualizationsSettings.js
index 44f81ba61..e4025e8db 100644
--- a/viz-lib/src/visualizations/visualizationsSettings.js
+++ b/viz-lib/src/visualizations/visualizationsSettings.js
@@ -32,8 +32,13 @@ HelpTrigger.defaultValues = {
   children: null,
 };
 
+function Link(props) {
+  return <a {...props} />;
+}
+
 export const visualizationsSettings = {
   HelpTriggerComponent: HelpTrigger,
+  LinkComponent: Link,
   dateFormat: "DD/MM/YYYY",
   dateTimeFormat: "DD/MM/YYYY HH:mm",
   integetFormat: "0,0",