@wernerglinka/linkcomponent v1.0.7
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 linkcomponentUsage
<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;
}