Badges

Example

inbox

Label

<mc-icon-button>
  <!-- 0 === no value -->
  <mc-badge value="0"></mc-badge>
  <mc-icon>inbox</mc-icon>
</mc-icon-button>

<mc-icon-button>
  <mc-badge hide-value value="0"></mc-badge>
  <mc-icon>inbox</mc-icon>
</mc-icon-button>

<mc-icon-button>
  <mc-badge value="99"></mc-badge>
  <mc-icon>inbox</mc-icon>
</mc-icon-button>

<mc-icon-button>
  <mc-badge value="1000"></mc-badge>
  <mc-icon>inbox</mc-icon>
</mc-icon-button>

<mc-button>
  Label
  <mc-badge value="0"></mc-badge>
</mc-button>

<mc-button>
  Label
  <mc-badge hide-value value="1"></mc-badge>
</mc-button>

<mc-button>
  Label
  <mc-badge value="99"></mc-badge>
</mc-button>

<mc-button>
  Label
  <mc-badge value="1000"></mc-badge>
</mc-button>

// Update using value
document.querySelector('mc-badge').value = 99;

// Update using value. 1000 -> 999+
document.querySelector('mc-badge').value = 1000;

Style

CSS variables that allow you override default values

/* Optional variables for overriding */
  
--mc-badge-container-color: var(--mc-error);
--mc-badge-text-color: var(--mc-on-error);