paper-badge

<paper-badge> is a circular text badge that is displayed on the top right corner of an element, representing a status or a notification. It will badge the anchor element specified in the for attribute, or, if that doesn't exist, centered to the parent node containing it.

Example:

<div style="display:inline-block">
  <span>Inbox</span>
  <paper-badge label="3"></paper-badge>
</div>
<div>
  <paper-button id="btn">Status</paper-button>
  <paper-badge for="btn" label="♥︎"></paper-badge>
</div>

Styling

The following custom properties and mixins are available for styling:

Custom property	Description	Default
--paper-badge-background	The background color of the badge	--accent-color
--paper-badge-opacity	The opacity of the badge	1.0
--paper-badge-text-color	The color of the badge text	white
--paper-badge-width	The width of the badge circle	22px
--paper-badge-height	The height of the badge circle	22px
--paper-badge-margin-left	Optional spacing added to the left of the badge.	0px
--paper-badge-margin-bottom	Optional spacing added to the bottom of the badge.	0px
--paper-badge	Mixin applied to the badge	{}