Badges

Example

inbox

Label

<mc-icon-button>
  
  <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);