Menu California Design System

Badge

Put status counters on buttons, links, and data displays.

<a href="#" class="ca-button">
  <ca-badge>7</ca-badge>
  Upload all
</a>
<hr />
<a href="#" class="ca-button ca-button-utility">
  <ca-badge color="red">99+</ca-badge>
  <ca-icon name="mail"></ca-icon>
</a>
<hr />
<a href="#" class="ca-button ca-button-utility">
  <ca-icon name="account"></ca-icon>
  <ca-badge color="green"></ca-badge>
  Utility
</a>