Added badge examples for buttons and button groups.

lib/pixi/button.html

@@ -32,13 +32,13 @@
 const app = new PIXIApp({
     view: canvas,
     width: 900,
-    height: 420,
+    height: 520,
     transparent: false
 }).setup().run()
 
-let button1 = new Button({x: 10, y: 10})
+const button1 = new Button({x: 10, y: 10})
 
-let button2 = new Button({
+const button2 = new Button({
     theme: 'red',
     x: 60,
     y: 10,
@@ -49,7 +49,7 @@ let button2 = new Button({
     }
 })
 
-let button3 = new Button({
+const button3 = new Button({
     x: 150,
     y: 10,
     label: 'Checkbox button',
@@ -59,7 +59,7 @@ let button3 = new Button({
     }
 })
 
-let button4 = new Button({
+const button4 = new Button({
     x: 330,
     y: 10,
     label: 'Disabled button',
@@ -69,14 +69,14 @@ let button4 = new Button({
     }
 })
 
-let button5 = new Button({
+const button5 = new Button({
     x: 500,
     y: 10,
     label: 'Active button',
     active: true
 })
 
-let button6 = new Button({
+const button6 = new Button({
     x: 650,
     y: 10,
     label: 'Active disabled button',
@@ -85,7 +85,7 @@ let button6 = new Button({
     disabled: true
 })
 
-let button7 = new Button({
+const button7 = new Button({
     x: 10,
     y: 70,
     label: 'Icon button',
@@ -94,7 +94,7 @@ let button7 = new Button({
     icon: 'arrow_back'
 })
 
-let button8 = new Button({
+const button8 = new Button({
     x: 180,
     y: 70,
     theme: 'light',
@@ -104,7 +104,7 @@ let button8 = new Button({
     iconPosition: 'right'
 })
 
-let button9 = new Button({
+const button9 = new Button({
     x: 10,
     y: 130,
     type: 'checkbox',
@@ -112,7 +112,7 @@ let button9 = new Button({
     iconActive: 'pause'
 })
 
-let button10 = new Button({
+const button10 = new Button({
     x: 60,
     y: 130,
     icon: 'stop',
@@ -121,14 +121,14 @@ let button10 = new Button({
     }
 })
 
-let button11 = new Button({
+const button11 = new Button({
     x: 110,
     y: 130,
     icon: 'star_border',
     tooltip: 'Bookmark'
 })
 
-let button12 = new Button({
+const button12 = new Button({
     x: 10,
     y: 190,
     icon: 'airplay',
@@ -141,7 +141,7 @@ let button12 = new Button({
     type: 'checkbox'
 })
 
-let button13 = new Button({
+const button13 = new Button({
     x: 50,
     y: 190,
     label: 'Button',
@@ -169,7 +169,7 @@ let button13 = new Button({
     type: 'checkbox'
 })
 
-let button14 = new Button({
+const button14 = new Button({
     x: 10,
     y: 250,
     label: 'Button',
@@ -178,7 +178,7 @@ let button14 = new Button({
     iconActive: 'add_circle'
 })
 
-let button15 = new Button({
+const button15 = new Button({
     x: 200,
     y: 250,
     label: 'Button',
@@ -187,7 +187,7 @@ let button15 = new Button({
     iconActive: null
 })
 
-let button16 = new Button({
+const button16 = new Button({
     x: 400,
     y: 250,
     label: 'Button',
@@ -197,7 +197,7 @@ let button16 = new Button({
     active: true
 })
 
-let button17 = new Button({
+const button17 = new Button({
     x: 600,
     y: 250,
     label: 'Button',
@@ -215,7 +215,7 @@ let graphic2 = new PIXI.Graphics()
 graphic2.beginFill(0x40c3f2)
 graphic2.drawCircle(30, 30, 30)
 
-let button18 = new Button({
+const button18 = new Button({
     x: 10,
     y: 310,
     label: 'Button',
@@ -232,7 +232,7 @@ let graphic4 = new PIXI.Graphics()
 graphic4.beginFill(0xf8ce2d)
 graphic4.drawCircle(40, 40, 40)
 
-let button19 = new Button({
+const button19 = new Button({
     x: 200,
     y: 310,
     label: 'Button',
@@ -243,7 +243,7 @@ let button19 = new Button({
     iconPosition: 'right'
 })
 
-let button20 = new Button({
+const button20 = new Button({
     x: 400,
     y: 310,
     label: 'Link Button',
@@ -251,7 +251,7 @@ let button20 = new Button({
     style: 'link'
 })
 
-let button21 = new Button({
+const button21 = new Button({
     x: 600,
     y: 310,
     minWidth: 70,
@@ -261,12 +261,41 @@ let button21 = new Button({
     style: 'link'
 })
 
+const button22 = new Button({
+    x: 10,
+    y: 440,
+    icon: 'play_arrow',
+    badge: '19'
+})
+
+const button23 = new Button({
+    x: 100,
+    y: 440,
+    icon: 'stop',
+    badge: 'Stop'
+})
+
+const button24 = new Button({
+    x: 200,
+    y: 440,
+    icon: 'star_border',
+    badge: {
+        content: 'Bookmark',
+        align: 'center',
+        verticalAlign: 'bottom',
+        offsetTop: 8,
+        radius: 14,
+        fill: 0xfe832d
+    }
+})
+
 app.scene.addChild(button1, button2, button3, button4, button5, button6)
 app.scene.addChild(button7, button8)
 app.scene.addChild(button9, button10, button11)
 app.scene.addChild(button12, button13)
 app.scene.addChild(button14, button15, button16, button17)
 app.scene.addChild(button18, button19, button20, button21)
+app.scene.addChild(button22, button23, button24)
     </script>
 </body>
 </html>

lib/pixi/buttongroup.html

@@ -281,12 +281,34 @@ const buttonGroup16 = new ButtonGroup({
     app
 })
 
+const buttonGroup17 = new ButtonGroup({
+    x: 10,
+    y: 1270,
+    buttons: [
+        {icon: 'local_airport', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Airport'},
+        {icon: 'local_bar', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Bar'},
+        {icon: 'local_cafe', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Cafe'},
+        {icon: 'local_car_wash', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Car wash'},
+        {icon: 'local_dining', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Dining'},
+        {icon: 'local_florist', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Florist'},
+        {icon: 'local_gas_station', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Gas station'},
+        {icon: 'local_grocery_store', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Grocery store'},
+        {icon: 'local_mall', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Mall'},
+        {icon: 'local_pizza', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pizza'},
+        {icon: 'local_printshop', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Printshop'},
+        {icon: 'local_pharmacy', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pharmacy'}
+    ],
+    margin: 50,
+    maxWidth: 400,
+    app
+})
+
 app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
 app.scene.addChild(buttonGroup4)
 app.scene.addChild(buttonGroup5, buttonGroup6)
 app.scene.addChild(buttonGroup7, buttonGroup8)
 app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
-app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16)
+app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17)
     </script>
 </body>
 </html>