Anchor
Fundamental component for rendering links to external addresses.
The <Anchor> element, with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
Content within each <Anchor> should indicate the link’s destination. If the href attribute is present, pressing the enter key while focused on the <Anchor> element will activate it.
See the MDN docs for more information.
If you need to link to an internal application route, prefer using the react-router <Link>.
This link will go to ngrok.com!
You can add icons! This one renders at the start: ngrok docs!
And this icon renders at the end: ngrok dashboard!
import { Anchor } from "@ngrok/mantle/anchor";
import { Book } from "@phosphor-icons/react/Book";
import { Shrimp } from "@phosphor-icons/react/Shrimp";
<p>
This link will go to <Anchor href="https://ngrok.com/">ngrok.com</Anchor>!
</p>
<p>
You can add icons! This one renders at the start:{" "}
<Anchor href="https://ngrok.com/docs" icon={<Book />}>
ngrok docs
</Anchor>
!
</p>
<p>
And this icon renders at the end:{" "}
<Anchor href="https://dashboard.ngrok.com" icon={<Shrimp />} iconPlacement="end">
ngrok dashboard
</Anchor>
!
</p>API Reference
The Anchor accepts the following props in addition to the standard HTML anchor attributes.