DDS

ボタン

Figmaに定義済み
Figmaで開く

ユーザーアクションをトリガーするためのインタラクティブなボタンコンポーネント

プライマリーボタン

次へ進むボタンや決定ボタンなど、アクションのプライオリティが高いものに適応してください。

通常時
ホバー時
非アクティブ時
Open in StackBlitz

セカンダリーボタン

戻るボタンなどの優先順位が低いものに適応してください。

通常時
ホバー時
非アクティブ時
Open in StackBlitz

ボタンサイズ

ボタンサイズは、アクションのプライオリティの強弱や画面横幅に合わせて、左右幅のサイズを適宜ご使用ください。

w80px
w120px
w160px
w200px
w240px
Open in StackBlitz

アイコン付きボタン

ボタンサイズは上記のルールに沿い、ボタン内のアイコンとテキストは左に詰まって見えるようなレイアウトにする。

プライマリー
通常時
ホバー時
非アクティブ時
セカンダリー
通常時
ホバー時
非アクティブ時
Open in StackBlitz

アイコンのみのボタン

アイコンのみで構成されるボタン。ブックマークやお気に入り機能などに使用します。

通常時
ホバー時
アクティブ時
非アクティブ時
Open in StackBlitz

外部リンクボタン

外部サイトへのリンクを示すボタン。アイコンは右側に配置します。

通常時
ホバー時
非アクティブ時
Open in StackBlitz

トグルボタン

ON/OFFを切り替えるスイッチコンポーネント。

スイッチON
スイッチOFF
Open in StackBlitz