Gates open at 4pm. Read the Ochre Kite Weekender FAQ before you travel.
``` ### Emphasis `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. ```tsx {/* Normal */} View the line-up {/* Strong */} View the line-up {/* Subtle */} View the line-up ``` ### Intents `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. ```tsx {/* Neutral */} Refund policy {/* Accent */} Refund policy {/* Danger */} Refund policy {/* Success */} Refund policy {/* Warning */} Refund policy ``` ```tsxTickets for Velvet Dingo Fest are on sale now. Check the accessibility guide for step-free entry.
Plan your trip on the transport site (opens in a new tab).
``` ## Your router’s Link Pass your router’s Link, such as `next/link`, to `RoadieProvider` once at the app root, as [Linking](https://ticketsolutionsptyltd.github.io/roadie/foundations/linking.md) 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. ```tsx 'use client' import NextLink from 'next/link' import { RoadieProvider } from '@oztix/roadie-components' export function Providers({ children }) { returnRead the FAQ first.
``` Don't use `subtle` in a sentence. With no underline at rest, nothing tells the link from the words around it. ### Links go somewhere, buttons do something **Do** ```tsx ``` Use `Button` for an action, such as saving or adding to the cart, and `Button` with `href` for a call to action that navigates. **Don’t** ```tsx Add to cart ``` 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. ### Import your router’s Link only in the provider **Do** ```tsx Events ``` Use Roadie’s `Link` for every text link, so it routes, refuses unsafe hrefs, and looks the same everywhere. **Don’t** ```tsx import NextLink from 'next/link' ``` Don't import `next/link` anywhere but the file that sets up `RoadieProvider`. ## Accessibility - **Element**: Renders a native ``, so Enter follows it and the browser’s link menu, middle click and modified clicks work. - **Focus**: Keyboard focus shows the Roadie focus ring and the same change as hover, so a `subtle` link shows its underline. - **Name**: The link text is its accessible name. Write text that makes sense out of context, such as "View the line-up", not "Click here". - **New tabs**: An external link opens in a new tab, and `Link` doesn't announce it. Say so in the text, as the external example does. - **Touch**: Nothing changes on a tap, so a touch screen never shows a hover state left behind. - **Motion**: With reduced motion, the fill and underline change at once, with no transition or delay. - **Contrast**: The `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. - **Find and selection**: At rest a `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. - **Forced colours**: Every link shows plain, underlined text in the system colours, and a `strong` link drops its fill. ## API reference ### Link 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. ```tsx import { Link } from '@oztix/roadie-components/link' ``` - `href`: `string`. Required. - `external`: `boolean`. 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. - `emphasis`: `"normal" | "strong" | "subtle"`. Defaults to `'normal'`. 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. - `intent`: `"neutral" | "brand" | "brand-secondary" | "brand-blue" | "brand-orange" | "brand-purple" | "accent" | "danger" | "success" | "warning" | "info"`. Colours the link. Without it, `normal` and `subtle` stay accent inside any intent, and `strong` follows the surrounding intent, neutral included. Docs updated 20 Oct 2026.