Link

Link Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.navbarTextIos	string	'text-primary'
colors.navbarTextMaterial	string	''
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
component	string	'a'	Component's HTML Element
iconOnly	boolean	false	Enable if Link doesn't contain anything except icon
linkProps	any		Object with additional props (attributes) to pass to the Link/Button
navbar	boolean	false	Should be enabled if Link is in the Navbar
tabbar	boolean	false	Should be enabled if Link is in the Tabbar
tabbarActive	boolean	false	Highlights Tabbar Link as currently active
toolbar	boolean	false	Should be enabled if Link is in the Toolbar
touchRipple	boolean	undefined	Enables touch ripple effect in Material theme. If not specified, enabled by default if link is toolbar, tabbar or navbar

Link Events

Name	Type	Description
click	function(e)	Click handler

Examples

Navigation Link

Vue

<k-link href="/about">About</k-link>

React

<Link href="/about">About</Link>

External Link

Vue

<k-link href="https://google.com" target="_blank"> Google </k-link>

React

<Link href="https://google.com" target="_blank">
  Google
</Link>

Vue Router Link

<k-link :link-props="{to: '/about'}" component="router-link">
  About
</k-link>

React

import { Link } from 'konsta/react';
import { Link as RouterLink } from 'react-router-dom';

// ...

<Link href="/about" component={RouterLink}>
  About
</Link>

Link In Navbar

Vue

<k-navbar title="My App">
  <template #right>
    <k-link navbar @click="openMenu">Menu</k-link>
  </template>
</k-navbar>

React

<Navbar
  title="My App"
  right={
    <Link navbar onClick={openMenu}>Menu</Link>
  }
/>

Link In Toolbar

Vue

<k-toolbar>
  <k-link toolbar @click="action1">Action 1</k-link>
  <k-link toolbar @click="action2">Action 2</k-link>
</k-toolbar>

React

<Toolbar>
  <Link toolbar onClick={action1}>Action 1</Link>
  <Link toolbar onClick={action2}>Action 2</Link>
</Toolbar>