バッジ・タグ（Badge / Tag）
通知数・ステータス・ラベルを視覚的に表現するUIの実装を4つのアプローチで比較。 カウントバッジ・ステータスドット・Ribbon・閉じるタグ・選択可能タグなど、実践的なパターンをインタラクティブに確認できます。
Mantine Badge / Indicator / Pill
Mantine の Badge は filled・outline・light・dot・gradient の5バリアントと xs〜xl の5サイズを持つ汎用ラベル。 Indicator はアバターやアイコンへの通知バッジ重ねがけ用コンポーネントで、 processing prop でパルスアニメーションも追加できる。 Pill は表示専用タグコンポーネントで、withRemoveButton で削除ボタンを追加できる。
5バリアント5サイズIndicatorprocessing アニメーションleftSection / rightSectionPill（表示用タグ）withRemoveButtonPill.Group
読み込み中...
タグ入力との棲み分け：Pill はタグの「表示」用コンポーネントです。タグの「入力・追加」が必要な場合は タグ入力（TagsInput / PillsInput） を参照してください。
tsx
'use client';
import { MantineProvider, Badge, Indicator, Avatar, Group } from '@mantine/core';
import '@mantine/core/styles.css';
export function MantineBadgeTagDemo() {
return (
<MantineProvider>
<Group gap="md">
<Badge variant="filled" color="blue">filled</Badge>
<Badge variant="outline" color="green">outline</Badge>
<Badge variant="light" color="red">light</Badge>
<Badge variant="dot" color="violet">dot</Badge>
</Group>
<Group gap="md" mt="md">
<Indicator label="3" size={16}>
<Avatar radius="xl" />
</Indicator>
<Indicator processing color="green">
<Avatar radius="xl" />
</Indicator>
</Group>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったバッジ・タグを実装してください。 - 使用ライブラリ: @mantine/core の Badge・Indicator・Pill - filled・outline・light・dot・gradient の5バリアントを持つ Badge を実装すること - Indicator コンポーネントでカウントバッジをアバターやボタンに重ねて表示できること - Indicator の processing prop でパルスアニメーションを実装すること - Badge の leftSection / rightSection を使って閉じるボタン付きタグを実装し、クリックで削除できること - xs〜xl の5サイズ切り替えを実装すること - @mantine/core の Pill コンポーネントで表示専用タグを実装すること - withRemoveButton prop で削除ボタン付きPillを実装し、クリックで該当タグを削除できること - Pill.Group で複数のPillをまとめて表示すること - Pillの子要素にアイコンspanを含めてアイコン付きPillを実装すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | shadcn/ui | CSS カスタム |
|---|---|---|---|---|
| ラベル系バッジ | ✅ Badge（5バリアント） | ✅ Tag（closable・preset color） | ✅ Badge（4バリアント） | ⚠️ light スタイルを自作 |
| カウントバッジ | ✅ Indicator（要素に重ねる） | ✅ Badge（count / dot） | ❌ 標準では非対応 | ⚠️ absolute配置で自作 |
| ステータスドット | ⚠️ dot variant で代替 | ✅ Badge status prop | ❌ 標準では非対応 | ⚠️ CSS animation で自作 |
| Ribbon型バッジ | ❌ 標準では非対応 | ✅ Badge.Ribbon | ❌ 標準では非対応 | ⚠️ absolute + 自作 |
| 閉じるタグ | ⚠️ rightSection に × ボタン | ✅ Tag closable prop | ⚠️ className で自作 | ⚠️ 手動で × ボタン追加 |
| 選択可能タグ | ⚠️ Pill + state で実装可 | ✅ Tag.CheckableTag | ⚠️ state で実装可 | ⚠️ state で自作 |
| 表示用Pill | ✅ Pill（withRemoveButton） | ⚠️ Tag で代替 | ⚠️ Badge で代替 | ⚠️ 自作 |
| パルスアニメーション | ✅ Indicator processing | ⚠️ status=processing | ❌ 標準では非対応 | ⚠️ CSS animation で自作 |
| カラープリセット | ✅ Mantine カラーシステム | ✅ 11色プリセット | ✅ Tailwind クラスで自由指定 | ✅ 任意のCSSカラー |
| バンドルサイズ | ⚠️ 中（全体で大） | ⚠️ 中（全体で大） | ✅ 軽量（コンポーネント単位） | ✅ ゼロ追加 |
選択のポイント
- Mantine — Badge の5バリアント（filled / outline / light / dot / gradient）が揃っており、 Indicator で通知ドットをアバターやアイコンに手軽に重ねられる。 processing アニメーション付きの Indicator はオンライン状態やリアルタイム更新の表示に最適。 Pill コンポーネントは表示専用のタグ表現に特化しており、
withRemoveButtonで削除ボタンを追加できる。タグの入力・追加が必要な場合はTagsInputやPillsInputを使用する。 - Ant Design — Badge.Ribbon はカード角へのリボン貼り付けを一発で実現でき、セール・NEWラベルに便利。 Tag.CheckableTag はフィルタ系UIに直感的に使えて、closable タグも onClose だけで実装できる。 Tag のプリセットカラー11色も豊富。
- shadcn/ui — シンプルな Badge コンポーネントひとつで4バリアントに対応。className で Tailwind クラスを追加するだけで カラーや角丸を自由に調整でき、既存のデザインシステムに自然に馴染む。 カウントバッジやステータスドットは標準非対応のため、それらが必要な場合は他の選択肢を検討する。
- CSS カスタム — デザインシステムの色に完全準拠させたい場合に最適。 light スタイルのタグ（背景色 + ボーダー）はシンプルな実装でありながら視認性が高く、 選択可能タグも state だけで簡単に実装できる。依存ゼロで軽量。