Link
Takes people to another page, a part of this page or a file. For actions like saving, copying or deleting, use Button.
Installation
Set up Camaleo once (Installation), then import what you need. It renders on the server.
import { Link } from "@camaleo/react";Anatomy
A plain <a>. The standalone variant adds an arrow icon after the text. Both have a data-slot you can target from CSS.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Before you pick a skin, read the installation guide. It takes about five minutes.
Variants
Use the default link inside sentences, the muted one where many links sit together (a footer, a legal line), and standalone for the one next step of a section.
Standalone
A standalone link sits on its own line, so it gets an arrow and a 24px tall target that is easy to hit on a phone.
Current page in a menu
Click a section. aria-current="page" tells screen readers which link is the page you are on; the bold weight shows it to everyone else.
Opens in a new tab
A new tab breaks the Back button, so say so. The icon shows it, and hidden text puts "opens in a new tab" in the name screen readers hear.
Download a file
Click it to get a real CSV. Put the format and size in the text, so people know what they get before they tap on a slow connection.
October invoices
Click above this box and press Tab: the first stop is a link that jumps past the menu.
Skip to content
Click just above the box and press Tab. The first stop is a hidden link that appears on focus and jumps past the menu, so keyboard users don't tab through it on every page.
With the Next.js router
Pass render={<NextLink href="…" />}. The router handles the click without reloading the page, and the link keeps the skin's style.
In context
Links sit where people decide where to go next. These are whole pieces of UI you can copy, in the skin you picked.
How skins work
Each skin changes colors, shapes and type through tokens, so your components never change.
Guidelines
Screen reader users often jump from link to link, so each one has to make sense out of its sentence.
Click here to download the 2025 annual report.
In a list of links, ten "Click here" sound the same and tell people nothing.
Use it for the main way forward from a section, like starting a guide.
Actions belong to Button. Screen readers announce a link as "go somewhere", and people don't expect it to change data.
Props
default inside sentences, muted for secondary links,
standalone for a link on its own line, with an arrow.<a>, such as the Next.js link:
render={<NextLink href="/docs" />}.Link takes every <a> attribute, like href, target, rel, download and aria-current.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the link itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- The text is the name screen readers hear. Add hidden text when the icon carries meaning, like "opens in a new tab".
- Mark the link to the page people are on with aria-current="page", and don't rely on color alone to show it.
- Standalone links are at least 24px tall (WCAG 2.5.8). Links inside a sentence are exempt, but leave space between links in a list.
- If clicking it changes data or opens a dialog, it is a button. Use Button, even if it looks like a link.