---
description: The Link component usage and API reference.
---

# Code

## API

This component extends the native anchor tag props. This means this component can receive the native html anchor tag attributes, for example, the `target` attribute (which is why it's not included in the table). See for reference: [anchor tag props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).

<table><thead><tr><th>Props</th><th width="353.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td><code>children</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>isUnderlined</code></td><td><code>boolean</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>isDisabled</code></td><td><code>boolean</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>iconBefore</code></td><td><a href="https://2600hz.github.io/sds-telicon/"><code>AvailableTelicon</code></a></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>iconAfter</code></td><td><a href="https://2600hz.github.io/sds-telicon/"><code>AvailableTelicon</code></a></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>



{% hint style="info" %}
The `href` prop is not technically required in the `Link`, but it is strongly recommended. The `href` prop specifies the URL of the page that the link goes to, and it is essential for creating functional links.
{% endhint %}



<details>

<summary>children</summary>

In this case, the "children" of the Link component is just a plain text string, which means it's not any kind of HTML or JSX code. It's just a simple message that we want to show on the Badge.

</details>

<details>

<summary>isUnderlined</summary>

The `isUnderlined` prop is a property used in the `Link` component to add or remove an underline from text. When set to `true`, the text is underlined, and when set to `false`, it's not. It's often used to indicate links or add emphasis to text within a component.

</details>

<details>

<summary>isDisabled</summary>

The `isDisabled` prop is a property used in the `Link` component to indicate that the component should be disabled and not clickable. When set to `true`, it visually indicates that the component is disabled and cannot be interacted with.&#x20;

</details>

<details>

<summary>IconBefore and iconAfter</summary>

Collection of available icons to implement on the `Link` component. This collection is based on the Telicon icon collection that can be found [here](https://2600hz.github.io/sds-telicon/).  This will render the passed icon after/before or both the children.

</details>

## Examples

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td>Live Code</td><td><a href="https://codesandbox.io/s/link-6lc3rx">Code Sandbox</a></td><td></td></tr></tbody></table>

{% embed url="https://codesandbox.io/p/sandbox/link-m9mzcg?file=/src/App.tsx:1,1" fullWidth="true" %}

