Badge

A small marker for providing context and semantic meaning to parts of a UI—a pending application, a new feature, a warning message etc.

Default badge

Use a default badge to mark content which is notable but not particularly significant.

Default 
<span class="Badge">Default</span>

Semantic badges

When content is more significant, you can apply a stronger semantic.

Primary
Positive
Intermediary
Negative
Gold
Bronze 
<!-- Signifies new, important or active content. -->
<span class="Badge primary">Primary</span>

<!-- Signifies secure, successful or completed content. -->
<span class="Badge positive">Positive</span>

<!-- Signifies a warning or an intermediary, pending or incomplete state. -->
<span class="Badge intermediary">Intermediary</span>

<!-- Signifies an error, some dangerous content or a rejected state. -->
<span class="Badge negative">Negative</span>

<!-- Signifies premium content. -->
<span class="Badge gold">Gold</span>

<!-- Signifies subpremium content. -->
<span class="Badge bronze">Bronze</span>

Sizes

There are two sizes to choose from, applied using an additional class. Size 1 is the default.

Size 1
Size 2 
<span class="Badge size1">Size 1</span>
<span class="Badge size2">Size 2</span>

Badge with icon

You can add an icon to support the badge text and provide visual reinforcement. Use a 12dp icon with default badges and a 16dp icon with larger badges. The icon is wrapped in a div to provide the necessary margin.

Default
Default 
<span class="Badge">
  <div class="mr-1">
    <svg class="Icon" width="12" height="12" 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>
      <line x1="12" y1="8" x2="12" y2="12"></line>
      <line x1="12" y1="16" x2="12" y2="16"></line>
    </svg>
  </div>
  Default
</span>

<span class="Badge size2">
  <div class="mr-1">
    <svg class="Icon" width="16" height="16" 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>
      <line x1="12" y1="8" x2="12" y2="12"></line>
      <line x1="12" y1="16" x2="12" y2="16"></line>
    </svg>
  </div>
  Default
</span>