Tinyrack

IconButton

TRButton のビジュアルを共有し、アクセシブルな名前を必要とするアイコン専用アクションです。

主なプロパティ

文脈からアイコンの意味が明確な、よく知られたアクションに IconButton を使用します。各インスタンスにはアクセシブルな名前が 1 つ必要です。直接名前を指定する場合は aria-label、別の場所にある表示テキストでアクションを命名する場合は aria-labelledby を使用します。アイコンは aria-hidden="true" で装飾扱いにし、名前と競合しないようにします。

プロパティ値デフォルト用途
variantsecondary, primary, dangersecondaryアクションの意図を伝えます。
appearancesolid, outline, ghostsolid意図を変えずに強調度を変更します。
uiSizemd, lgmd正方形のターゲットとアイコンサイズを設定します。
状態disabled, loading操作可能ネイティブの disabled 動作を使用し、loading は aria-busy とスピナーを追加します。

インストール

pnpm add @tinyrack/ui

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

スタイル

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

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

インポート

import { TRIconButton } from '@tinyrack/ui/components/icon-button';

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

プレイグラウンド

使用方法

設定アクション パーマリンク

アイコンではなくアクションに名前を付け、通常のイベント処理を維持します。

例

アクションの状態 パーマリンク

loading はアイコンを装飾用スピナーに置き換え、loadingLabel を一時的なアクセシブル名として使用します。disabled はネイティブのボタン状態を維持します。

外観 パーマリンク

最も強く強調する場合は solid、境界が必要な場合は outline、強調を抑えたツールバー操作には ghost を使用してください。

アクションの意図 パーマリンク

主要な操作には primary、破壊的な操作にのみ danger を使用してください。secondary は中立的なデフォルトです。

サイズ パーマリンク

隣接するコントロールにアイコンボタンのサイズを合わせ、入力方法に十分な操作領域を確保してください。

API

  • TRIconButton は aria-label または aria-labelledby のいずれかを必須とし、1 つのアイコンを children として受け取ります。Button の props、ネイティブ属性、イベント、className、style、React 19 の ref、Base UI の render 合成を転送します。
  • type のデフォルトは button です。アイコンアクションでフォームを送信する場合に限り、type="submit" を明示します。
  • loading は操作を無効化し、aria-busy を設定して元のアイコンを隠し、装飾用スピナーを表示します。loadingLabel は一時的に aria-label を置き換え、代替名がない場合は aria-labelledby の名前を維持します。
  • --tr-btn-height は正方形ターゲットの両方の寸法を変更します。--tr-icon-button-icon-size は直接の子 SVG アイコンのサイズを変更します。他の Button の色、角丸、フォーカス、モーション、disabled トークンも利用できます。
  • IconButton の CSS サブパスには Button と Spinner の依存スタイルが含まれます。