カード状のボタン

Example#

Props#

<button>要素をベースにしています。 表にない属性もprop経由で使用できます(classNameは除く)。

NameTypeDefaultDescription
data-*
optional
string-Custom data attributes
type'button'-

Feature#

カード状のボタンです。エリアを専有してゆったりと見せるため、内容の把握がしやすく、操作も容易なUIです。

  • アクションや回答の選択に集中させたい
  • モバイル環境で操作しやすいUIを提供したい

などのユースケースが考えられます。

ただし、あくまでボタンです。カード状のリンクが必要な場合は<LinkCard>も検討してください。

Usage#

  • type属性はデフォルトbuttonです。フォームの送信ボタンとして使用したい場合はsubmitを指定してください

Keyboard Interaction#

  • Tabキーでフォーカスすることができます
    • フォーカスした状態でEnterまたはSpaceキーを押下した場合、マウスクリックと同じ操作が発生します