Link
Goes to another page or site. Underlined and violet by default; subtle inside navigation and tables.
Examples
Variants
<Link href={href}>View server</Link>
<Link href={href} variant="subtle">github-mcp</Link>
<Link href="https://modelcontextprotocol.io" external>MCP specification</Link>In running text
Light
Agents reach this server through your Switchboard URL. Copy the agent config to connect one.
Dark
Agents reach this server through your Switchboard URL. Copy the agent config to connect one.
<Text>
Agents reach this server through your Switchboard URL.{' '}
<Link href={href}>Copy the agent config</Link> to connect one.
</Text>Usage
import { Link } from '@switchboard/ui'
<Link href={serverHref}>{server.name}</Link>Props
Every component also takes mix, for css() and mixins applied after its own style.
Link
| Prop | Type | Default | Description |
|---|---|---|---|
| href* | string | – | Destination. |
| variant | 'accent' | 'subtle' | 'accent' | Subtle inherits the text colour and underlines only on hover. |
| external | boolean | – | Opens in a new tab with rel="noreferrer" and a trailing external-link icon. |
| mix | Mix | – | Extra css() or mixins, applied after the link style. |
Also accepts every <a> attribute.
Accessibility
- Renders a native <a href>, so it works, and opens in a new tab with the usual keys, before any JavaScript.
- External links carry a labelled icon, "(opens in a new tab)", so the new tab is announced.
- The accent variant is underlined, so links are not told apart by colour alone.
Guidance
Do
- Name the destination in the link text: "View server", "MCP specification".
- Use Link to go somewhere and Button to do something.
Don’t
- Write "click here" or "learn more" as the whole link.
- Use the subtle variant in running text, where it is hard to spot.