# 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" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/links/code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
