Links

Links stitch our documentation together, turning static copy into guided journeys with clear entry and exit points. Thoughtful microcopy, predictable states, and semantic anchors ensure that every hyperlink feels intentional—inviting readers onward while keeping the overall experience navigable for assistive technology.

The patterns below showcase common treatments—from inline anchors to menu-ready knobs and button-styled links—so you can mix expressive color with consistent interaction affordances. Use these references whenever you need to signal hierarchy, revisit history, or offer an action that still behaves like a trusted hyperlink.

Inline links carry readers from one idea to the next, whether you are pointing to supporting docs or inviting them deeper into the product. Keep the copy short, lead with verbs when the link triggers an action, and rely on the provided hover, focus, and active states so keyboard users gain the same contextual feedback as mouse users.

<a>Regular link</a>
<a class="hover">Hover link</a>
<a class="focus">Focused link</a>
<a class="active">Active link</a>

Visited links reduce cognitive load by showing where someone has already explored, which is especially helpful in reference-heavy docs. Allow the visited styling to remain distinct from the default so researchers can quickly orient themselves, but avoid assigning critical actions—like destructive flows—to states that might appear muted after a single visit.

<a class="visited">Visited link</a>
<a class="visited hover">...</a>
<a class="visited focus">...</a>
<a class="visited active">...</a>

Knob links double as compact navigation chips: they keep menus tidy, highlight filters, and make icon/text pairings feel intentional. Use them when you need a tappable control that still behaves like a link—opening detail panes, swapping content, or filtering tables—so you gain the styling nuance without sacrificing semantic anchors.

<a class="knob">...</a>
<a class="knob hover">...</a>
<a class="knob focus">...</a>
<a class="knob active">...</a>

Color variants reference the Catppuccin palette, giving knobs a warm, expressive range that still feels cohesive. Pick a hue that reinforces meaning (warnings in Maroon, confirmations in Green, highlights in Rosewater), and remember that every tone ships with hover, focus, and active treatments so states stay accessible and predictable.

<a class="knob rosewater">...</a>
<a class="knob flamingo">...</a>
<a class="knob pink">...</a>
<a class="knob mauve">...</a>
<a class="knob red">...</a>
<a class="knob maroon">...</a>
<a class="knob peach">...</a>
<a class="knob yellow">...</a>
<a class="knob green">...</a>
<a class="knob teal">...</a>
<a class="knob sky">...</a>
<a class="knob sapphire">...</a>
<a class="knob blue">...</a>
<a class="knob lavender">...</a>
<a class="knob gray">...</a>

Button links mimic native buttons for times when a navigation target needs the prominence of a primary call-to-action but still routes to another page. Lean on these when a surface lacks room for both buttons and links, and review the buttons guidelines to stay aligned on spacing, color choices, and interactive etiquette.

<a class="button">...</a>
<a class="button hover">...</a>
<a class="button focus">...</a>
<a class="button active">...</a>