Link
Links are native <a href> elements. There is no Link component: Todae styles every a:any-link in the todae.base layer, from the link contract tokens. A link keeps the text color and stands out by its underline, which darkens on hover, so it suits a neutral ink palette. An <a> without href is not a link and gets no link style.
Read the token reference or the native platform notes before you theme Todae.
The rules sit in :where(), so they add no specificity, and in todae.base, under every component. Any class you add wins, including your router's link component:
// Next.js renders an <a href>, so it gets the link style as it is.
<NextLink href="/billing">Billing</NextLink>
Restyle every link through the link.fg.*, link.decoration.* and link.ring.focus tokens. The link.fg.current, link.decoration.current and link.decoration.current-thickness tokens style the current link.
Current page
Mark the link to the page you are on with aria-current="page", or another aria-current value such as step. Its underline turns thicker, so it stands out without a hover. Your router sets the attribute: Next.js and React Router both let you pass it, and React Router's NavLink adds it for you.
When to use
When: Moving to another page or place: inline in text, in navigation, or as an action in an Alert.
When not: Doing something on this page, such as saving or opening a dialog → Button. A list of actions → Menu.