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!
1import { Anchor } from "@ngrok/mantle/anchor";2import { BookIcon } from "@phosphor-icons/react/Book";3import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";4 5<p>6 This link will go to <Anchor href="https://ngrok.com/">ngrok.com</Anchor>!7</p>8<p>9 You can add icons! This one renders at the start:{" "}10 <Anchor href="https://ngrok.com/docs" icon={<BookIcon />}>11 ngrok docs12 </Anchor>13 !14</p>15<p>16 And this icon renders at the end:{" "}17 <Anchor href="https://dashboard.ngrok.com" icon={<ShrimpIcon />} iconPlacement="end">18 ngrok dashboard19 </Anchor>20 !21</p>All props from a, plus: