🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Link React Component

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

Link Components

There are following components included:

  • Link

Link Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.navbarTextIosstring'text-primary'
colors.navbarTextMaterialstring''
colors.textIosstring'text-primary'
colors.textMaterialstring'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

navbarbooleanfalse

Should be enabled if Link is in the Navbar

tabbarbooleanfalse

Should be enabled if Link is in the Tabbar

tabbarActivebooleanfalse

Highlights Tabbar Link as currently active

toolbarbooleanfalse

Should be enabled if Link is in the Toolbar

touchRipplebooleanundefined

Enables touch ripple effect in Material theme. If not specified, enabled by default if link is toolbar, tabbar or navbar

onClickfunction(e)

Click handler

Examples

Navigation Link

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

External Link

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

React Router Link

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

// ...

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

Link In Navbar

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

Link In Toolbar

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