A text link that routes through your app’s router and underlines to match its emphasis.
import { Link } from '@oztix/roadie-components/link'
A link keeps the colour of the text around it and underlines in the accent colour. On hover and on keyboard focus, a tint grows up from the underline behind the text, and the underline blends into it, on every line the link wraps to.
normal is the default. strong colours the text too, for a link that has to stand out from the text around it. On hover it fills from the left the way emphasis-strong does, after a 50ms pause so a passing pointer doesn’t set it off, and each letter turns to the on-strong colour as the fill reaches it. subtle shows its underline only on hover or keyboard focus, rising and fading in, for a link whose place already says it's a link. It fades out a beat after the pointer leaves, so sweeping across a list doesn't flicker. With reduced motion, each one jumps straight to its end state.
intent colours the underline and tint, and a strong link’s text and fill. A normal or subtle link is accent, as links in .prose are, unless you give it an intent of its own, intent='neutral' included; an intent-* surface around it, such as a danger callout, doesn’t change it. A strong link follows the surrounding intent, neutral included: its text, underline and fill all come from that intent, and the fill matches the intent’s emphasis-strong. Give it intent='accent' for an accent link that stands out.
Links in .prose and the Prose component share the normal style, its hover and focus motion included, so a Link beside rendered content looks and moves the same as the links inside it.
An https:// href opens in a new tab with rel='noopener noreferrer'. Say so in the text, so it isn't a surprise.
Pass your router’s Link, such as next/link, to RoadieProvider once at the app root, as Linking shows. Then use Roadie’s Link everywhere else. An internal href routes through the router you passed, with its prefetch and client navigation; an external one opens in a new tab; and an unsafe one, such as javascript:, is refused. Every link-bearing component, such as Button with href, routes the same way.
import { Link } from '@oztix/roadie-components/link'<Link href='/events/123'>Ochre Kite Weekender</Link>
<Link href='/faq'>Read the FAQ</Link>
Do
Use normal in running text, strong for a link that stands alone, such as "View all events" under a list, and subtle where the place already says it's a link, such as a footer or a list of links.
<p>Read the <Link href='/faq' emphasis='subtle'>FAQ</Link> first.</p>
Don’t
Don't use subtle in a sentence. With no underline at rest, nothing tells the link from the words around it.
<Button onClick={addToCart}>Add to cart</Button>
Do
Use Button for an action, such as saving or adding to the cart, and Button with href for a call to action that navigates.
<Link href='#' onClick={addToCart}>Add to cart</Link>
Don’t
Don't make a link that only runs a handler. A screen reader announces it as navigation, and a middle click opens the page again in a new tab.
<Link href='/events'>Events</Link>
Do
Use Roadie’s Link for every text link, so it routes, refuses unsafe hrefs, and looks the same everywhere.
import NextLink from 'next/link'
Don’t
Don't import next/link anywhere but the file that sets up RoadieProvider.
<a href>, so Enter follows it and the browser’s link menu, middle click and modified clicks work.subtle link shows its underline.Link doesn't announce it. Say so in the text, as the external example does.normal tint is 17% of the link colour, so text over it keeps its contrast in light and dark. A filled strong link has the text and fill of emphasis-strong in its intent, and each letter turns as the fill reaches it, so text over the fill is always on-strong.strong link is plain text, so find in page, selection, text fragments and copy work as they do anywhere. Find in page always uses the browser’s own highlight. While the link is filled, selection and text fragments paint in the system’s highlight colours, so the letters stay readable.strong link drops its fill.A text link that routes like every link-bearing Roadie component: internal hrefs through the Link given to `RoadieProvider`, external ones in a new tab, and unsafe ones refused.
Opens in a new tab when `true`, or routes through the Link given to `RoadieProvider` when `false`. Unset, an `http(s)://` or `//` href is external and any other is internal.
How much the link stands out from the text around it. `normal` keeps the text colour with an accent underline that grows into a tint on hover, `strong` colours the text in its intent and fills from the left like `emphasis-strong`, and `subtle` shows the underline only on hover or keyboard focus.
Defaults to 'normal'.
Colours the link. Without it, `normal` and `subtle` stay accent inside any intent, and `strong` follows the surrounding intent, neutral included.