Retool ボタンコンポーネント速習ガイド：種類と使い分け完全まとめ

Retoolのボタンは、クエリやアクションを起動するための要です。シンプルな「送信」から、メニュー付きのスプリットボタン、リンク一覧まで、用途別のバリエーションが揃っており、読み込み表示や権限、スタイルを細かく制御できます。

以下では、各ボタンコンポーネントの特徴・使いどころを整理し、実践的な使い方・注意点を交えて紹介します。

ボタンファミリー（各コンポーネントの概要と画像スペース）

ボタン（Button）

• 最も一般的な「何かを実行する」ボタン

• ローディング／無効化、ソリッド／アウトライン、アイコン、ツールチップ、キーボードショートカットに対応

ボタングループ（Button Group）

• 複数の関連アクションを横並びに整理

• グループ一括／個別のハンドラを使い分け可能

クローズボタン（Close Button）

• モーダル／ドロワー／ポップオーバーの閉じる操作に

• 既定の「X」アイコン、コンテナのクローズアクションへ簡単に接続

ドロップダウンボタン（Dropdown Button）

• 「選んでから実行」するメニュー式

• 静的／マッピングされたオプション、項目ごとのハンドラ、項目単位のローディング／無効化

リンク（Link）

• ナビゲーションや外部リソースのオープンに

• インラインのテキストリンク。下線の有無を切り替え可能

リンクリスト（Link List）

• 縦並びのリンク／アクションメニュー

• サイドバーに最適。各行でナビゲーションまたはクエリ実行を設定

アウトラインボタン（Outline Button）

• 目立ちすぎないセカンダリアクションに

• 機能はボタン同等で、見た目のみアウトライン

スプリットボタン（Split Button）

• 既定の主要アクション + 代替メニュー

• クリックで主要処理、キャレットから代替アクションを選択

トグルボタン（Toggle Button）

• 真偽値のオン／オフ切替

• 2つの状態表示、機能フラグやフィルタ、可視切替に便利

トグルリンク（Toggle Link）

• テキストリンク版のトグル

• 値に応じてキャレット／矢印が変化、下線の有無も制御

よく使う基本機能

Retool のボタンは、見た目以上に多機能です。
単なる「押す」操作ではなく、クエリの実行やモーダルの開閉、通知の表示など、アプリ全体の動きを担う中心的存在です。
ここでは、基本設定から応用まで、よく使う機能をピックアップします。

アクション & イベントハンドラ

ボタンを押したときに実行できる操作は多岐にわたります。
代表的な例として：

• クエリ実行

• ステート／ローカルステート更新

• 通知表示

• コンテナ（モーダル／ポップオーバー等）の開閉

• ページ遷移

• データエクスポート

• 任意 JavaScript の実行

ドロップダウン／スプリット／リンクリスト系は、各メニュー項目ごとに個別にハンドラを定義できます。（Event Handlers 設定画面から、Control query・Control component・Run script 等を選択可能）
→ イベントハンドラの説明：複数登録可、並列実行。クエリ成功後のリンク処理やチェーンも可能。

💡 ポイント：複数のハンドラを登録しても順序制御はできません。
処理順を明確にしたい場合は、クエリ側の onSuccess イベントを活用しましょう。

状態に応じた UI 制御

• disabled / loading プロパティには式をバインドでき、状態に応じてボタンを無効化、読み込み表示できます。
  例：{{ table1.selectedRow == null }} など

• クエリ実行中は自動的にスピナー表示される仕組みが備わっています。

データ駆動型メニュー生成

ドロップダウン、スプリット、リンクリストは配列データをマッピングしてメニューを動的生成できます。
これにより、たとえばテーブルの行選択データを元に「この id に対する操作メニュー」を自動生成するなどが可能。

スタイリング & レイアウト

• ソリッド／アウトライン、ボタンのサイズ、アイコン位置（前／後）、フル幅表示、密度（compact 表示）など細かく調整可能

