Example
<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);