## Usage
### Javascript
```html
```
### React
```tsx
import React from 'react';
import { KvLink } from '@kelvininc/react-ui-components';
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 |
| -------------------- | ---------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------- |
| `href` | `href` | (optional) The link to open when clicking on the tag | `string` | `undefined` |
| `label` _(required)_ | `label` | (required) Main component label | `string` | `undefined` |
| `subtitle` | `subtitle` | (optional) Description for the label | `string` | `undefined` |
| `target` | `target` | (optional) The link to open when clicking on the tag | `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 |
## Dependencies
### Used by
- [kv-radio-list-item](../radio-list-item)
### Graph
```mermaid
graph TD;
kv-radio-list-item --> kv-link
style kv-link fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------