Tinyrack

Button

コマンドやフォーム操作に使うボタンです。6 種類の目的、3 種類の外観、3 種類のサイズを選べます。

主なプロパティ

プロパティ値既定値用途
intentneutral, primary, info, success, warning, dangerneutral操作の目的や結果を伝えます。
appearancesolid, outline, ghostsolid目的を変えずに視覚的な強調度を調整します。
uiSizemd, lgmd周囲のコントロールのサイズに合わせます。
disabledbooleanfalse操作を実行できない状態にします。
loadingbooleanfalse操作を無効にし、処理中であることを伝えます。

インストール

pnpm add @tinyrack/ui

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

スタイル

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

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

インポート

import { TRButton } from '@tinyrack/ui/components/button';

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

プレイグラウンド

使用方法

基本アクション パーマリンク

主要な操作には primary を指定します。TRButton は既定で HTML ボタン要素をレンダリングします。

例

ソリッドの目的別表示 パーマリンク

最も強く強調したい操作にはソリッドボタンを使います。各 intent の塗りと対応する `on-*` 色を組み合わせます。

アウトラインの目的別表示 パーマリンク

目立たせながら強調を抑えたい操作にはアウトラインボタンを使います。文字とアイコンには intent の foreground ロールを使います。

ゴーストの目的別表示 パーマリンク

情報量の少ない画面で強調を抑えたい操作にはゴーストボタンを使います。

サイズ パーマリンク

操作の重要度ではなく、周囲のコントロールに合わせてサイズを選びます。

状態 パーマリンク

操作できないときは disabled、処理中は loading を使います。

API

Tinyrack 固有のプロパティ

プロパティ型デフォルト用途
intentneutral | primary | info | success | warning | dangerneutral操作の意味と色の役割を選びます。
appearancesolid | outline | ghostsolid意味を変えずに視覚的な強調方法を選びます。
uiSizemd | lgmdボタンのサイズを選びます。
loadingbooleanfalse操作を無効にし、処理中であることを伝えます。
loadingLabelstringなし読み込み中に使うアクセシブル名を指定します。
variantsecondary | primary | dangersecondary以前の API との互換性を保つためのプロパティです。新しいコードでは intent を使ってください。

HTML 要素と継承するプロパティ

TRButtonProps は Base UI Button のプロパティを拡張します。

継承するプロパティデフォルト動作
disabledfalse操作を実行できない状態にします。
focusableWhenDisabledfalsetrue にすると、無効なボタンをフォーカス順序に残します。
renderなし別の要素やコンポーネントにボタンの動作とスタイルを適用します。
nativeButtontrueレンダリングした要素がネイティブの <button> かどうかを指定します。
typeネイティブボタンでは button通常のボタン、送信、リセットの動作を選びます。

ネイティブボタンの属性、React のイベントハンドラー、状態に応じて値を返せる className と style、React 19 の ref も利用できます。

TRButton はデフォルトで type="button" の HTML <button> をレンダリング します。フォームの送信やリセットに使う場合は、type="submit" または type="reset" を明示してください。render で <button> 以外の要素を使う 場合は nativeButton={false} を設定します。Base UI はネイティブの type 属性を追加せず、ボタンとしての動作を提供します。ボタンの役割は変わらない ため、ページの移動には TRLink を使ってください。

読み込み中の状態とアクセシブル名

loading が true の間は操作を無効にし、aria-hidden のスピナーを先頭に 追加して aria-busy="true" を設定します。loadingLabel を省略すると、通常の アクセシブル名を維持します。loadingLabel を指定すると、読み込み中の一時的な アクセシブル名として使い、既存の aria-labelledby に代わります。loading が false の場合は、明示した aria-busy の値を維持します。

以前のバリアントとの互換性

非推奨の variant は以前のコードとの互換性を保つために残しています。 secondary は neutral に、primary と danger は同名の intent に対応します。 intent を明示すると variant より優先されます。