Added badge content example to button doctest.

lib/pixi/button.html

@@ -289,13 +289,33 @@ const button24 = new Button({
     }
 })
 
+const button25 = new Button({
+    x: 300,
+    y: 460,
+    icon: 'add',
+    badge: {
+        content: 'Click the button',
+        align: 'center',
+        verticalAlign: 'top',
+        offsetTop: -20,
+        radius: 12,
+        fill: 0x5856d6
+    },
+    action: event => {
+        const countries = ['Tajikistan', 'Zambia', 'Dominica', 'Australia', 'Botswana', 'Mozambique', 'Lesotho', 'Thailand', 'Gabon', 'Cuba', 'Mexico', 'Central African Republic', 'Réunion', 'Montenegro', 'Romania', 'Jamaica', 'Thailand', 'Cameroon', 'French Guiana', 'Nigeria', 'Tokelau', 'Slovenia', 'Kuwait', 'Palestinian Territories', 'Estonia', 'Germany', 'Cameroon', 'Somalia', 'El Salvador', 'San Marino', 'Sierra Leone', 'Sierra Leone', 'Gibraltar', 'Benin', 'Russia', 'Iraq', 'Tunisia', 'Greenland', 'Côte d\'Ivoire', 'Tanzania', 'Zambia', 'Bermuda', 'Somalia', 'Malaysia', 'Croatia', 'Togo', 'Belgium', 'Uruguay', 'Equatorial Guinea', 'Nigeria', 'St. Martin', 'Tuvalu', 'South Africa', 'Hong Kong SAR China', 'Palau', 'Canary Islands', 'Algeria', 'Hong Kong SAR China', 'Brunei', 'Dominican Republic', 'Sierra Leone', 'Moldova', 'Indonesia', 'Central African Republic', 'Anguilla', 'Malaysia', 'Bahrain', 'Indonesia', 'Peru', 'Namibia', 'Congo - Brazzaville', 'Micronesia', 'Cambodia', 'Réunion', 'Honduras', 'Hungary', 'Brazil', 'Trinidad & Tobago', 'Hungary', 'Madagascar', 'Sierra Leone', 'Seychelles', 'St. Martin', 'New Caledonia', 'Tokelau', 'Macedonia', 'Netherlands', 'Panama', 'Venezuela', 'Nepal', 'Guernsey', 'Papua New Guinea', 'Finland', 'Malaysia', 'Hong Kong SAR China', 'Trinidad & Tobago', 'Montserrat', 'Comoros', 'Benin', 'South Korea', 'Peru', 'Botswana', 'Cambodia', 'Isle of Man', 'Mozambique']
+        const country = countries[Math.floor(Math.random() * countries.length)]
+        button25.badge.content = country
+        button25.layout()
+    }
+})
+
 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)
+app.scene.addChild(button22, button23, button24, button25)
     </script>
 </body>
 </html>

lib/pixi/button.js

@@ -339,34 +339,12 @@ export default class Button extends PIXI.Container {
             }
 
             const badge = new Badge(opts)
-
-            switch (opts.align) {
-                case 'left':
-                    badge.x = this.x - badge.width / 2 + opts.offsetLeft
-                    break
-                case 'center':
-                    badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
-                    break
-                case 'right':
-                    badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft
-            }
-
-            switch (opts.verticalAlign) {
-                case 'top':
-                    badge.y = this.y - badge.height / 2 + opts.offsetTop
-                    break
-                case 'middle':
-                    badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
-                    break
-                case 'bottom':
-                    badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop
-            }
-
             this.addChild(badge)
-
             this.badge = badge
         }
 
+        this.layout()
+
         // set position
         //-----------------
         this.position.set(this.opts.x, this.opts.y)
@@ -451,6 +429,39 @@ export default class Button extends PIXI.Container {
 
         this.icon = icon
 
+        // badge
+        //--------------------
+        if (this.badge) {
+            this.removeChild(this.badge)
+            const width = this.width
+            const height = this.height
+            this.addChild(this.badge)
+
+            const badge = this.badge
+
+            switch (badge.opts.align) {
+                case 'left':
+                    badge.x = -badge.width / 2 + badge.opts.offsetLeft
+                    break
+                case 'center':
+                    badge.x = width / 2 - badge.width / 2 + badge.opts.offsetLeft
+                    break
+                case 'right':
+                    badge.x = width - badge.width / 2 + badge.opts.offsetLeft
+            }
+
+            switch (badge.opts.verticalAlign) {
+                case 'top':
+                    badge.y = -badge.height / 2 + badge.opts.offsetTop
+                    break
+                case 'middle':
+                    badge.y = height / 2 - badge.height / 2 + badge.opts.offsetTop
+                    break
+                case 'bottom':
+                    badge.y = height - badge.height / 2 + badge.opts.offsetTop
+            }
+        }
+
         // draw
         //-----------------
         this.draw()