Use Link inside prose and short supportive sentences.
Link
Inline text link with a border-bottom underline. Supports an external variant that opens in a new tab and surfaces a directional arrow.
.source-link
Read the documentation
View on GitHub
.source-link-icon
- .source-link Label and underline treatment
-
border-bottom
1px underline using
--source-link-border-color - .source-link-icon External destination indicator
States
State
Appearance
Default
Secondary text color, border-bottom in
--source-color-border-strong.
Hover
Border-bottom transitions to
--source-color-text, reinforcing the link intent.
External
Arrow icon appended inline. Opens in a new tab with
rel="noopener noreferrer".
Design intent
Link navigates. If clicking it does not change the URL or scroll position, it should be a Button instead. The external prop adds both the right visual cue and the correct rel attributes automatically. Mark every third-party destination as external so users know before they leave.
When to use
Do
Set external for third-party links so users know they leave the app.
Write labels that make sense out of context.
Don't
Do not use Link for in-place actions. Use Button.
Avoid generic labels that lose meaning when isolated.
Do not mark internal routes as external.
External links
The external prop signals to the reader that following the link will leave the current context. Reserve it for genuinely external destinations. Overusing it trains users to ignore the icon.
Case
How to use Link
Internal doc/site pages
Use
<Link href="/path"> without external.
Outside source-design-system
Use
<Link href="https://..." external> to show the outbound arrow and open a new tab safely.
Designer checklist
- Link text makes sense out of context. Not 'click here' or 'read more'.
- External links use the
externalprop and open in a new tab. - Color contrast meets WCAG AA in both default and hover states.
- Links do not look like buttons and vice versa.
Props
Prop
Type
Default
Description
href
string
required
Link destination.
external
boolean
false
Opens in a new tab, adds
rel="noopener noreferrer", and appends the arrow icon.
palette
`neutral \| accent \| success \| warning \| danger \| info`
neutral
Color palette for text and underline.
children
ReactNode
required
Link label.
className
string
null
Extra class on the anchor element.
Usage
import '@pierredelattre/source-tokens';
import '@pierredelattre/source-react/styles';
import { Link } from '@pierredelattre/source-react';
function Demo() {
return (
<p>
See the <Link href="/docs">documentation</Link> for details.
Built with <Link href="https://react.dev" palette="accent" external>React</Link>.
</p>
);
}Component tokens
Defined on .source-link. Override on a parent selector to restyle in a specific context.
.footer .source-link {
--source-link-color: var(--source-color-text-secondary);
--source-link-border-color: var(--source-color-border);
}
Token
Default
--source-link-color
--source-color-text-secondary
--source-link-border-color
--source-color-border-strong
--source-link-border-color-hover
--source-color-text
Semantics
Attribute
Purpose
target="_blank"
Added automatically when
external is true. Opens in a new browsing context.
rel="noopener noreferrer"
Prevents the new page from accessing
window.opener and suppresses the referrer header.
aria-hidden="true"
Applied to the external icon SVG. The link label itself communicates the destination.
Keyboard support
Key
Behavior
Tab
Moves focus to the link.
Enter
Follows the link.