Badgeコンポーネント
新着・更新状態を表示する円形バッジのデモとテスト
基本的な使用
Badgeコンポーネントの基本的な使用方法と各タイプの表示例です。
基本的なバッジ
TSX
// 新着バッジ
<Badge type="new" />
// 更新バッジ
<Badge type="updated" />基本的なバッジの表示
新着:
更新:
サイズバリエーション
TSX
// 小サイズ (6px)
<Badge type="new" size="sm" />
<Badge type="updated" size="sm" />
// 標準サイズ (8px) - デフォルト
<Badge type="new" size="base" />
<Badge type="updated" size="base" />サイズバリエーションの比較
小サイズ:
標準サイズ:
表示制御とアクセシビリティ
TSX
// 条件付き表示
<Badge type="new" show={hasNewContent} />
// カスタムツールチップ
<Badge type="new" title="新着記事があります" />
<Badge type="updated" title="最近更新されました" />
// カスタムアクセシブルラベル
<Badge
type="new"
ariaLabel="新着コンテンツが3件あります"
title="新着: 3件"
/>表示制御とツールチップの例
表示制御:(2つ目は非表示)
ツールチップ:
インライン配置
テキストと同じ行に表示する上付きバッジの使用例です。
見出し・段落内での使用
TSX
// 見出し内での使用
<h2>
記事タイトル
<Badge type="new" inline className="ml-2" />
</h2>
// 段落内での使用（上付き表示）
<p>
最新の記事
<Badge type="updated" inline size="sm" className="ml-1" />
を公開しました。
</p>見出し・段落内でのインライン表示
記事タイトル
プロジェクト名
最新の記事を公開しました。
flexレイアウトでの使用
TSX
// flexレイアウトでの使用
<div className="flex items-center space-x-2">
<h3>プロジェクト名</h3>
<Badge type="updated" inline />
</div>
// リスト項目での使用
<div className="flex items-center space-x-2">
<span>リスト項目</span>
<Badge type="new" inline size="sm" />
</div>
// インライン要素としての使用
<div className="inline-flex items-center space-x-2">
<span>通知項目</span>
<Badge type="new" inline size="sm" />
</div>flexレイアウトでのインライン配置
プロジェクト名
リスト項目
通知項目
相対配置
カードや要素の上にオーバーレイ表示するバッジの使用例です。
カード上での配置
TSX
// カード上での配置
<div className="relative">
<Card>
<h3>記事タイトル</h3>
<p>記事の内容...</p>
</Card>
<Badge
type="new"
className="absolute top-2 right-2"
title="新着記事"
/>
</div>カード上でのオーバーレイ表示
記事カード
記事の詳細内容がここに表示されます。
2025/09/04 公開
プロジェクトカード
プロジェクトの説明と詳細情報です。
2025/09/02 更新
通知・ボタンでの使用
TSX
// 通知アイテムでの使用
<div className="relative p-3 border rounded">
<NotificationItem />
<Badge
type="new"
size="sm"
className="absolute top-1 right-1"
title="新着通知"
/>
</div>
// ボタン上での配置
<div className="relative">
<Button>メニューボタン</Button>
<Badge
type="updated"
size="sm"
className="absolute top-2 right-2"
title="更新あり"
/>
</div>通知・ボタンでのバッジ表示
通知アイテム
配置バリエーション
TSX
// 要素の境界内に配置（推奨：8px内側）
<Badge className="absolute top-2 right-2" />
// より少ない内側配置
<Badge className="absolute top-1 right-1" />
// 境界ギリギリに配置
<Badge className="absolute top-0 right-0" />配置パターンの比較
配置例: top-2 right-2（推奨）
配置例: top-0 right-0（境界ギリギリ）
ナビゲーションでの使用
メニュー項目やリンクでのバッジ使用例です。
インラインメニューでの使用
TSX
// インラインメニューでの使用
<nav>
<ul className="flex space-x-6">
<li>
<Link href="/blog">
ブログ
<Badge type="new" inline size="sm" className="ml-1" />
</Link>
</li>
<li>
<Link href="/projects">
プロジェクト
<Badge type="updated" inline size="sm" className="ml-1" />
</Link>
</li>
</ul>
</nav>ナビゲーションリンクでのインライン表示
インラインメニュー
ボタンメニューでの使用
TSX
// ボタンメニューでの使用
<button className="relative px-4 py-2 bg-gray-200 rounded-md">
メッセージ
<Badge
type="new"
size="sm"
className="absolute top-2 right-2"
title="新着メッセージ"
/>
</button>ボタンスタイルメニューでのオーバーレイ
ボタンスタイルメニュー
タブナビゲーションでの使用
TSX
// タブナビゲーションでの使用
<nav className="flex space-x-8">
<a href="#" className="py-2 px-1 border-b-2 border-transparent">
記事
<Badge type="new" inline size="sm" className="ml-1" />
</a>
<a href="#" className="py-2 px-1 border-b-2 border-transparent">
設定
<Badge type="updated" inline size="sm" className="ml-1" />
</a>
</nav>