> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/link.md).

# Link

The `Link` component routes a new view within the application router. It should be used instead of `<a>` to avoid reloading the page.

### Usage

```javascript
import { Link } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <div>
      <Link url='/' title='Home' text='Go to Home' />
    </div>
  );
}
```

### Props

<table data-full-width="true"><thead><tr><th>Prop</th><th>Description</th><th>Required</th><th>Value</th></tr></thead><tbody><tr><td>children</td><td>children to render</td><td>required if no text prop</td><td>component(s)</td></tr><tr><td>className</td><td>custom style</td><td>optional</td><td>SCSS or Tailwind</td></tr><tr><td>color</td><td>link color</td><td>optional</td><td>string (dark/light), default: primary</td></tr><tr><td>text</td><td>link text </td><td>required</td><td>string</td></tr><tr><td>title</td><td>link title </td><td>required</td><td>string</td></tr><tr><td>url</td><td>destination url</td><td>required</td><td>string</td></tr></tbody></table>

### Notes

* The `Link` component uses the `NavLink` from `react-router-dom` for internal routing and `<a>` for external links.
* The `className` prop allows for custom styling to be applied.
* The `color` prop sets the link color and defaults to the primary color if not specified.
* The `text` and `title` props provide the link text and title, respectively.
* The `url` prop specifies the destination URL.