CSS のみの Tailwind CSS バッジ (プライマリ、セカンダリ、アクセント、情報、成功、警告、エラーのバリアント付き)。ソフト、アウトライン、ゴーストのスタイル、サイズは xs ～ lg です。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
バッジ コンポーネントは、ステータス情報を強調表示、分類、または表示するために使用される小さくてコンパクトなラベルです。セマンティック HTML と Tailwind CSS で構築されたバッジは、複数のサイズ、色、スタイルをサポートしており、テーブル、カード、ユーザー プロファイル、通知システムに柔軟に統合できます。軽量でアクセスしやすいバッジは、視覚的に乱雑さを加えることなく情報階層を強化します。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| badge | ベース | 小さなインラインラベル |
| badge-outline | スタイル | 色付きの境界線を持つ透明な塗りつぶし |
| badge-soft | スタイル | 落ち着いた色合いの背景 |
| badge-ghost | スタイル | 境界線のない微妙な背景 |
| badge-dashed | スタイル | 破線の境界線スタイル |
| badge-pill | スタイル | 完全に丸い錠剤の形状 |
| badge-rounded | スタイル | 適度な丸め |
| badge-circle | スタイル | 単一の文字または数字の等幅の円 |
| badge-square | スタイル | 丸みのない正方形 |
| badge-xs | サイズ | 極小 |
| badge-sm | サイズ | 小さい |
| badge-md | サイズ | 中 (デフォルト) |
| badge-lg | サイズ | 大きい |
| badge-xl | サイズ | 特大 |
| badge-2xl | サイズ | 特大×2 |
| badge-primary | 色 | 主要なテーマカラー |
| badge-secondary | 色 | 二次テーマカラー |
| badge-accent | 色 | アクセントのテーマカラー |
| badge-neutral | 色 | ニュートラルなテーマカラー |
| badge-info | 色 | 情報セマンティックカラー |
| badge-success | 色 | 成功のセマンティックカラー |
| badge-warning | 色 | 警告セマンティックカラー |
| badge-error | 色 | エラー セマンティック カラー |
基本的な使い方
Badge
<span class="badge">Badge</span> |
<span className="badge">Badge</span> |
バッジのサイズ
Xsmall
Small
Medium
Large
Xlarge
2XLarge
html
1 2 3 4 5 6 | <span class="badge badge-xs">Xsmall</span> <span class="badge badge-sm">Small</span> <span class="badge badge-md">Medium</span> <span class="badge badge-lg">Large</span> <span class="badge badge-xl">Xlarge</span> <span class="badge badge-2xl">2XLarge</span> |
バッジの色
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge">Default</span> <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-accent">Accent</span> <span class="badge badge-info">Info</span> <span class="badge badge-success">Success</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-error">Error</span> <span class="badge badge-neutral">Neutral</span> |
バッジのスタイル
ソフトバッジ
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-soft">Default</span> <span class="badge badge-soft badge-primary">Primary</span> <span class="badge badge-soft badge-secondary">Secondary</span> <span class="badge badge-soft badge-accent">Accent</span> <span class="badge badge-soft badge-info">Info</span> <span class="badge badge-soft badge-success">Success</span> <span class="badge badge-soft badge-warning">Warning</span> <span class="badge badge-soft badge-error">Error</span> <span class="badge badge-soft badge-neutral">Neutral</span> |
アウトラインバッジ
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-outline">Default</span> <span class="badge badge-outline badge-primary">Primary</span> <span class="badge badge-outline badge-secondary">Secondary</span> <span class="badge badge-outline badge-accent">Accent</span> <span class="badge badge-outline badge-info">Info</span> <span class="badge badge-outline badge-success">Success</span> <span class="badge badge-outline badge-warning">Warning</span> <span class="badge badge-outline badge-error">Error</span> <span class="badge badge-outline badge-neutral">Neutral</span> |
破線のバッジ
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-dashed">Default</span> <span class="badge badge-dashed badge-primary">Primary</span> <span class="badge badge-dashed badge-secondary">Secondary</span> <span class="badge badge-dashed badge-accent">Accent</span> <span class="badge badge-dashed badge-info">Info</span> <span class="badge badge-dashed badge-success">Success</span> <span class="badge badge-dashed badge-warning">Warning</span> <span class="badge badge-dashed badge-error">Error</span> <span class="badge badge-dashed badge-neutral">Neutral</span> |
ゴーストバッジ
Ghost
html
<span class="badge badge-ghost">Ghost</span> |
バッジの形状
丸いバッジ
10
html
<span class="badge badge-error badge-rounded">10</span> |
ピルバッジ
Pill badge
html
<span class="badge badge-warning badge-pill">Pill badge</span> |
スクエアバッジ
99+
html
<span class="badge badge-neutral badge-square">99+</span> |
サークルバッジ
html
1 2 3 | <span class="badge badge-success badge-circle"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg> </span> |
バッジインジケーター
空のバッジは、ステータス インジケーターや通知ドットに最適です。
html
1 2 3 4 5 | <span class="badge badge-primary badge-circle badge-lg"></span> <span class="badge badge-primary badge-lg"></span> <span class="badge badge-primary badge-md"></span> <span class="badge badge-primary badge-sm"></span> <span class="badge badge-primary badge-xs"></span> |
バッジの構成
バッジをアイコンと統合するか、ボタンなどの他のコンポーネント内にバッジをネストします。
アイコン付きバッジ
Info
Success
Warning
Error
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <span class="badge badge-info"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> Info </span> <span class="badge badge-success"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m9 12 2 2 4-4"></path> </svg> Success </span> <span class="badge badge-warning"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path> <path d="M12 9v4"></path> <path d="M12 17h.01"></path> </svg> Warning </span> <span class="badge badge-error"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m4.9 4.9 14.2 14.2"></path> </svg> Error </span> |
ボタンの内側にバッジ
html
1 2 3 4 5 6 7 8 | <button class="btn btn-primary btn-sm btn-active"> Message <span class="badge badge-primary badge-xs">+49</span> </button> <button class="btn btn-sm"> Inbox <span class="badge badge-xs badge-primary">+27</span> </button> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な バッジ クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。