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