LinkArrow
Inline arrow for links
Preview
Manifesto
signal.3lastic.com
Props
| Prop | Type | Default | Meaning |
|---|---|---|---|
external | boolean | false | false = right arrow (internal). true = up-right arrow (external). |
Why it exists
The Unicode characters → (U+2192) and ↗ (U+2197) render as color emoji on macOS and iOS: they ignore currentColor, break the typographic tone and shift the baseline. LinkArrow replaces them with an SVG using stroke="currentColor", which matches the color and weight of the text on any platform. That is its whole reason to exist: if it goes back to Unicode, the bug comes back.
Tokens
| Property | Value | Note |
|---|---|---|
| Size | Fixed 12×12px | A UI glyph, not typography: outside the scale |
| Color | currentColor | Inherits the text color; never hardcoded |
| Stroke | 1.2px, round | Matches the visual weight of the body |
| Margin-left | 0.2em | Scales with the font size |
Constraints
- A single prop:
external. No size or state variants. - Color always
currentColor. - Decorative:
aria-hidden,focusable="false". - Fixed at 12px, deliberately outside the Major Third scale.
- Never Unicode in markup or in CSS
content: Safari paints it as emoji.
Prose
External links in Markdown can't use the component. In prose.css, .prose a[target="_blank"]::after duplicates the external arrow with an SVG mask. If you change the external path here, update the mask in prose.css too.
Decisions
| Decision | Why |
|---|---|
| SVG instead of Unicode | U+2192 and U+2197 are color emoji on macOS/iOS and ignore currentColor |
external prop | Direction is semantic (internal vs external destination), not arbitrary decoration |
| Default = internal (→) | Most links are internal; external is marked explicitly |
| currentColor, never a fixed fill | It must always match the text it accompanies, in light and dark |
| Fixed 12px, outside the scale | A UI glyph sized to the body, not a typographic step |
| Prose uses a CSS mask | Same Safari bug; the mask replicates the component's external path |