Button

sm

通常よりも小さなサイズです。限られたスペースにボタンを配置する場合かつアクションの重要性が低い場合に使用します。

md (default)

ボタンのデフォルトのサイズです。ノーマルが最も使用されるサイズです。他のサイズのボタンはノーマルを基準に重要度に応じて使用します。

lg

大きなボタンはアクションの重要性を高めるため、使用は極力控えてください。

Solid

背景色が付与されているスタイルです。全てのスタイルの中で最も目立つように設計されています。

画面内で最も重要なアクションに使用します。そのため、Solidスタイルのボタンは同一のビュー内でThemeごとに1回までの使用を推奨します。

Outline

枠線が付与されているスタイルのボタンです。中程度の強調度を持ち、主に副次的なアクションに使用します。

Ghost

背景、枠線がなく、テキストのみの最も控えめなボタンです。主に補助的で軽微なアクションや、コンポーネントの中で使用する場合に適しています。

Primary

体験における必要不可欠なタスクを実行するためのボタンのカラースタイルです。重要なアクションを目立たせる役割があります。

Neutral

デフォルトのカラースタイルです。
視覚的・意味的に中立なアクションを担います。

Negative

破壊的なアクションや、ネガティブな結果をもたらす可能性があるアクションを強調するためのスタイルです。

実行することでユーザーのデータが失われる場合などに使用します。

Variantはユーザーへの破壊的影響の大きさに応じて選択してください。

Prefix Icon

ボタンのアクション（機能）を修飾するためのアイコンエリアです。ラベルだけでアクションの内容を伝えることができない場合に使用します。

テキストラベルのみでアクションを伝えることができる場合はアイコンは使用しません。

Suffix Icon

ドロップダウン形式のメニューのように、ボタンを押下した後に発生するインタラクションを伝えるためのアイコンエリアです。

ボタンの幅は初期状態ではテキスト量に合わせて自動的に可変します。

オプションとして、固定幅と全幅のいずれかにすることができます。全幅はコンテナサイズに合わせてボタンのサイズが可変します。

ボタンの最小幅はボタンの高さの2倍の値です。最小幅が存在することで、小さなボタンや文字量が少ないボタンでもユーザーが適切に視認することをサポートします。

ボタンのサブミット後はステートをローディング状態に変更します。

一方でサブミット処理が早急に完了する場合も多くあります。その場合はボタンはわずかな時間だけローディング状態となるため、結果としてボタンがチラついて表示されます。この現象 (フリッキング) はユーザーに強い不快感を与えてしまいます。

このフリッキングを回避するため、サブミットしてからローディング状態へ移行するまでに1秒間の遅延を発生させます。この遅延している間、ボタンはインタラクティブイベントには視覚的に反応しますが、追加のクリックイベントは発生しません。

また、この処理によって複数回の送信が行われることも回避します。

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 32px
• Item Spacing: 8px
• Padding Vertical: 4px
• Padding Horizontal: 10px

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 40px
• Item Spacing: 8px
• Padding Vertical: 4px
• Padding Horizontal: 10px

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 48px
• Horizontal Gap: 8px
• Horizontal Padding: 12px
• Vertical Padding: 8px

PrimaryのSolidボタンはビューの中で1回だけ使用します。

PrimaryのSolidボタンをビューの中で複数回使用しないでください。メインのトリガー以外はOutlineやGhostボタンを使用してください。

PrimaryのSolidボタンはボタングループの末尾に配置してください。末尾に配置することで、ユーザーは全てのトリガーを確認した上でメインのアクションを実行することができます。

PrimaryのSolidボタンは、ボタングループの先頭や中間には配置しないでください。

サブミットを行うための条件が満たされていないことやエラーが発生していることをユーザーに明示する目的でボタンをDisabled状態にしないでください。常にボタンを押下できるようにし、不備やエラー発生している場合は該当箇所を直接明示します。

ボタンのラベルは改行せずに簡潔に記述してください。

ボタンのラベルは改行せずに記述してください。複数行になった場合はラベルを再検討してください。

ボタンのラベルはテキストだけで表現します。句読点や余分な装飾は付けません。

ブランドのトーンやパーソナリティを参考に、簡潔なラベルを付けてください。絵文字や感嘆符はボタンの機能を伝えることに適していません。

ボタンのラベルにはユーザーが実行するアクション (動詞) を反映します。

ボタンのラベルを名詞や形容詞のみで表さないでください。動詞がないラベルはアクションが不明確でユーザーの誤操作を招きます。