Overview
Creates a Vue client-side router link. It can take on a number of visual styles, including links:
and buttons:
Related
- Buttons and links has an overview and usage guidance
KButtonandKExternalLinkare similar but handle events differentlyKIconButtonhas a tooltip instead of a text labelKButtonGroupis used for button layout
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
text | Button label text | string |
null
| — |
appearance | Button appearance: 'raised-button', 'flat-button', or 'basic-link' | string |
'basic-link'
| — |
appearanceOverrides | Overrides that will modify the styles sent to $computedClass based on appearance prop | object |
{}
| — |
primary | Show as primary rather than secondary style (for 'raised-button' and 'flat-button' appearance) | boolean |
false
| — |
to | vue-router link object | object | — | true |
icon | If provided, shows a KIcon with the given name before the text | string |
null
| — |
iconAfter | If provided, shows a KIcon with the given name after the text | string |
null
| — |
replace | Use window.history.replaceState() so navigation will not leave history record | boolean |
false
| — |
Slots
| Name | Description |
|---|---|
icon | Optional slot as alternative to icon prop |
default | Optional slot as alternative to text prop |
iconAfter | Optional slot as alternative to iconAfter prop |