Link React Component

Link is main component to create links for navigation, custom actions, switching tabs, open/close modals, etc.

Contents

There are following components included:

  • Link
NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.navbarTextIosstring''
colors.navbarTextMaterialstring''
colors.textIosstring'text-primary'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
colors.toolbarTextIosstring''
colors.toolbarTextMaterialstring'text-md-light-primary dark:text-md-dark-primary'
componentstring'a'

Component's HTML Element

iconOnlybooleanfalse

Enable if Link doesn't contain anything except icon

linkPropsany

Object with additional props (attributes) to pass to the Link/Button

onClickfunction(e)

Click handler

tabbarActivebooleanfalse

Highlights Tabbar Link as currently active

Examples

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

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

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

// ...

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

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

<Toolbar>
  <Link toolbar onClick={action1}>
    Action 1
  </Link>
  <Link toolbar onClick={action2}>
    Action 2
  </Link>
</Toolbar>
Code licensed under MIT.
2025 © Konsta UI by nolimits4web.