検索

メニュー

ボタン ( 概要 )

スクリーンショット:横並びの3種類のボタンと、それぞれの通常、ホバー、アクティブ、フォーカス状態を縦に示すパターン例。左のボタンは通常時は青の塗りでラベルは白、ホバー時の塗りはやや暗い青でラベルは白、アクティブ時の塗りはさらに暗い青でラベルは白。真ん中のボタンは通常時は青のアウトラインとラベルで塗りは白、ホバー時の塗りは薄いライトブルーでアウトラインとラベルはやや暗い青、アクティブ時の塗りはライトブルーでアウトラインとラベルはさらに暗い青。右のボタンは通常時は塗りなしで下線が引かれた青のラベル、ホバー時の塗りは薄いライトブルーでラベルはやや暗い青、アクティブ時の塗りはライトブルーでラベルはさらに暗い青。いずれのボタンのホバー時・アクティブ時ではラベルに下線が引かれている。

ボタンは、主にアクション実行またはページ遷移のためのトリガーとして使用します。画面内におけるボタンの重要度に応じて使い分け可能な複数のスタイルがあります。

各種リソース

種別 リソース 状態
デザイン Figmaデザインデータ(v2) 提供中
HTML版実装 ソースコード(GitHub) 提供中
サンプル(Storybook) 提供中
React版実装 ソースコード(GitHub) 提供中
サンプル(Storybook) 提供中