バッジ
メインの情報に状態や状況をグラフィカルに表示するコンポーネントです。デジタル庁デザインシステムではチップラベル として定義されています。
バッジNew
<h2 class="h2">バッジ<span class="badge">New</span></h2>種類
ラベル
ラベル
ラベル
ラベル
<span class="badge">ラベル</span>
<span class="badge badge-outline">ラベル</span>
<span class="badge badge-filled-outline">ラベル</span>
<span class="badge badge-fill">ラベル</span>色
gray
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-gray">ラベル</span>
<span class="badge badge-gray badge-outline">ラベル</span>
<span class="badge badge-gray badge-filled-outline">ラベル</span>
<span class="badge badge-gray badge-fill">ラベル</span>blue
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-blue">ラベル</span>
<span class="badge badge-blue badge-outline">ラベル</span>
<span class="badge badge-blue badge-filled-outline">ラベル</span>
<span class="badge badge-blue badge-fill">ラベル</span>lightblue
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-lightblue">ラベル</span>
<span class="badge badge-lightblue badge-outline">ラベル</span>
<span class="badge badge-lightblue badge-filled-outline">ラベル</span>
<span class="badge badge-lightblue badge-fill">ラベル</span>cyan
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-cyan">ラベル</span>
<span class="badge badge-cyan badge-outline">ラベル</span>
<span class="badge badge-cyan badge-filled-outline">ラベル</span>
<span class="badge badge-cyan badge-fill">ラベル</span>green
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-green">ラベル</span>
<span class="badge badge-green badge-outline">ラベル</span>
<span class="badge badge-green badge-filled-outline">ラベル</span>
<span class="badge badge-green badge-fill">ラベル</span>lime
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-lime">ラベル</span>
<span class="badge badge-lime badge-outline">ラベル</span>
<span class="badge badge-lime badge-filled-outline">ラベル</span>
<span class="badge badge-lime badge-fill">ラベル</span>yellow
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-yellow">ラベル</span>
<span class="badge badge-yellow badge-outline">ラベル</span>
<span class="badge badge-yellow badge-filled-outline">ラベル</span>
<span class="badge badge-yellow badge-fill">ラベル</span>orange
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-orange">ラベル</span>
<span class="badge badge-orange badge-outline">ラベル</span>
<span class="badge badge-orange badge-filled-outline">ラベル</span>
<span class="badge badge-orange badge-fill">ラベル</span>red
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-red">ラベル</span>
<span class="badge badge-red badge-outline">ラベル</span>
<span class="badge badge-red badge-filled-outline">ラベル</span>
<span class="badge badge-red badge-fill">ラベル</span>magenta
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-magenta">ラベル</span>
<span class="badge badge-magenta badge-outline">ラベル</span>
<span class="badge badge-magenta badge-filled-outline">ラベル</span>
<span class="badge badge-magenta badge-fill">ラベル</span>purple
ラベル
ラベル
ラベル
ラベル
<span class="badge badge-purple">ラベル</span>
<span class="badge badge-purple badge-outline">ラベル</span>
<span class="badge badge-purple badge-filled-outline">ラベル</span>
<span class="badge badge-purple badge-fill">ラベル</span>