import React from "react";
import {hyperscript as h} from "neutrine-utils";

import "siimple/scss/typography/_badge.scss";

//Export bagde component 
export default class Badge extends React.Component {
    render() {
        //Initialize the badge class list 
        let classList = ["siimple-badge"];
        //Check the color attribute
        if (typeof this.props.color === "string") {
            classList.push("siimple-badge--" + this.props.color.toLowerCase().trim());
        }
        //Return the badge element
        return h("div", {className: classList, style: this.props.style}, this.props.children);
    }
}

//Badge default props
Badge.defaultProps = {
    color: null,
    style: null
};


@@ -28,16 +28,28 @@
 import %7B
+classNames, 
 hyperscr
@@ -80,16 +80,43 @@
 -utils%22;
+%0Aimport %7Bomit%7D from %22kofi%22;
 %0A%0Aimport
@@ -246,24 +246,131 @@
  render() %7B%0A
+        //Clone the badge props %0A        let props = omit(this.props, %5B%22className%22, %22children%22, %22color%22%5D);%0A
         //In
@@ -642,14 +642,16 @@
   //
-Return
+Generate
  the
@@ -661,41 +661,44 @@
 dge 
-element%0A        return h(%22div%22, %7B
+classname%0A        props.className = 
 clas
@@ -702,18 +702,18 @@
 lassName
-: 
+s(
 classLis
@@ -714,23 +714,16 @@
 assList,
- style:
  this.pr
@@ -730,14 +730,84 @@
 ops.
-style%7D
+className);%0A        //Return the badge element%0A        return h(%22div%22, props
 , th

Extend props in badge component. Minor changes