# LinkArrow The mark on a link that leaves the page. - Group: Display - Import: `import { LinkArrow } from '@misoto22/folio'` - Page: https://ui.misoto22.com/components/link-arrow/ ## Anatomy - **Marker box** (required) — An aria-hidden inline-block carrying the 0.22em of lead-in, the 0.28em baseline lift and --ink-3-aa. inline-block is load-bearing twice over: it stops an underlined parent drawing its rule through the glyph, and it is what the alignment is measured against. - **Glyph** (required) — The ↗ itself at 0.68em, so it tracks the type beside it instead of competing with it. Exported as EXTERNAL_LINK_ARROW, so a surface that is not React uses the same character. ## Best practices ### Do - Put it inside the , as the last child. Outside it, it is an arrow pointing at a link the pointer misses by 0.22em. - Reach for EXTERNAL_LINK_ARROW when the surface is not React — a Markdown pipeline, an OG image, an email — so the mark stays one character rather than three near-identical arrows across a site. - Pass a colour through className on a reversed plate: it is set in --ink-3-aa, which is the AA floor against paper and close to invisible on ink. ### Don’t - The arrow is not the announcement. It is aria-hidden, and target="_blank" is not announced either, so a link that opens a new tab has to say so in its own accessible name — otherwise this glyph is the only warning anyone gets, and only if they can see it. - Do not pin it to a px size. 0.68em is what makes one component right in body copy and in a heading; fixed at 11px it is correct in one of them and a speck in the other. - Do not put it on every row of an index. It marks a change of destination, so a list where every link leaves the site marks nothing at all and pays 0.22em a row for it. ## 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. ## EXTERNAL_LINK_ARROW Re-export of `'↗'`. The glyph itself, exported so a non-React surface can use the same mark. ## LinkArrow 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. Also accepts: `HTMLAttributes`. ## Example — default ```tsx import { LinkArrow } from '@misoto22/folio'

Read the whole thing

``` ## Example — only where it leaves ```tsx import { LinkArrow } from '@misoto22/folio'

``` ## Example — on a reversed plate ```tsx import { LinkArrow } from '@misoto22/folio'

The repository on GitHub

```