> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/16.link.md).

# Link

### Link Props <a href="#link-props" id="link-props"></a>

| Name                      | Type    | Default                                           | Description                                                                                                                    |
| ------------------------- | ------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| colors                    | object  |                                                   | Object with Tailwind CSS colors classes                                                                                        |
| colors.navbarTextIos      | string  | 'text-primary'                                    |                                                                                                                                |
| colors.navbarTextMaterial | string  | ''                                                |                                                                                                                                |
| colors.textIos            | string  | 'text-primary'                                    |                                                                                                                                |
| colors.textMaterial       | string  | 'text-md-light-primary dark:text-md-dark-primary' |                                                                                                                                |
| component                 | string  | 'a'                                               | Component's HTML Element                                                                                                       |
| iconOnly                  | boolean | false                                             | Enable if Link doesn't contain anything except icon                                                                            |
| linkProps                 | any     |                                                   | Object with additional props (attributes) to pass to the Link/Button                                                           |
| navbar                    | boolean | false                                             | Should be enabled if Link is in the Navbar                                                                                     |
| tabbar                    | boolean | false                                             | Should be enabled if Link is in the Tabbar                                                                                     |
| tabbarActive              | boolean | false                                             | Highlights Tabbar Link as currently active                                                                                     |
| toolbar                   | boolean | false                                             | Should be enabled if Link is in the Toolbar                                                                                    |
| touchRipple               | boolean | undefined                                         | Enables touch ripple effect in Material theme. If not specified, enabled by default if link is `toolbar`, `tabbar` or `navbar` |

### Link Events

| Name  | Type        | Description   |
| ----- | ----------- | ------------- |
| click | function(e) | Click handler |

### Examples

\
**Navigation Link**

{% tabs %}
{% tab title="Vue" %}

```typescript
<k-link href="/about">About</k-link>
```

{% endtab %}

{% tab title="React" %}

```javascript
<Link href="/about">About</Link>
```

{% endtab %}
{% endtabs %}

\
**External Link**

{% tabs %}
{% tab title="Vue" %}

```typescript
<k-link href="https://google.com" target="_blank"> Google </k-link>
```

{% endtab %}

{% tab title="React" %}

```javascript
<Link href="https://google.com" target="_blank">
  Google
</Link>
```

{% endtab %}
{% endtabs %}

**Vue Router Link**

{% tabs %}
{% tab title="undefined" %}

```typescript
<k-link :link-props="{to: '/about'}" component="router-link">
  About
</k-link>
```

{% endtab %}

{% tab title="React" %}

```javascript
import { Link } from 'konsta/react';
import { Link as RouterLink } from 'react-router-dom';

// ...

<Link href="/about" component={RouterLink}>
  About
</Link>
```

{% endtab %}
{% endtabs %}

**Link In Navbar**

{% tabs %}
{% tab title="Vue" %}

```javascript
<k-navbar title="My App">
  <template #right>
    <k-link navbar @click="openMenu">Menu</k-link>
  </template>
</k-navbar>
```

{% endtab %}

{% tab title="React" %}

```javascript
<Navbar
  title="My App"
  right={
    <Link navbar onClick={openMenu}>Menu</Link>
  }
/>
```

{% endtab %}
{% endtabs %}

\
**Link In Toolbar**

{% tabs %}
{% tab title="Vue" %}

```typescript
<k-toolbar>
  <k-link toolbar @click="action1">Action 1</k-link>
  <k-link toolbar @click="action2">Action 2</k-link>
</k-toolbar>
```

{% endtab %}

{% tab title="React" %}

```javascript
<Toolbar>
  <Link toolbar onClick={action1}>Action 1</Link>
  <Link toolbar onClick={action2}>Action 2</Link>
</Toolbar>
```

{% endtab %}
{% endtabs %}