TASK: Badge must be consistent with button

src/components.d.ts

@@ -28,7 +28,7 @@ declare global {
 
   namespace StencilComponents {
     interface NeosBadge {
-      'label': string;
+
     }
   }
 
@@ -51,7 +51,7 @@ declare global {
   }
   namespace JSXElements {
     export interface NeosBadgeAttributes extends HTMLAttributes {
-      'label'?: string;
+
     }
   }
 }

src/components/badge/badge.tsx

-import {Component, Prop} from '@stencil/core';
+import {Component} from '@stencil/core';
 
 @Component({
   tag: 'neos-badge',
@@ -6,10 +6,7 @@ import {Component, Prop} from '@stencil/core';
   shadow: true
 })
 export class Badge {
-
-  @Prop() label: string;
-
   render() {
-    return this.label;
+    return <div><slot /></div>;
   }
 }

src/components/badge/styles/badge.dark.scss

@@ -10,7 +10,7 @@
   line-height: inherit;
   margin-right: $content-margin-small;
   outline: 1px $background-dark-color solid;
-  padding: $content-padding-smaller;
+  padding: $content-padding-small;
   cursor: default;
 
   &:last-child {

src/index.html

@@ -45,9 +45,21 @@
   <header>
     <h1>neos-badge</h1>
   </header>
-  <neos-badge label="Switzerland"></neos-badge>
-  <neos-badge label="France"></neos-badge>
-  <neos-badge label="Germany"></neos-badge>
+  <section>
+    <header>
+      <h2>default</h2>
+    </header>
+    <neos-badge>Switzerland</neos-badge>
+    <neos-badge>France</neos-badge>
+    <neos-badge>Germany</neos-badge>
+  </section>
+    <header>
+      <h2>with icons</h2>
+    </header>
+    <neos-badge><neos-icon name="frown"></neos-icon> Switzerland</neos-badge>
+    <neos-badge><neos-icon name="frown"></neos-icon> France</neos-badge>
+    <neos-badge><neos-icon name="frown"></neos-icon> Germany</neos-badge>
+  </section>
 </section>
 
 <section>