npm package: @forter/link
Description: link from Forter Components
Author: Forter Developers
Latest version: 3.7.1

# fc-link

An element to be used as link to specific area of new tab
<!-- Author: Ori Weingart <oriweingart@forter.com> -->

[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-link--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Flink) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/link/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/link) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/link/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/link) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/link/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/link)

## Usage

```html
<script>
   import '@forter/link';
</script>

<fc-link>
   <a href="www.google.com" target="_blank"> Link </a>
</fc-link>
```

## Examples

```html
<!-- intent -->
<fc-link active>
   <a href="www.google.com" target="_blank"> Link </a>
</fc-link>

```

## Properties

| Property   | Attribute  | Type                                             | Description                                 |
|------------|------------|--------------------------------------------------|---------------------------------------------|
| `active`   | `active`   | `boolean`                                        | If the link is active                       |
| `disabled` | `disabled` | `boolean`                                        | If the link is disabled                     |
| `intent`   | `intent`   | `"primary" \| "secondary" \| "success" \| "apply" \| "danger" \| "warn"` | The button's intent. See Intents in README. |
| `size`     | `size`     | `"small" \| "medium" \| "large"`                 | The button's shapre type. default: line     |

## Events

| Event        | Description              |
|--------------|--------------------------|
| `click`      | when clicking it         |
| `mouseleave` | when getting out of link |

## Slots

| Name | Description                                      |
|------|--------------------------------------------------|
|      | content slot. example: `<a href="/?path=/story/display-components-icon--default-properties" target="_blank">Fc Icon Docs</fc-icon></a>` |

## CSS Custom Properties

| Property                   | Description                                      |
|----------------------------|--------------------------------------------------|
| `--fc-link-color`          | link's text color. default: `black`              |
| `--fc-link-disabled-color` | link's text color when disabled. default: `--fc-gray-600` |
| `--fc-link-line-color`     | link's bottom border color. default: `--cyan-4`  |
| `--fc-link-line-from`      | link's bottom border initial y position relatively to host. default: `-15px` |
| `--fc-link-line-to`        | link's bottom border final y position relatively to host. default: `0px` |
| `--fc-link-padding`        | link's inner padding. default: `2px 3px`         |