ボタン

Avonni ボタンコンポーネントは、アクションの開始、ページの移動、特定の機能の実行などに使えるカスタマイズ可能なボタンを提供します。

設定 あなたのボタン

ラベルを追加

ラベルはボタンに表示されるテキストです。ボタンの目的とユーザーがクリックしたときにどのようなアクションが発生するかを明確に伝えるべきです。

• ベストプラクティス：

  • 簡潔でアクション指向のラベルを使用してください（例：「保存」「送信」「キャンセル」「詳細」）。

  • 「ここをクリック」のような一般的なラベルは避けてください。

  • ラベルがボタンの機能を正確に反映していることを確認してください。

スタイル（バリアント）を選択

デザインとボタンの目的に合った視覚スタイルを選択します。「Variant」設定は、色、背景、境界線、全体的なスタイルなど、ボタンの外観を制御します。

利用可能なバリアント：

• ベア（Bare）： 最小限のスタイリングのテキストのみのボタンで、控えめなアクションに適しています。

• ベア・インバース（Bare Inverse）： 色が反転したベアボタンで、暗い背景での使用に最適です。

• ベース（Base）： 塗りつぶしの背景色を持つ標準的なボタンで、一般的な用途に適しています。

• ボーダー（Border）： 目に見える境界線と透明な背景を持つボタンで、目立ちすぎないアクションに便利です。

• ボーダー・フィルド（Border-Filled）： 境界線と塗りつぶしの背景色を持つボタンで、視認性とスタイルのバランスが良いです。

• さらに多数あります！ コンポーネントのプロパティパネルでバリアントの全範囲を確認し、デザインにぴったりのものを見つけてください。

アイコンを追加してアクションを強調したり、ボタンを視覚的に魅力的にしましょう。

• アイコンライブラリ： 豊富なアイコンライブラリから、ボタンの目的に合ったアイコンを選んでください。

• サイズと位置： アイコンのサイズを調整し、ラベルテキストの左または右に配置してください。

インタラクションを定義

ここでボタンが動き出します！「Interactions」タブでは、ユーザーがボタンをクリックしたときに何が起こるかを定義できます。Avonniは以下を含む幅広い組み込みインタラクションを提供します：

• ナビゲーションとユーザーフィードバック：

  • フローナビゲーション： 画面の流れを制御し、ユーザーをシームレスに画面間で案内します。

  • トーストを表示： トーストメッセージでユーザーに侵入性の低いフィードバックを提供します。

  • ナビゲート： Salesforce内のさまざまなページや外部サイトへのリンクを作成します。

• データ操作：

  • ダウンロード： レコードに関連するファイルのダウンロードを許可します。

  • エクスポート先： データをExcelまたはCSV形式にエクスポートできるようにします。

  • レコードを更新： 行った変更を自動的に保存します。

  • レコードをコピー： データテーブルのレコードからデータをコピーできるようにします。

• ユーザーエンゲージメントとフロー制御：

  • アラートモーダルを開く： ユーザーの確認を必要とする重要なメッセージを表示します。

  • 確認ダイアログを開く： ユーザーの確認プロンプトで誤操作を防ぎます。

  • フローダイアログを開く： 事前定義されたSalesforceフローを起動します。

  • フローパネルを開く： 別のフローを表示するためのパネルをスライドインで表示します。

  • 紙吹雪（コンフェッティ）を発射： コンフェッティアニメーションでユーザーの操作を祝います。

• データ更新：

  • クエリを更新： Avonniコンポーネントに表示されるデータを更新します。

  • すべてのクエリを更新： クエリデータソースからのすべてのデータを更新します。

• クイックアクション：

  • クイックアクションを開く： 標準またはカスタムのSalesforceアクションに素早くアクセスします