Link# Links bring your users to a different place of your application.
Internal links# These links, created with the <Link> component, use the leptos router under the hood and are meant to direct users to a different location inside your app, as the given href prop is always considered to be relative to your site.
<Link href="/doc/components/link">
"This is a link to the current route."
</Link>
This is a link to the current route. External links# These links, created with the <LinkExt> component, do not use the leptos router and must be used when directing users to external sources.
<LinkExt href="https://github.com/lpotthast/leptonic" target=LinkExtTarget::Blank>
<Icon id="github-icon" icon=icondata::BsGithub style="font-size: 3em;"/>
</LinkExt>
It is likely that you want to render a link in the form of a button. Please respect the HTML standard and do not render a <Button> inside a <Link>.
Use the <LinkButton> component, which accepts most props from both the <Link> as well as the <Button> component.
The "Read the docs" button on the welcome page was implemented this way!
<LinkButton href=DocRoutes::Overview>
"Read the docs"
</LinkButton>
Read the docs Styling# You may overwrite any of the following CSS variables to meet your styling needs.
--link-color