---
title: Link
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/text/Link
---

Provides declarative, accessible navigation around the application and external links.

### Usage

```jsx
import { Link } from 'nr1'
```

### Examples

#### Basic

```jsx
<Link to="https://www.google.com">Click me</Link>
```

#### With location object

```jsx
function render() {
  const launcher = { id: 'nr1-core.explorer' };
  const location = navigation.getOpenLauncherLocation(launcher);

  return <Link to={location}>Click me</Link>;
}
```

### Props

| `ariaLabel` string       | Use it to describe better the context of the component's action for users on screen readers. ````jsx <Link to="/dashboards" ariaLabel="Go to your dashboard">Go</Link>  ```  ````                                                                                                                                                                                                        |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` REQUIRED node | Content of the link.                                                                                                                                                                                                                                                                                                                                                                     |
| `className` string       | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                           |
| `onClick` function       | Callback fired any time the user clicks on the link.                                                                                                                                                                                                                                                                                                                                     |
| `role` string            | ARIA attribute use to describe the `Link`'s role for accessibility, like `role="menuitem"`. By default, `Link`'s role is "link", so an explicit role is for use within other accessible elements, such as `role="menu"` elements and others.Consult [ARIA best practices](https://www.w3.org/TR/wai-aria-practices/) to see what `role`s can be applied to `Link` and in which contexts. |
| `spacingType` enum\[]    | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. Link.SPACING_TYPE.EXTRA_LARGE, Link.SPACING_TYPE.LARGE, Link.SPACING_TYPE.MEDIUM, Link.SPACING_TYPE.NONE, Link.SPACING_TYPE.OMIT, Link.SPACING_TYPE.SMALL                              |
| `style` object           | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                |
| `testId` string          | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.                      |
| `to` shape\|string       | Location object or url string to link to. shape `pathname` REQUIREDstring `search` string `hash` string                                                                                                                                                                                                                                                                                  |