Inline navigation that reads as text and behaves like a promise.
Optimism is a stance, not a mood. Read the design principles to see how it shapes every decision, or skip to the changelog for the quiet, secondary trail.
| Prop | Type | Notes |
|---|---|---|
| href | string | Destination; renders a real anchor |
| tone | default · quiet | Warm primary, or grey secondary trail |
| standalone | boolean | Drops the underline, adds a nudging arrow |
| external | boolean | Adds the glyph, target and rel="noreferrer noopener" |
| as | ElementType | Swap in a router Link for client navigation |
A link navigates; it never performs an action. If a click submits, deletes or toggles, use a Button styled as a link, not a link.
Wrap the words that name the destination. The link text is the label.
Don't link "click here". It fails screen readers and says nothing scanned alone.
Mark links that leave the site so a new tab is never a surprise.
Don't dress navigation as a solid button. A link goes; a button does.
Inline links stay in the reading flow; quiet tone marks the lesser of two.
Quiet links stack in footers where they support, not lead.
| Token | Value | Role |
|---|---|---|
| --link-color | #FF9D45 | Default inline link text |
| --link-underline | rgba(255,122,0,.35) | Resting underline, solid on hover |
| --link-quiet | #CFD3DA | Secondary tone text |
| --link-quiet-line | #333336 | Quiet underline |
| --link-arrow | 3px nudge · .18s | Standalone arrow travel on hover |
| --link-focus | rgba(255,122,0,.32) | 3px focus-visible ring |
<a href="/principles" class="o-link">design principles</a> <a href="/changelog" class="o-link o-link--quiet">changelog</a> <a href="/components" class="o-link o-link--standalone"> Browse all components <svg class="o-link__arrow">…</svg> </a> <a href="https://figma.com" class="o-link o-link--external" target="_blank" rel="noreferrer noopener">Figma file</a>