Links

Examples

Basic

View order

Vanilla CSS

<a class="link" href="#">View order</a>

React

<Link href="#">View order</Link>

With icon

Dashboard Export

Vanilla CSS

<a class="link" href="#"
  ><i class="ti ti-home" aria-hidden="true"></i>Dashboard</a
>
<a class="link" href="#"
  >Export<i class="ti ti-download" aria-hidden="true"></i
></a>

React

<Link href="#" icon={IconHome}>
  Dashboard
</Link>
<Link href="#" iconTrailing={IconDownload}>
  Export
</Link>

External

Open in inRiver

Vanilla CSS

<a
  class="link link-external"
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
  >Open in inRiver</a
>

React

<Link href="https://example.com" external>
  Open in inRiver
</Link>

Reference

React

Prop	Type	Default
external	boolean	false
icon	IconProp	—
iconTrailing	IconProp	—

external adds the trailing ↗ and defaults target="_blank" + rel="noopener noreferrer"; passing either prop explicitly wins. It’s independent of iconTrailing, so setting both renders two trailing markers. Plus native <a> attributes — href included, which this component does not supply.

Vanilla

Class / var	Effect
link	Inline-flex, 0.25rem gap, link colour, underline at 2px offset, focus-visible ring; long URLs break
link-external	Adds a 0.85em ↗ via ::after, masked from currentColor
--link-external-arrow	The arrow’s mask image. Override to swap the glyph

The ↗ is drawn in CSS, so it ships in both bundles with no icon-font dependency. target and rel are yours to write in vanilla. A direct-child <i> or <svg> is kept from shrinking; no wrapper class needed.

For blocks of HTML you can’t annotate, Prose styles bare <a> the same way.