## Usage
### Javascript
```html
```
### React
```tsx
import React from 'react';
import { KvLink } from '@kelvininc/react-ui-components/client';
export const KvLinkExample: React.FC = () => (
<>
{/*-- Labeled --*/}
{/*-- Labeled with subtitle --*/}
{/*-- Labeled with subtitle and link --*/}
);
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'kv-link-example',
styleUrl: 'kv-link-example.css',
shadow: true,
})
export class SwichButtonExample {
render() {
return [
// Labeled
// Labeled with subtitle
// Labeled with subtitle and link
];
}
}
```
## Properties
| Property | Attribute | Description | Type | Default |
| -------------------- | ------------ | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------- |
| `disabled` | `disabled` | (optional) Defines if the link are disabled. Default: false | `boolean` | `false` |
| `href` | `href` | (optional) The anchor's link to open when clicking | `string` | `undefined` |
| `inline` | `inline` | (optional) Whether the link is displayed inline. Default: false | `boolean` | `false` |
| `label` _(required)_ | `label` | (required) Main component label | `string` | `undefined` |
| `leftIcon` | `left-icon` | (optional) The name of the icon to be rendered on the left side of the label | `EIconName` | `undefined` |
| `rightIcon` | `right-icon` | (optional) The name of the icon to be rendered on the right side of the label | `EIconName` | `undefined` |
| `subtitle` | `subtitle` | (optional) Description for the label | `string` | `undefined` |
| `target` | `target` | (optional) The anchor's target | `EAnchorTarget.BrowserDefault \| EAnchorTarget.NewTab \| EAnchorTarget.Parent \| EAnchorTarget.Top` | `undefined` |
## Events
| Event | Description | Type |
| ------------ | ------------------------------- | ------------------------- |
| `labelClick` | Emitted when clicking the label | `CustomEvent` |
## Shadow Parts
| Part | Description |
| -------------- | -------------------- |
| `"container"` | The link's container |
| `"label"` | The link's label |
| `"label-text"` | |
## Dependencies
### Used by
- [kv-breadcrumb-item](../breadcrumb-item)
- [kv-radio-list-item](../radio-list-item)
### Depends on
- [kv-icon](../icon)
### Graph
```mermaid
graph TD;
kv-link --> kv-icon
kv-breadcrumb-item --> kv-link
kv-radio-list-item --> kv-link
style kv-link fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------