Tinyrack

LinkButton

実際の anchor としてレンダリングされ、ボタンのように見えるナビゲーションです。6 つの intent、3 つの appearance、3 つのサイズを備えています。

主なプロパティ

軸値既定値用途
intentneutral, primary, info, success, warning, dangerneutral移動先の意味や結果を伝えます。
appearancesolid, outline, ghostsolidintent を変えずに視覚的な強調を調整します。
uiSizemd, lgmd周囲のコントロールのサイズに合わせます。
disabledbooleanfalse移動先を削除し、ナビゲーションを無効化します。

インストール

pnpm add @tinyrack/ui

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

スタイル

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

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

インポート

import { TRLinkButton } from '@tinyrack/ui/components/link-button';

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

プレイグラウンド

使用方法

例

API

ボタンのように見えるナビゲーションには TRLinkButton を、コマンドには TRButton を使用します。実際の anchor を role="link" としてレンダリングするため、Enter で起動し、Space は native anchor と同様に scroll し、native の href、target、rel、download がすべて動作します。無効なリンクボタンは aria-disabled を公開し、href と tab stop を削除して、pointer と keyboard による起動を防ぎます。外部の移動先は、新しい browsing context が開くことを表示テキストで示し、target="_blank" と適切な rel を併用してください。

プロパティ型 / 既定値用途
intentneutral | primary | info | success | warning | danger / neutral意味と色の役割を選びます。
appearancesolid | outline | ghost / solidintent を変えずに視覚的な強調を選びます。
uiSizemd | lg / mdコントロールのサイズを選びます。
disabledboolean / false移動先を削除し、ナビゲーションを無効化します。
hrefnative anchor href移動先を設定し、disabled の間は省略されます。
renderBase UI render element または callbackanchor を入れ子にせず React Router などの link を合成します。
native propsanchor attributes、events、className、style、ref外部/download 属性、handler、style、React 19 ref を転送します。

TRLinkButton は TRButton のスタイル契約（data-appearance、data-intent、 data-ui-size を備えた tr-btn クラス）をそのまま使うため、link の意味を保ち ながらボタンと視覚的に同一になります。