バッジ
メインの情報に状態や状況をグラフィカルに表示するコンポーネントです。デジタル庁デザインシステムではチップラベルとして定義されています。
種類
ラベル
ラベル
ラベル
ラベル
html
<span class="badge">ラベル</span>
<span class="badge badge-outline">ラベル</span>
<span class="badge badge-filled-outline">ラベル</span>
<span class="badge badge-fill">ラベル</span>色
gray
ラベル
ラベル
ラベル
ラベル
html
<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
ラベル
ラベル
ラベル
ラベル
html
<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
ラベル
ラベル
ラベル
ラベル
html
<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
ラベル
ラベル
ラベル
ラベル
html
<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
ラベル
ラベル
ラベル
ラベル
html
<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
ラベル
ラベル
ラベル
ラベル
html
<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
ラベル
ラベル
ラベル
ラベル
html
<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
ラベル
ラベル
ラベル
ラベル
html
<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
ラベル
ラベル
ラベル
ラベル
html
<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
ラベル
ラベル
ラベル
ラベル
html
<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
ラベル
ラベル
ラベル
ラベル
html
<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>