• ボタングループ（Button Group）を使えば、等間隔またはカスタムレイアウトで複数ボタンを横並びにできます

• テーマ色やカスタム CSS/スタイルプロパティも柔軟に書き換え可能

セキュリティ & 権限制御

ボタンの表示・無効化を current_user やロールベースの条件に紐づけることが可能。
たとえば、{{ current_user.role !== 'admin' }} のような条件式で制御できます。

キーボード操作 & アクセシビリティ対応

• 任意のホットキー（ショートカットキー）を割り当て可能

• aria ラベル、フォーカス制御、ラベル／ツールチップ併用対応

• スクリーンリーダー向けアクセシビリティ属性も設定可

実用パターン & テクニック集

ボタンはUIの中で最も触れられる要素のひとつです。
そのため「どう配置するか」「どんな状態を見せるか」で、アプリ全体の印象が変わります。

• 送信／保存ボタン
  ソリッドタイプのボタンにし、disabled を入力検証式、loading をクエリ状態に連動させる。
  成功時にモーダルを閉じたり通知を表示したりも可能。

• 主要 + 代替処理の併用
  スプリットボタンを使い、単一クリックで主要処理、ドロップダウンメニューで代替フォーマット（例：CSV / XLSX / JSON 出力）を選ばせる。

• テーブル選択行一括操作
  選択された複数行に対して操作を行う場合、ドロップダウンボタンで対象選択肢をマッピングして処理をループ実行。

• モーダルの閉じ操作
  モーダル内部にクローズボタンを配置し、クリック時にモーダルを閉じる + 必要に応じてステートを初期化。

• ナビゲーション／リンク UI
  行内リンクは Link、サイドバーのナビなどには Link List を利用。複雑な階層メニューには Dropdown または Split と組み合わせ可。

• 機能フラグ切替
  Toggle Button や Toggle Link を使い、バックエンドの真偽値／状態に応じて UI を変化させつつ制御可能。

• 動的切替ボタン
  一つのボタンで状態によりラベル・処理を切り替える。ternary 式を使って、たとえば「有効化／無効化切替」ボタンを一元化する。

🪄 ちょっとした工夫：
代替メニューに「すべて再読み込み」など管理者用処理を隠しておくと、UIがすっきりまとまります。

補足・注意点・最新情報

• Button Group v2 の登場
  Retool チームは「Button Group v2」コンポーネントをリリース中というアナウンスがあります。より柔軟なレイアウトオプションを提供する意図とされています。

• イベントハンドラの並列実行とチェーン制御
  ボタンには単一の Click イベントしかありませんが、複数のハンドラ登録が可能。ただし並列実行されるため、順序を気にする処理はクエリの success/failure 側でチェーンさせるのが安全です。

• Retool公式の「Buttons & Links」ガイド
  Retool の公式ガイド「Getting started with buttons and links」に、各種ボタン・リンクの使い方・設定例がまとまっています。

• 公式ドキュメントの各コンポーネントリファレンス
  ボタン／リンク系の各コンポーネント（Button, Dropdown Button, Split Button など）は、Retool のリファレンスとして個別ページがあります。

Retoolでは、今回紹介したボタンをはじめ、入力フォームやテーブル、チャートなど多様なコンポーネントを用意しています。
直感的な操作で画面を組み立てながら、複雑なアプリも短時間で構築できます。

実際の操作感を、まずはトライアル環境でお確かめください。
👉 無料トライアルを試す

まとめ

Retoolのボタンは、UXとロジックを結ぶ“最小単位のインタラクション”です。
各コンポーネントの違いを押さえ、状態・イベント・権限を組み合わせることで、業務アプリの完成度は大きく変わります。

UIの細部まで設計できるのは、Retoolの強みのひとつ。
今後はボタンを中心に、ユーザー操作をより直感的にする設計パターンも掘り下げていきます。