ButtonCard
View on GitHub: Copmonent
View on GitHubカード状のボタン
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キーを押下した場合、マウスクリックと同じ操作が発生します