Buttonはユーザーに処理(アクション)をさせるために使用する要素です。選択すると、対応するビジネスロジックが作動します。
FDSでは以下の3タイプのボタンを用意しています。
Contained
メインアクションに使用します。1つのセクションに最大で1つのContained Buttonを配置できます。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/04/image-1.png)
Ghost
キャンセル、あるいは優先度の低いアクションに使用します。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/04/スクリーンショット-2024-04-30-17.49.04-2.png)
Text
最も二次的なアクションに使用します。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/04/スクリーンショット-2024-04-30-17.59.19.png)
Usage
Corner Roundingのサイズを変える事で、直角からフルラウンディングまで色々なスタイルのボタンにする事ができます。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/04/image-1024x817.png)
LoadingタイプはプロパティでLoading Labelを非表示にする事でSpinnerのみ表示させる事もできます。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/04/スクリーンショット-2024-04-30-18.01.17-1024x757.png)
Properties(振る舞いの設定)
Component Propertiesで設定されている内容。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/04/スクリーンショット-2024-04-30-18.02.48.png)
Variables(色の設定)
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/04/スクリーンショット-2024-04-30-18.03.52.png)
カラートークン(Contained)
Style | Element | Token |
Cta | Label | General/Neutral/static white |
Icon | General/Neutral/static white | |
Container:Default | General/Primary/main | |
Container:Hovered | General/Primary/hovered | |
Container:Selected | General/Primary/selected | |
Danger | Label | General/Neutral/static white |
Icon | General/Neutral/static white | |
Container:Default | General/Danger/main | |
Container:Hovered | General/Danger/hovered | |
Container:Selected | General/Danger/selected | |
Neutral | Label | General/Neutral/main |
Icon | General/Neutral/main | |
Container:Default | General/Neutral/contrast | |
Container:Hovered | General/Neutral/hovered fade | |
Container:Selected | General/Neutral/selected fade | |
Disabled | Label | General/Neutral/disabled |
Icon | General/Neutral/disabled | |
Container | General/Neutral/disabled background |