# Paper badge A simple text or icon indicator that can be attached to a component. [https://www.webcomponents.org/element/@polymer/paper-badge](https://www.webcomponents.org/element/@polymer/paper-badge) ## Usage There are two ways to use this component. You can either directly link the badge to a specific anchor using the component ID or link the badge indirectly via the DOM structure. ### Direct link ``` Label anchor = new Label("Anchor label"); anchor.setId("anchor"); PaperBadge badge = new PaperBadge(anchor); badge.setIcon(VaadinIcon.LIGHTBULB); add(anchor); ``` In this case the badge get automatically attached/detached to/from the UI when the anchor component gets attached/detached. This only works in Chrome browser. ### Indirect link ``` Button anchor = new Button("Anchor button"); PaperBadge badge = new PaperBadge(); badge.setLabel("4"); badge.setWidth("50px"); badge.setHeight("50px"); Div container = new Div(anchor, badge); add(container); ``` In this case the anchor and badge are linked by being direct siblings in a separate Div. For convenience sake there is a BadgeExtension class included which already takes care of this: ``` VerticalLayout anchor = new VerticalLayout(); anchor.add(new Label("Container content")); BadgeExtension badgeExtension = new BadgeExtension<>(anchor); badgeExtension.getBadge().setIcon(VaadinIcon.AIRPLANE); add(badgeExtension); ```