Link React Component

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

There are following components included:

  • Link
NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.tabbarInactivestring'text-black dark:text-white dark:text-opacity-55'

Inactive tabbar link text color

colors.textstring'text-primary'

Link text color

componentstring'a'

Component's HTML Element

iconOnlybooleanfalse

Enable if Link doesn't contain anything except icon

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

touchRipplebooleantrue

Enables touch ripple effect in Material theme

onClickfunction(e)

Click handler

Examples

<Link href="/about">About</Link>
<Link href="https://google.com" target="_blank">
  Google
</Link>
import { Link } from 'tailwind-mobile/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.
2021 © Tailwind Mobile by nolimits4web.