Badges

Badges convey dynamic information, such as counts or status. A badge can include labels or numbers
Material Design Guidelines: Buttons
Basic
inbox inbox inbox inbox
Label Label Label Label 
        
  <wfc-icon-button>
    <wfc-badge>0</wfc-badge>
    <wfc-icon>inbox</wfc-icon>
  </wfc-icon-button>
  
  <wfc-icon-button>
    <wfc-badge hide-value>1</wfc-badge>
    <wfc-icon>inbox</wfc-icon>
  </wfc-icon-button>
  
  <wfc-icon-button>
    <wfc-badge>99</wfc-badge>
    <wfc-icon>inbox</wfc-icon>
  </wfc-icon-button>
  
  <wfc-icon-button>
    <wfc-badge>1000</wfc-badge>
    <wfc-icon>inbox</wfc-icon>
  </wfc-icon-button>
  
  <wfc-button>
    <wfc-badge>0</wfc-badge>
    Label
  </wfc-button>
  
  <wfc-button>
    <wfc-badge hide-value>1</wfc-badge>
    Label
  </wfc-button>
  
  <wfc-button>
    <wfc-badge>99</wfc-badge>
    Label
  </wfc-button>
  
  <wfc-button>
    <wfc-badge>1000</wfc-badge>
    Label
  </wfc-button>
        
      
        
  // Update using value
  document.querySelector('wfc-badge').value = 99;

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