ボタングループ

Button Group コンポーネントは複数のボタンを一つのまとまりとして組み合わせることを可能にします。関連するアクションを視覚的に魅力的で使いやすい形で整理・表示します。

設定 あなたのボタングループ

ステップ1: ボタン情報を入力：

• まず、グループを構成するボタンを追加します。 各ボタンについてカスタマイズできる項目：

  • ラベル： ボタンに表示されるテキスト。

  • アイコン名： ラベルに添えるアイコンを選択します（任意）。

  • バリアント： ボタンの視覚スタイルを選択します（例: base、neutral、brand、destructive）。

  • さらに： ボタンのプロパティを確認して、外観や動作をさらにカスタマイズしてください。

ステップ2: 横並びで表示（任意）：

• ボタンの配置を制御します。 デフォルトでは、グループ内のボタンは縦に積み重なります。"Display as a Row" トグルを有効にすると横並びに配置されます。

ステップ3: ボタンメニュー（任意）：

• ボタンの表示を管理してスペースを最適化します。 ボタンが多数ある場合は、"Button Menu" 機能を使って追加のボタンを含むドロップダウンメニューを作成できます。これによりインターフェースがすっきり整理され、すべての利用可能なアクションにアクセスできます。

  • メニューボタンをカスタマイズ： ドロップダウンメニューを起動するラベル、アイコン、ボタンのバリアントを設定します。

  • 表示ボタンを制御： デフォルトで表示するボタンの数を指定します。残りのボタンはドロップダウンメニューに配置されます。

なぜ Button Group コンポーネントを使うのか？

• アクションを整理： 関連するアクションをまとめて、より直感的なユーザー体験を提供します。

• 視覚的魅力を向上： ボタンを視覚的に魅力的で整理された形で表示します。

• スペースを最適化： 多くのボタンをメニューで管理してインターフェースの乱雑さを防ぎます。

• 一貫性を強化： アプリケーション全体でボタンのスタイルとレイアウトの一貫性を維持します。

使用例

• ツールバー： 「新規」「編集」「削除」「保存」などの一般的なアクション用のボタンでツールバーを作成します。

• ナビゲーション： アプリケーション内の異なるセクションへのアクセスを容易にするためにナビゲーションボタンをまとめます。

• フォームのアクション： 「送信」と「キャンセル」ボタンを視覚的にまとまりのある単位にまとめます。

• ワークフローアクション： 特定のワークフローやプロセスに関連する一連のアクションを表示します。

Button Group コンポーネントを効果的に使用することで、対話を効率化し、ユーザーを望ましい行動へ導く使いやすいインターフェースを作成できます。