Tinyrack

Link

ネイティブ anchor の機能を保ちながら、意味のある色と underline 動作を備えたナビゲーションです。

主なプロパティ

プロパティ値既定値
variantdefault, muted, dangerdefault
underlinealways, hover, nonehover
disabledpointer と keyboard navigation を無効化false

インストール

pnpm add @tinyrack/ui

長い行はコード領域を横にスクロールして確認できます。

スタイル

@import '@tinyrack/ui/components/link.css';

長い行はコード領域を横にスクロールして確認できます。

インポート

import { TRLink } from '@tinyrack/ui/components/link';

長い行はコード領域を横にスクロールして確認できます。

プレイグラウンド

使用方法

例

API

ナビゲーションには TRLink、コマンドには TRButton を使います。有効な link は Enter で起動し、Space は native anchor と同様に scroll します。Disabled link は aria-disabled を公開し、native destination と tab stop を削除して pointer、keyboard、programmatic activation を防ぎます。外部 link が新しい browsing context を開く場合は、見える text で示し、target="_blank" と適切な rel を併用してください。

プロパティ型 / 既定値用途
hrefnative anchor hrefdestination を設定し、disabled の間は省略されます。
variantdefault | muted | danger / default意味に応じた text color を選びます。
underlinealways | hover | none / hoverunderline の表示方法を選びます。
disabledboolean / falsenavigation を防ぎ、順次 focus から外します。
renderBase UI render element または callbackanchor を入れ子にせず React Router などの link を合成します。
native propsanchor attributes、events、className、style、refcurrent state、外部/download 属性、handler、style、React 19 ref を転送します。

スタイルトークン

--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、--tr-link-duration で Tinyrack fallback を保ちながら component を調整できます。