Link
Navigation with semantic color and underline behavior while preserving native anchor capabilities.
Contract
| Axis | Values | Default |
|---|---|---|
variant | default, muted, danger | default |
underline | always, hover, none | hover |
disabled | blocks pointer and keyboard navigation | false |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/link.css';Scroll inside the code area to read long lines.
Imports
import { TRLink } from '@tinyrack/ui/components/link';Scroll inside the code area to read long lines.
Playground
Usage
Current destination permalink
Use a native link for ordinary navigation and mark the current destination with aria-current.
Examples
Client router composition permalink
Compose a router link through render so TRLink adds behavior and styling without nesting anchors.
Semantic variants permalink
Use default for ordinary navigation, muted for supporting links, and danger for navigation with destructive consequences.
Underline behavior permalink
Keep the default hover underline for most links, use always when persistent affordance matters, and none only when context already makes navigation clear.
Internal, external, and download destinations permalink
External links disclose a new browsing context in visible text. Download remains a native anchor capability.
API
Use TRLink for navigation and TRButton for commands. Enter activates an enabled link; Space scrolls like a native anchor. Disabled links expose aria-disabled, remove their native destination and tab stop, and suppress pointer, keyboard, and programmatic activation. External links should disclose a new browsing context in visible text and pair target="_blank" with an appropriate rel.
| Prop | Type / default | Purpose |
|---|---|---|
href | native anchor href | Sets the destination; omitted while disabled. |
variant | default | muted | danger / default | Selects semantic text color. |
underline | always | hover | none / hover | Selects underline visibility. |
disabled | boolean / false | Prevents navigation and removes the link from sequential focus. |
render | Base UI render element or callback | Composes React Router or another link component without nested anchors. |
| native props | anchor attributes, events, className, style, ref | Forwards current state, external/download attributes, handlers, styles, and the React 19 ref. |
Style tokens
--tr-link-color, --tr-link-font-weight, --tr-link-decoration-thickness, --tr-link-underline-offset, --tr-link-hover-opacity, --tr-link-disabled-opacity, --tr-link-radius, --tr-link-focus-color, --tr-link-focus-width, --tr-link-focus-offset, and --tr-link-duration customize the component while retaining Tinyrack token fallbacks.