Logo: Ubie Vitals

LinkCard

View on GitHub: Copmonent

表現力豊かで、遷移先の内容の一部を提示可能なリンク

Example#

Props#

NameTypeDefaultDescription
className
optional
string-CSSのクラス * @deprecated マージンなどをつけたい場合は<Box>や<Stack>を使ってください
data-*
optional
string-Custom data attributes
description
optional
string-説明のテキスト
href
optional
string-遷移先URL
icon
optional
ComponentType
ReactElement
'ubie-iconsのアイコン名'
-アイコン
render
optional
ReactElement-レンダリングされる要素を変更。フレームワークのリンクコンポーネントなどを指定
size
'medium'
'small'
'medium'サイズ
title
required
string-見出しのテキスト

Feature#

  • タイトル以外にも、アイコンや説明などの情報/表現を含んだリンクを提供します
  • リンク先の情報を事前に提示できるため、ユーザーが内容を把握しやすくなります
  • 複数のリンクカードが列挙されていた場合に、それぞれを差別化しやすい特徴があります
  • エリアを大きくとるため、タップがしやすいメリットがあります
  • コンポーネントの全体がリンクとして扱われます
  • いわゆる「カード」の形をしています

Usage#

  • description や icon propには、遷移先のページと関連する情報を提示します
    • 無関係の内容を記載すると、遷移後にユーザーが混乱する可能性があります
  • description（遷移先に関わるコンテンツ）は必須です。もし description が必要ないのであれば、別のタップエリアが確保されたリストなどが適しているかも知れません
  • 広すぎるエリアへ <LinkCard> を配置してはいけません。長文の description の場合は読みづらくなります

Accessibility#

Keyboard Interaction#

  • Tab キーでフォーカスすることができます
  • ネィティブの <a> と同様の操作が可能です
    • フォーカスを受け取り、Enterキーで押下できます
    • Spaceキーでは操作できません