LinkButton

Example#

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文字程度）

<Button> or <LinkButton>#

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

フレームワークのLinkコンポーネントを使用する#

render propsにフレームワークのLinkコンポーネントを指定してください。フレームワーク固有のpropsが必用な場合は、Linkコンポーネントに指定してください。

Next.jsの例:

import Link from 'next/link';
import { LinkButton } from '@ubie/ubie-ui';

...

export const SomeComponent () => (
  <LinkButton
    render={<Link href='/' prefetch={false} />}
  >
    リンク
  </LinkButton>
)

Disabledなときは、Buttonを非表示にし適切なメッセージを表示する#

LinkButton はあくまでもLinkであるため、 disabled プロパティは存在しません。 Disabledな LinkButton を用いたい場合は、リンクを非表示にして代わりとなるメッセージを表示するようにしてください。

export const SomeComponent () => (
  {showLinkButton ? (
    <LinkButton href="/">リンク</LinkButton>
  ) : (
    現在このボタンを押すことはできません
  )}
)

Accessibility#

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

• フォーカスを受け取り、Enterキーで押下できます
  • <button> とは違い、Spaceキーはページスクロールとなります
• スクリーンリーダーがアクセスしやすくなります
  • ページ内のリンクに直接移動する機能¹を持つものがあります
• スクリーンリーダーでリンクであることが読み上げられます²