Badge

Default

Simple Badges.

Primary Success Small Outline Subtle 99+

Code

<span class="simpui-badge primary">Primary</span>
<span class="simpui-badge success">Success</span>
<span class="simpui-badge danger sm">Small</span>
<span class="simpui-badge outline warning">Outline</span>
<span class="simpui-badge subtle md">Subtle</span>

With Close Option

Simple badges with close option.

Info Info Info Info Info

Code

<span class="simpui-badge primary">
  Info
  <button class="simpui-badge-close" aria-label="Remove">&times;</button>
</span>
<span class="simpui-badge success">
  Info
  <button class="simpui-badge-close" aria-label="Remove">&times;</button>
</span>
<span class="simpui-badge danger">
  Info
  <button class="simpui-badge-close" aria-label="Remove">&times;</button>
</span>
<span class="simpui-badge outline warning">
  Info
  <button class="simpui-badge-close" aria-label="Remove">&times;</button>
</span>
<span class="simpui-badge subtle md">
  Info
  <button class="simpui-badge-close" aria-label="Remove">&times;</button>
</span>