LinkComponent

A Web Component for Links

The link component offers two primary rendering options - text links and button links. Additionally, it provides features to choose a color scheme for the button link and specify if the link should open in a new tab (external link).

Installation

npm install linkcomponent

Usage

<link-component
  url="https://www.apple.com" 
  isbutton="true" 
  colorscheme="primary" 
  isexternal="true"
>Learn More</link-component>

Attributes

| Attribute | Type | Description | | --- | --- | --- | | url | string | The URL to link to | | isbutton | boolean | If exists, the link will be rendered as a button | | colorscheme | string | The color scheme of the button. Options are primary, secondary, tertiary and inverted | | isexternal | boolean | If exists, the link will open in a new tab |

Styling

The link component can be styled with CSS. The following CSS variables are available: | CSS Variable | Default | | --- | --- | | --btn-color | #003436 | | --btn-text-color | #fff | | --btn-border-radius | 0 | | --btn-padding | 0rem 2.5rem | | --btn-font-size | 1rem | | --btn-font-weight | 700 | | --btn-line-height | 2.5rem | | --btn-color-primary | #003436 | | --btn-text-color-primary | #fff | | --btn-color-secondary | #007175 | | --btn-text-color-secondary | #fff | | --btn-color-tertiary | #00AFB5 | | --btn-text-color-tertiary | #222 | | --btn-color-inverted | transparent | | --btn-border-color-inverted | #003436 | | --btn-text-color-inverted | #003436 | | --btn-text-color-hover-inverted | #fff | | --link-color | #003436 | | --link-hover-color | #00C896 |

To change the button color to red, for example, add the following to your CSS:

link-component {
  --btn-color: red;
}

License

MIT

Author

Werner Glinka