ユーザーがアクションを実行するためのボタン

Example#

Props#

NameTypeDefaultDescription
m
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-四方のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
mx
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-水平方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
my
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
mt
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-上方向のマージン。Spacing Tokenのキーを指定
mr
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-右方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
mb
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-下方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
ml
optional
"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"-左方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
type"button" | "submit" | "reset"buttonネイティブのbutton要素のtype属性
disabledbooleanfalseボタンを無効化するかどうか
loading
optional
boolean-ローディング状態を示す
data-*
optional
string-Custom data attributes

Feature#

一般には、ボタンはアクションのトリガーとして使用されます。リンクとしても使用されますが、「何かのアクションへの入り口」として使用するのが適切です。

Usage#

Variant#

variant propは機能や、画面内での情報のヒエラルキーを表現するために使用します。情報の優先度を踏まえ、強弱がつくように設計してください。すべてを強調すると、すべてが同じに見えます

  • primary - 画面内でもっとも重要なアクションに使用します。可能な限り1画面につき1つの使用にとどめてください
  • secondary - Primaryボタンに対して副次的なアクションを促すボタンとして扱います。背景が透過のため、背景色とテキストが同化しないよう注意してください
  • accent - primaryほど重要ではなく、secondaryよりも強調したい場合に使用します。利用の際は、まずはprimaryを使用できないかを検討します。alert と混同しないよう注意してください
  • alert - 不可逆の操作やリスクのあるアクションに使用します。例えば「削除」や「退会」に使うと良いでしょう
  • text - 控えめな強調度合いを持つボタンです。ボタン同士の差をつける場合、または重要ではないアクションに使用します。「閉じる」や「キャンセル」などに適用できます
  • textAlert - alertの意味合いを持つ text です。背景が透過のため、背景色とテキストが同化しないよう注意してください
  • AuthXXX - Socialログインに使用します

Icon#

icon系の propにより、ボタンの前後にアイコンを配置可能です。ただし、アイコン単独でボタンを利用することは避けてください。

  • アイコンに馴染みがなく、ユーザーが理解できない
  • スクリーンリーダーが読み上げられる情報がない

などのリスクがあります。アイコンを利用する場合はテキストとセットで運用してください。

逆に、type='text' を単独のアクションとして置く場合(つまりテキストのみ)は、それがインタラクティブな要素だとわかりづらくなります。単独で使う場合はアイコンとセットで使うようにしてください。

Label#

  • アクション内容をできるだけ短い言葉で表し、余計な装飾入れません
  • そのボタンが担うアクションを「〜する」または体言止めのかたちで書きます
    • ⭕️「この内容で更新する」
    • ❌「OK」
    • 「OK」ボタンは実行するアクションの内容を表してはいません。単に、確認の意味合いを持つとユーザーには見えるかもしれません。ボタンを押下した場合に、何が起こるのかをユーザーが推測できるべきです。ボタンは、「何かが実行される」ことをユーザーに暗示します。実行の結果が推測できない場合、ユーザーはボタンを押下しない場合があります
  • できる限りモバイルで改行しない文字数におさめましょう(15文字程度)

disabled#

  • 送信時に多重送信を防止したい場合は、loading propを使ってください
  • disabled(無効)状態のボタンはコントラストが低くユーザーを混乱させるため、できるだけ使わないようにしてください。
    • グレーのボタンが disabled だというメンタルモデルを持っていないユーザーも多数います。
    • スクリーンリーダーユーザーには disabled であることが適切に伝わらない可能性があります。
  • ユーザーはなぜ無効になっているのかわからないことがあります。無効状態の理由を表示したり、無効ではなくボタン自体を非表示にすることを検討してください。
    • 可能な限りボタンはActiveにした上で、Invalidなアクションがあった場合は適切なエラーメッセージを表示するようにしてください。
  • ボタンを disabled にする場合は、なぜそのボタンが disabled になっているかの説明を明示するようにしてください。
  • 参考: 権限による表示制御 | デザインパターン(共通) | SmartHR Design System

<Button> or <LinkButton>#

  • どちらも似たような見た目を提供しますが、何を機能として提供するか(=アフォードするか)は異なります
  • ページ遷移するかどうかが大きな判断軸になります。ページ遷移するのであれば<LinkButton />が候補となります
  • ただし、「リンクをボタンとしてデザインすべきかどうか」をまずは検討してください
    • リンクであることを示す手段はいくつか存在します。バナーのような一定のサイズを持つ矩形や、画面上部(ロゴ、ヘッダーナビゲーション等)に存在するものはユーザーにとってリンクであると認識しやすいです
  • 逆に、ページ遷移を<Button>で表現してはいけません。スクリーンリーダーのユーザーなどが見落とす可能性があります

Accessibility#

<Button><LinkButton>を利用することで、適切な要素がマークアップされます。その場合、ネイティブの要素が持つ機能を継承することができます。

ネイティブの <button> 要素#

  • フォーカスを受け取り、EnterキーやSpaceキーで押下できます
    • <div>onClick でボタンを実装してはいけない1理由のひとつです
    • スクリーンリーダーでボタンであることが読み上げられます2

Footnotes#

  1. その他の問題として、<div>onClick のみの実装ではスクリーンリーダーユーザーに「ボタン」の存在が伝わりません。[デモ : NVDA]ボタンじゃないボタン 【AccessiブルGoGo! #4 】

  2. [デモ : NVDA]ボタン(button要素)【AccessiブルGoGo! #4 】