バッジ

利用者に補足情報や状態を伝えるときに使います。

  • 流し読みでも理解できるくらい短いラベルにします。
  • ラベルは「する」「なる」といった助動詞は付けず、1つの名詞に留めるようにします。
  • バッジの大きさは相対値が設定されているので、親要素の文字の大きさによって調整されます。
  • ヘッダーやテーブルアイテムなど、何の補足情報か分かるような配置にします。
  • 角丸のバッジが必要な場合は .badge-pill を追加します。

Default Primary Info Danger

Default Primary Info Danger

<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-danger">Danger</span>

<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-danger">Danger</span>

Movable Type New

Movable Type New

Movable Type New

Movable Type New

<h1>Movable Type <span class="badge badge-default">New</span></h1>