Link

Link renders an anchor element <a> by default and is primarily used for navigation.

ARIA pattern Theme source React source Feedback

Demo

Usage

Import the Link component. Link renders an anchor element <a> by default, which accepts an href attribute that specifies the Link's destination.

My recursive link

import { Link } from '@aws-amplify/ui-react';

export const DefaultLinkExample = () => {
  return (
    <Link href="https://ui.docs.amplify.aws/react/components/link">
      My recursive link
    </Link>
  );
};

External Links

To create a Link which opens in a new tab, use the isExternal prop. Under the hood, isExternal sets target="_blank" and rel="noopener noreferrer" on the <a> anchor element.

This Link will open in new tab

import { Link } from '@aws-amplify/ui-react';

export const ExternalLinkExample = () => {
  return (
    <Link
      href="https://ui.docs.amplify.aws/react/components/link"
      isExternal={true}
    >
      This Link will open in new tab
    </Link>
  );
};

Routing Libraries

You can use a Link with any React routing library that supports custom components. Below is an example using Link with React Router v5, in which the Link is passed to the component prop as a custom navigation component:

import { Link, Flex, Heading } from '@aws-amplify/ui-react';

import {
  BrowserRouter as Router,
  Link as ReactRouterLink,
  Routes,
  Route,
} from 'react-router-dom';

function Home() {
  return <Heading level={2}>Home</Heading>;
}

function About() {
  return <Heading level={2}>About</Heading>;
}

function Users() {
  return <Heading level={2}>Users</Heading>;
}

function App() {
  return (
    <Router>
      <Flex>
        <ReactRouterLink to="/" component={Link}>Home</ReactRouterLink>
        <ReactRouterLink to="/about" component={Link}>About</ReactRouterLink>
        <ReactRouterLink to="/users" component={Link}>Users</ReactRouterLink>
      </Flex>

      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

CSS Styling

Theme

You can customize the appearance of all Link components in your application with a Theme.

Link Theme Source

Themed Link

import { Link, Theme, ThemeProvider } from '@aws-amplify/ui-react';

const theme: Theme = {
  name: 'link-theme',
  tokens: {
    components: {
      link: {
        focus: {
          color: { value: '{colors.blue.40}' },
        },
        hover: {
          color: { value: '{colors.blue.60}' },
        },
        visited: {
          color: { value: '{colors.blue.80}' },
        },
      },
    },
  },
};

export const LinkThemeExample = () => {
  return (
    <ThemeProvider theme={theme} colorMode="light">
      <Link href="https://ui.docs.amplify.aws/react/components/link" isExternal>
        Themed Link
      </Link>
    </ThemeProvider>
  );
};

Target classes

Class	Description
`amplify-link`	Top level element that wraps the Link primitive

--amplify-components-link-active-color
--amplify-components-link-color
--amplify-components-link-focus-color
--amplify-components-link-hover-color
--amplify-components-link-visited-color

Global Styling

To override styling on all Links, you can set the Amplify CSS variables or use the built in .amplify-link class.

CSS Pseudo-classes

To style the Link component in different states, you can use any of these four CSS Pseudo-classes: :active, :focus, :hover and :visited.

Link Global Styling

/* styles.css */
[data-amplify-theme] {
  --amplify-components-link-color: var(--amplify-colors-purple-80);
  --amplify-components-link-hover-color: var(--amplify-colors-purple-60);
}
/* OR */
.amplify-link {
  color: var(--amplify-colors-purple-80);
}
.amplify-link:hover {
  color: var(--amplify-colors-purple-60);
}

Local Styling

To override styling on a specific Link, you can use (in order of increasing specificity): a class selector or style props.

Using a class selector:

My Custom Link

/* styles.css */
.link-local-styles {
  color: var(--amplify-colors-blue-80);
  font-weight: var(--amplify-font-weights-bold);
}

.link-local-styles:hover {
  color: var(--amplify-colors-blue-60);
}

.link-local-styles:active {
  color: var(--amplify-colors-green-80);
}

import './styles.css';

<Link className="link-local-styles">My Custom Link</Link>;

Using style props:

Styled Link

import { Link } from '@aws-amplify/ui-react';

export const LinkStylePropsExample = () => {
  return (
    <Link fontSize="xl" fontWeight="bold" textDecoration="underline">
      Styled Link
    </Link>
  );
};