Button
View on GitHub: Copmonentユーザーがアクションを実行するためのボタン
Example#
Props#
Name | Type | Default | Description |
---|---|---|---|
block | boolean | false | 横幅を100%占有する |
children required | ReactNode | - | ボタンのラベルとして表示する内容 |
data-* optional | string | - | Custom data attributes |
disabled | boolean | false | ボタンを無効化するかどうか |
fixedIcon optional | 'default' ReactElement 'ubie-iconsのアイコン名' | - | Fixedアイコン |
loading | boolean | false | ローディング状態を示す |
loadingLabel | string | '通信中' | ローディング中に表示する文言 |
m optional | 'xxs' 'xs' 'sm' | - | 四方のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
mb optional | 'xxs' 'xs' 'sm' | - | 下方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
ml optional | 'xxs' 'xs' 'sm' | - | 左方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
mr optional | 'xxs' 'xs' 'sm' | - | 右方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
mt optional | 'xxs' 'xs' 'sm' | - | 上方向のマージン。Spacing Tokenのキーを指定 |
mx optional | 'xxs' 'xs' 'sm' | - | 水平方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
my optional | 'xxs' 'xs' 'sm' | - | 垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
prefixIcon optional | default ReactElement IconName | - | 前方配置のアイコン |
size | 'large' 'medium' 'small' | 'large' | 種類 |
suffixIcon optional | 'default' ReactElement 'ubie-iconsのアイコン名' | - | 後方配置のアイコン |
type | 'submit' 'button' 'reset' | 'button' | ネイティブのbutton要素のtype属性 |
variant | 'primary' 'secondary' 'accent' | 'primary' | ボタンの種類 |
whiteSpace | 'normal' 'nowrap' 'pre' | 'normal' | ラベルの折り返しを指定 |
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キーで押下できます