ButtonCard
View on GitHub: Copmonentカード状のボタン
Example#
Props#
<button>
要素をベースにしています。 表にない属性もprop経由で使用できます(classNameは除く)。
Name | Type | Default | Description |
---|---|---|---|
data-* optional | string | - | Custom data attributes |
type |
| 'button' | - |
Feature#
カード状のボタンです。エリアを専有してゆったりと見せるため、内容の把握がしやすく、操作も容易なUIです。
- アクションや回答の選択に集中させたい
- モバイル環境で操作しやすいUIを提供したい
などのユースケースが考えられます。
ただし、あくまでボタンです。カード状のリンクが必要な場合は<LinkCard>
も検討してください。
Usage#
type
属性はデフォルトbutton
です。フォームの送信ボタンとして使用したい場合はsubmit
を指定してください
Keyboard Interaction#
- Tabキーでフォーカスすることができます
- フォーカスした状態でEnterまたはSpaceキーを押下した場合、マウスクリックと同じ操作が発生します