Button

ユーザーのアクション起点となる基本コンポーネント。Primary / Secondary / Danger / Ghost の 4 種類を、画面内の重要度に応じて使い分けます。

プレビュー

代表的な使用シーン (Primary + Secondary の 1 組)。

種類

4 種類のバリアント。画面内の重要度・性質に応じて使い分けます。下の各セクションで アイコンなし / アイコンあり (左) / アイコンあり (右) / アイコンのみ (テキスト無し) のラジオと サイズタブ を切り替えると、プレビューと実装コードが連動して切り替わります。Ghost の「アイコンのみ」では XS サイズも選べます。

import { Button } from "@/components/Button";

<Button variant="primary" size="s">ボタンラベル</Button>

import { Button } from "@/components/Button";

<Button variant="secondary" size="s">ボタンラベル</Button>

import { Button } from "@/components/Button";

<Button variant="danger" size="s">ボタンラベル</Button>

import { Button } from "@/components/Button";

<Button variant="ghost" size="s">ボタンラベル</Button>

ログイン画面用ボタン

通常の S / M とは別に用意する、ログイン画面専用の大きなボタン。「ログインする」など画面全体が 1 つのフォームになる文脈で使用する。横幅は 400px に固定。Primary を上、Secondary を下に縦並びで配置する。

状態

Normal / Hover / Pressed / Disabled / Loading の 5 状態。Hover と Pressed はブラウザ上でカーソルを乗せて確認できます。

Normal

Disabled

フォーム未入力など クリックを受け付けない ことを示す。スピナーは出さない。

Loading

クリック後に 非同期処理が継続中 であることを示す。loading prop を渡すとラベル左にマテリアルデザイン式スピナーが表示され、自動で disabled になる。

複数のボタンの並べ方

基本は 水平方向に並べる。今後モバイル対応など縦長のレイアウトが必要になった場面で垂直方向に並べる。

水平方向

識字方向の 後方 (= 右側) に Primary が来るようにレイアウトする。

垂直方向

慣習にならい Primary を上、Secondary を下 に配置する。

利用基準

使うべき時

明確なアクション (保存・削除・送信など) の起点として使用
画面内で 1 つだけの主要アクションには Primary を使用
並べるときは垂直方向を優先し、Primary は上 (垂直) または右 (水平) に置く
アイコンのみのボタンには必ず aria-label を指定

使わない時

ページ遷移のみのリンク → Link を使用
ON / OFF の切り替え → Toggle Switch を使用
Primary を同一画面内で複数並べる (競合を生む)
Danger をやり直し可能な操作に使う (誤操作のリスク表現が過剰)

Figma

Figma で Button コンポーネントセットを開く ↗