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

# Link

## Overview

The `Link` component is a specialized button element designed for opening external links in FiveM scripts. It extends standard button properties and functions similarly to the `openUrl` utility but in a more concise and reusable manner. This component is particularly useful for navigation elements such as store links, donation pages, or forums, allowing for a seamless user experience without disrupting gameplay.

{% hint style="info" %}
This component use [`openUrl`](/fivem-react/utils/open-url.md) utility
{% endhint %}

## Usage

### Importing the Component

```tsx
import { Link } from "@yankes/fivem-react/components";
```

### Props

The component is a `forwardRef` implementation for a `button` element, meaning it inherits all the properties of a `button` along with the additional props specified in the table below.

| Prop       | Type     | Description                                    |
| ---------- | -------- | ---------------------------------------------- |
| **`href`** | `string` | URL where user will be redirected after click. |

### Example

```tsx
import { Link } from "@yankes/fivem-react/components";

export const MyComponent = () => {
    return (
        <Link href="https://tebex.io">
            Our store
        </Link>
    )
}
```

### How It Works

This works exactly like using [`openUrl utility`](/fivem-react/utils/open-url.md), but in component there is shorter implementation.

## Notes

* The `Link` component is a `forwardRef` implementation of a button element, meaning it behaves like a button while supporting additional properties.
* It inherits all standard button properties and provides a simple way to open external URLs.
* The component works similarly to the `openUrl` utility but offers a more concise and component-based implementation.
* It is useful for creating navigation elements in FiveM React projects without manually handling event listeners.

## Conclusion

* The `Link` component provides a streamlined way to open external URLs within a FiveM React project. By leveraging a component-based approach, it simplifies implementation while maintaining flexibility. This makes it a convenient alternative to manually calling `openUrl`, ensuring cleaner and more maintainable code.