Skip to content
GitHub

Display

LinkArrow

The mark on a link that leaves the page.

Examples

default

Read the whole thing

Notes

The mark on a link that leaves the page — outbound, or on to a full index.

Call sites used to write a bare ↗ inside the link text, which inherited the link's own size (a 17px arrow beside a 17px word, competing with it) and was read aloud as "north east arrow" because nothing hid it.

inline-block is load-bearing twice over: it stops an underlined parent drawing its rule through the glyph, and it is what align is measured against. Sized in em, so it tracks whatever type it sits beside; coloured against paper, so a call site on a reversed plate passes its own colour.

Props

Also accepts everything in HTMLAttributes<HTMLSpanElement>. Those are forwarded to the underlying element and are not listed row by row.

Re-exports

EXTERNAL_LINK_ARROW = '↗'

The glyph itself, exported so a non-React surface can use the same mark.

Accessibility

  • aria-hidden, so it is not read as “north east arrow” in the middle of a sentence.
  • Sized in em, so it tracks whatever type it sits beside instead of competing with it.