Link#

Links bring your users to a different place of your application.

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.

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