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

Link Svelte 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.navbarTextIosstring'text-primary'
colors.navbarTextMaterialstring''
colors.textIosstring'text-primary'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
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

onClickfunction(e)

click event handler

Examples

<Link href="/about">About</Link>
<Link href="https://google.com" target="_blank"> Google </Link>
<Link linkProps={{to: '/about'}} component={RouterLink}>
  About
</Link>
<Navbar title="My App">
  <Link slot="right" navbar onClick={openMenu}>Menu</Link>
</Navbar>
<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.