A styled hyperlink — a native <a> with mantle's link styling, focus treatment, optional leading/trailing icon, and a safer default for the rel attribute. Use for links that point outside the current application.
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. See the MDN docs for more information.
mailto: / tel: destinations.react-router <Link>) so client-side navigation kicks in. You can keep mantle's styling by composing:1<Anchor asChild>2 <Link to={href("/foo")}>…</Link>3</Anchor>Button instead. If it doesn't navigate, it's not a link.Pass icon (a phosphor or custom SVG) and optionally iconPlacement ("start" default, or "end") to render a small inline icon — useful for "external link" or "download" affordances. Icons are decorative; the link text must still describe the destination on its own.
When target="_blank", rel should include "noopener noreferrer". The rel prop accepts an array — duplicates are de-duped and sorted, so it's safe to merge token sets.
Link text must be self-describing — avoid "click here" / "read more". For purely decorative icons, no extra labeling is needed; for icon-only links, provide an aria-label.
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: