バッジ・タグ（Badge / Tag）

通知数・ステータス・ラベルを視覚的に表現するUIを、Mantine・Ant Design・Chakra UI・shadcn/ui・MUI・CSS/カスタムの6種で比較。カウントバッジ・ステータスドット・Ribbon・閉じるタグ・選択可能タグなど、実践的なパターンをインタラクティブに確認できます。

@mantine/corev9.1.1 antdv6.3.7 @chakra-ui/reactv3.34.0 @mui/materialv9.0.0 shadcn/uiv4.2.0

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	Chakra UI	shadcn/ui	MUI	CSS カスタム
ラベル系バッジ	✅ Badge（5バリアント）	✅ Tag（closable・preset color）	✅ Badge（4バリアント）	✅ Badge（4バリアント）	✅ Chip（filled・outlined）	⚠️ light スタイルを自作
カウントバッジ	✅ Indicator（要素に重ねる）	✅ Badge（count / dot）	⚠️ 手動で absolute 配置	❌ 標準では非対応	✅ Badge（数値・ドット）	⚠️ absolute配置で自作
ステータスドット	⚠️ dot variant で代替	✅ Badge status prop	⚠️ 手動で実装	❌ 標準では非対応	✅ variant="dot"	⚠️ CSS animation で自作
Ribbon型バッジ	❌ 標準では非対応	✅ Badge.Ribbon	⚠️ 非対応	❌ 標準では非対応	❌ 標準では非対応	⚠️ absolute + 自作
閉じるタグ	⚠️ rightSection に × ボタン	✅ Tag closable prop	⚠️ 手動で × ボタン追加	⚠️ className で自作	✅ onDelete prop	⚠️ 手動で × ボタン追加
選択可能タグ	⚠️ Pill + state で実装可	✅ Tag.CheckableTag	⚠️ state で自作	⚠️ state で実装可	⚠️ state で実装可	⚠️ state で自作
表示用Pill	✅ Pill（withRemoveButton）	⚠️ Tag で代替	⚠️ Badge で代替	⚠️ Badge で代替	✅ Chip（avatar prop）	⚠️ 自作
パルスアニメーション	✅ Indicator processing	⚠️ status=processing	❌ 標準では非対応	❌ 標準では非対応	❌ 標準では非対応	⚠️ CSS animation で自作
カラープリセット	✅ Mantine カラーシステム	✅ 11色プリセット	✅ colorPalette（多数）	✅ Tailwind クラスで自由指定	✅ 6種（primary/secondary/success/error/warning/info）	✅ 任意のCSSカラー
バンドルサイズ	⚠️ 中（全体で大）	⚠️ 中（全体で大）	⚠️ 中（emotion含む）	✅ 軽量（コンポーネント単位）	⚠️ 中（Emotion込み）	✅ ゼロ追加

選択のポイント

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色も豊富。
Chakra UI — colorPalette prop でカラーを柔軟に切り替えられるシンプルな Badge コンポーネント。バリアントは solid・outline・subtle・surface の4種類。カウントバッジや Ribbon は標準非対応のため、これらが必要な場合は Ant Design を検討する。
MUI — 週670万DLと圧倒的なシェアを誇るMaterial Design準拠のライブラリ。エンタープライズ〜スタートアップまで幅広く採用され、ドキュメントや事例が豊富。Emotion（CSS-in-JS）を使用するため、Tailwind CSS v4との併用時はスタイルをMUI側のpropsで制御することを推奨。
shadcn/ui — シンプルな Badge コンポーネントひとつで4バリアントに対応。className で Tailwind クラスを追加するだけでカラーや角丸を自由に調整でき、既存のデザインシステムに自然に馴染む。カウントバッジやステータスドットは標準非対応のため、それらが必要な場合は他の選択肢を検討する。
CSS カスタム — デザインシステムの色に完全準拠させたい場合に最適。 light スタイルのタグ（背景色 + ボーダー）はシンプルな実装でありながら視認性が高く、選択可能タグも state だけで簡単に実装できる。依存ゼロで軽量。

バッジ・タグは、コンテンツに付随する小さなラベルUI。通知件数・ステータス・カテゴリ分類などを視覚的に示すために使われる。

通知件数の表示（SNSのアイコン右上）・商品のステータス表示（NEW・SALE）・記事のカテゴリタグ・ユーザーの役割ラベルなど、情報を簡潔に付加したい場面で使われる。

主なバリエーション