fc-link

An element to be used as link to specific area of new tab

Usage

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

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

Examples

<!-- 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 |