npm install @equinor/fusion-wc-link-button
<fwc-link-button label="default" href="#link-here" terget="_blank"></fwc-link-button>
<fwc-link-button label="default" href="#link-here" terget="_blank" icon="settings"></fwc-link-button>
<fwc-link-button label="default" href="#link-here" terget="_blank"><span slot="icon">🚀</span></fwc-link-button>| Name | Description |
|---|---|
icon |
Leading icon. Overrides icon property. Use label or the icon property to set the aria-label. |
trailingIcon |
Icon to show after the label. Overrides trailingIcon property. Use label or the trailingIcon property to set the aria-label. |
| default | Default content to display between both icons and after label. NOTE: It is highly recommended to set the label property instead of projecting text as it will also set the aria-label |
| Name | Type | Default | Description |
|---|---|---|---|
href |
string |
'' |
Sets the underlying HTMLAnchorElement's href resource attribute. |
target |
string |
'' |
Sets the underlying HTMLAnchorElement's target attribute. |
icon |
string |
'' |
Icon to display, and aria-label value when label is not defined. |
label |
string |
'' |
Label to display for the button, and aria-label. |
variant |
ButtonVariant* |
'contained' |
Button variant to render, defaults to contained if no variant is defined. |
color |
ButtonColor** |
'primary' |
Button color to render, defaults to primary if no color is defined. |
dense |
boolean |
false |
Makes the button text and container slightly smaller. |
disabled |
boolean |
false |
Disabled buttons cannot be interacted with and have no visual interaction effect. |
trailingIcon |
boolean |
false |
When true, icon will be displayed after label. |
| 'expandContent' | boolean |
false |
When true, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button. |
* ButtonVariant is exported by fwc-link-button.
type ButtonVariant = 'contained'|'outlined'|'ghost';** ButtonColor is exported by fwc-link-button.
type ButtonColor = 'primary'|'secondary'|'danger';