diff --git a/src/App.css b/src/App.css
index 6c0639a4c..3574106a3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6295,8 +6295,14 @@ input-addon
 .App {
   background-color: white; }
 
-.fd-tile__content .fd-badge, .fd-tile__content .fd-label, .fd-tile__content .fd-tag,
-.fd-tile__content [class*='fd-button'], .fd-tile__content [class*='fd-identifier'], .fd-tile__content [class*='fd-image'], .fd-tile__content [class*='fd-form'] {
+.fd-tile__content .fd-badge,
+.fd-tile__content .fd-label,
+.fd-tile__content .fd-status-label,
+.fd-tile__content .fd-tag,
+.fd-tile__content [class*='fd-button'],
+.fd-tile__content [class*='fd-identifier'],
+.fd-tile__content [class*='fd-image'],
+.fd-tile__content [class*='fd-form'] {
   margin-right: 10px; }
 
 .fd-tile__content .fd-button--grouped {
@@ -6338,7 +6344,7 @@ input-addon
     color: inherit; }
 
 .logo-subtitle {
-  font-size: .75rem; }
+  font-size: 0.75rem; }
 
 .sidebar {
   color: #21262c;
@@ -6354,7 +6360,7 @@ input-addon
 .nav-item {
   display: block;
   color: #21262c;
-  font-size: .875rem;
+  font-size: 0.875rem;
   position: relative;
   padding: 13px 40px; }
 
@@ -6391,10 +6397,14 @@ input-addon
 .header {
   margin: 12px 0; }
 
-input[type=text], input[type=password],
-input[type=email], input[type=url],
-input[type=search], input[type=tel],
-input[type=number], input[type=date],
+input[type='text'],
+input[type='password'],
+input[type='email'],
+input[type='url'],
+input[type='search'],
+input[type='tel'],
+input[type='number'],
+input[type='date'],
 textarea {
   border-radius: 0; }
 
diff --git a/src/App.scss b/src/App.scss
index 0bcc90c23..3dbf10ed7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,50 +1,53 @@
-
-$fd-icons-path: "../node_modules/fundamental-ui/scss/icons/";
-$fd-fonts-path: "../node_modules/fundamental-ui/dist/fonts/";
+$fd-icons-path: '../node_modules/fundamental-ui/scss/icons/';
+$fd-fonts-path: '../node_modules/fundamental-ui/dist/fonts/';
 @import '../node_modules/fundamental-ui/scss/all.scss';
 
 .App {
-  background-color: white;
+    background-color: white;
 }
 
 .fd-tile__content {
-  .fd-badge, .fd-label, .fd-tag, 
-  [class*='fd-button'], [class*='fd-identifier'], [class*='fd-image'], [class*='fd-form'] {
-    margin-right: 10px;
-  }
-
-  .fd-button--grouped {
-    margin-right: 0;
-  }
-
-  .fd-input-group {
-    [class*='fd-button'] {
-      margin-right: 0;
+    .fd-badge,
+    .fd-label,
+    .fd-status-label,
+    .fd-tag,
+    [class*='fd-button'],
+    [class*='fd-identifier'],
+    [class*='fd-image'],
+    [class*='fd-form'] {
+        margin-right: 10px;
+    }
+
+    .fd-button--grouped {
+        margin-right: 0;
+    }
+
+    .fd-input-group {
+        [class*='fd-button'] {
+            margin-right: 0;
+        }
     }
-  }
 }
 
 .fd-tabs__content {
-  padding-top: 10px;
-  padding-bottom: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
 }
 
 .docs-component {
-  margin-bottom: -28px;
-  border-radius: 4px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  padding-bottom: 8px;
-  border: 1px solid #ccc;
-
-
+    margin-bottom: -28px;
+    border-radius: 4px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-bottom: 8px;
+    border: 1px solid #ccc;
 }
 
 .fd-side-nav--icons {
-  max-width: 65px;
+    max-width: 65px;
 }
 
-.container{
+.container {
     display: flex;
     justify-content: space-between;
     height: 100vh;
@@ -52,142 +55,146 @@ $fd-fonts-path: "../node_modules/fundamental-ui/dist/fonts/";
     width: 90%;
     margin-left: auto;
     margin-right: auto;
-  }
-  
-  .logo {
+}
+
+.logo {
     font-size: 1.25rem;
     margin-bottom: 0;
     display: flex;
     justify-content: center;
     > a {
-      color: inherit;
+        color: inherit;
     }
-  }
-  
-  .logo-subtitle {
-    font-size: .75rem;
-  }
-  
-  .sidebar {
+}
+
+.logo-subtitle {
+    font-size: 0.75rem;
+}
+
+.sidebar {
     color: #21262c;
     min-width: 16rem;
     background-color: #f1f3f6;
-  }
-  
-  .nav {
+}
+
+.nav {
     list-style: none;
     border-top: 2px solid #dbe7f3;
     height: 90%;
     overflow: auto;
-  }
-  
-  .nav-item {
+}
+
+.nav-item {
     display: block;
     color: #21262c;
-    font-size: .875rem;
+    font-size: 0.875rem;
     position: relative;
     padding: 13px 40px;
-  }
-  
-  .side-nav__headers{
+}
+
+.side-nav__headers {
     color: #424e5a;
     padding: 15px 20px;
     display: block;
-  }
-  
-  .nav-item--selected {
+}
+
+.nav-item--selected {
     border-left: 6px solid #2fd0c8;
-  }
+}
 
-  .nav-item:hover,
-  .nav-item--active {
+.nav-item:hover,
+.nav-item--active {
     color: #424e5a;
     border-left: 6px solid #2fd0c8;
     padding-left: 34px;
-  }
-  
-  .content {
+}
+
+.content {
     flex-grow: 1;
     overflow-y: scroll;
     padding-bottom: 2rem;
     background-color: white;
-  }
-  
-  .content-margin {
+}
+
+.content-margin {
     margin-right: auto;
     margin-left: auto;
     padding-left: 1rem;
     padding-right: 1rem;
-  }
+}
 
-  .property-header {
+.property-header {
     text-align: left;
     padding-right: 15px;
-  }
+}
 
-  .header {
+.header {
     margin: 12px 0;
-  }
+}
 
-input[type=text], input[type=password], 
-input[type=email], input[type=url], 
-input[type=search], input[type=tel], 
-input[type=number], input[type=date], 
+input[type='text'],
+input[type='password'],
+input[type='email'],
+input[type='url'],
+input[type='search'],
+input[type='tel'],
+input[type='number'],
+input[type='date'],
 textarea {
-  border-radius: 0;
+    border-radius: 0;
 }
 
 .fd-side-nav {
-  max-width: 250px;
+    max-width: 250px;
 }
 
 .row {
-  display: flex;
+    display: flex;
 }
 
 .col {
-  padding-right: 15px;
-  padding-left: 15px;
-  -webkit-box-flex: 1;
-  flex: 1;
+    padding-right: 15px;
+    padding-left: 15px;
+    -webkit-box-flex: 1;
+    flex: 1;
 }
 
 .form-group {
-  max-height: 500px;
-  overflow-y: scroll;
-  display: block;
-  padding: 20px;
-  border: 1px #eee solid;
+    max-height: 500px;
+    overflow-y: scroll;
+    display: block;
+    padding: 20px;
+    border: 1px #eee solid;
 }
 
 .schema {
-  display: block;
-  padding: 20px;
-  border: 1px #eee solid;
+    display: block;
+    padding: 20px;
+    border: 1px #eee solid;
 }
 
 .form-group-sublevel {
-  display: block;
-  padding: 20px;
-  border: 1px #eee solid;
+    display: block;
+    padding: 20px;
+    border: 1px #eee solid;
 }
 
 .tn-form__label {
-  padding-left: 25px;
+    padding-left: 25px;
 }
 
 .fd-calendar__content {
-  background: white;
+    background: white;
 }
 
 .fd-date-picker {
-  display: inline-block;
+    display: inline-block;
 }
 
 .demo-icon-wrapper {
-  padding: 10px;
-  float: left;
-  width: 16%;
-  text-align: center;
-  height: 120px;
-}
\ No newline at end of file
+    padding: 10px;
+    float: left;
+    width: 16%;
+    text-align: center;
+    height: 120px;
+}
diff --git a/src/Badge/Badge.Component.js b/src/Badge/Badge.Component.js
index 68a0b04e7..20adeb236 100644
--- a/src/Badge/Badge.Component.js
+++ b/src/Badge/Badge.Component.js
@@ -1,53 +1,80 @@
-import React from 'react'
-import { Badge, Label } from '../'
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../'
+import React from 'react';
+import { Badge, Label, Status } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
 import { Playground } from '../documentation/Playground/Playground';
 
 export const BadgeComponent = () => {
     const defaultBadgeCode = `<Badge>Default</Badge>
 <Badge type="success">Default</Badge>
 <Badge type="warning">Default</Badge>
-<Badge type="error">Default</Badge>`
+<Badge type="error">Default</Badge>`;
 
     const pillBadgeCode = `<Badge modifier="pill">Default</Badge>
 <Badge type="success" modifier="pill">Default</Badge>
 <Badge type="warning" modifier="pill">Default</Badge>
-<Badge type="error" modifier="pill">Default</Badge>`
+<Badge type="error" modifier="pill">Default</Badge>`;
 
     const filledBadgeCode = `<Badge modifier="filled">Default</Badge>
 <Badge type="success" modifier="filled">Default</Badge>
 <Badge type="warning" modifier="filled">Default</Badge>
-<Badge type="error" modifier="filled">Default</Badge>`
+<Badge type="error" modifier="filled">Default</Badge>`;
 
     const labelCode = `<Label>Default</Label>
 <Label type="success">Default</Label>
 <Label type="warning">Default</Label>
-<Label type="error">Default</Label>`
+<Label type="error">Default</Label>`;
+
+    const statusCode = `<Status>Default</Status>
+<Status type="success">Default</Status>
+<Status type="warning">Default</Status>
+<Status type="error">Default</Status>
+
+
+<Status type="available">Available</Status>
+<Status type="away">Away</Status>
+<Status type="busy">Busy</Status>
+<Status type="offline">Appear Offline</Status>`;
+
+    const statusIconCode = `<Status icon="history">Custom Icon</Status>
+<Status icon="message-success">Success</Status>
+<Status icon="message-warning">Warning</Status>
+<Status icon="message-error">Error</Status>`;
 
     return (
         <div>
-
             <Header>Badge and Label</Header>
-            <Description>Badges and labels are used to indicate status. Colors, generally in combination with text, are used to easily highlight the state of an object.
-            The following colors should be used:
-            Black: default or inactive status;
-            Green: positive status, used for active, published, approved;
-            Orange: a warning status or to indicate that an action can be taken;
-            Red: error status.
+            <Description>
+                Badges and labels are used to indicate status. Colors, generally in combination with text, are used to
+                easily highlight the state of an object. The following colors should be used: Black: default or inactive
+                status; Green: positive status, used for active, published, approved; Orange: a warning status or to
+                indicate that an action can be taken; Red: error status.
             </Description>
-            <Import module="Badge, Label" path="/fundamental-react/src/" />
+            <Import module="Badge, Label, Status" path="/fundamental-react/src/" />
 
             <Separator />
 
-            <Properties type="Inputs" properties=
-                {[
-                    { name: 'type', description: 'String - The type indicates the status of the badge/label. Options include \'default\', \'success\', \'warning\', and \'error\'. Leave empty for default.' },
-                    { name: 'modifier', description: 'String - Modifiers can be \'pill\' and \'filled\'. Leave empty for normal.' }
-                ]} />
+            <Properties
+                type="Inputs"
+                properties={[
+                    {
+                        name: 'type',
+                        description:
+                            "String - The type indicates the status of the badge/label. Options include 'default', 'success', 'warning', and 'error'. Leave empty for default. For status label with build in status icons use the 'available', 'away', 'busy' and 'offline'."
+                    },
+                    {
+                        name: 'modifier',
+                        description: "String - Modifiers can be 'pill' and 'filled'. Leave empty for normal."
+                    },
+                    {
+                        name: 'glyph',
+                        description:
+                            'String - The icon to include in the status indicator. See the icon page for the list of icons.'
+                    }
+                ]}
+            />
 
             <Separator />
 
-
             <h2>Default Badge</h2>
             <DocsTile>
                 <Badge>Default</Badge>
@@ -60,24 +87,40 @@ export const BadgeComponent = () => {
             <Separator />
 
             <h2>Pill Badge</h2>
-            <Description>Apply <code>modifier="pill"</code> to render a pill version of the badge.</Description>
+            <Description>
+                Apply <code>modifier="pill"</code> to render a pill version of the badge.
+            </Description>
             <DocsTile>
                 <Badge modifier="pill">Default</Badge>
-                <Badge type="success" modifier="pill">Default</Badge>
-                <Badge type="warning" modifier="pill">Default</Badge>
-                <Badge type="error" modifier="pill">Default</Badge>
+                <Badge type="success" modifier="pill">
+                    Default
+                </Badge>
+                <Badge type="warning" modifier="pill">
+                    Default
+                </Badge>
+                <Badge type="error" modifier="pill">
+                    Default
+                </Badge>
             </DocsTile>
             <DocsText>{pillBadgeCode}</DocsText>
 
             <Separator />
 
             <h2>Filled Badge</h2>
-            <Description>Apply <code>modifier="filled"</code> to render a filled version of the badge.</Description>
+            <Description>
+                Apply <code>modifier="filled"</code> to render a filled version of the badge.
+            </Description>
             <DocsTile>
                 <Badge modifier="filled">Default</Badge>
-                <Badge type="success" modifier="filled">Default</Badge>
-                <Badge type="warning" modifier="filled">Default</Badge>
-                <Badge type="error" modifier="filled">Default</Badge>
+                <Badge type="success" modifier="filled">
+                    Default
+                </Badge>
+                <Badge type="warning" modifier="filled">
+                    Default
+                </Badge>
+                <Badge type="error" modifier="filled">
+                    Default
+                </Badge>
             </DocsTile>
             <DocsText>{filledBadgeCode}</DocsText>
 
@@ -94,9 +137,36 @@ export const BadgeComponent = () => {
 
             <Separator />
 
+            <h2>Status Indicator Label with build in status icons</h2>
+            <DocsTile>
+                <Status>Default</Status>
+                <Status type="success">Default</Status>
+                <Status type="warning">Default</Status>
+                <Status type="error">Default</Status>
+                <br />
+                <br />
+                <Status type="available">Available</Status>
+                <Status type="away">Away</Status>
+                <Status type="busy">Busy</Status>
+                <Status type="offline">Appear Offline</Status>
+            </DocsTile>
+            <DocsText>{statusCode}</DocsText>
+            <Separator />
+            <h2>Status Indicator Label with any icons</h2>
+            <DocsTile>
+                <Status glyph="history">Custom Icon</Status>
+                <Status glyph="message-success">Success</Status>
+                <Status glyph="message-warning">Warning</Status>
+                <Status glyph="message-error">Error</Status>
+            </DocsTile>
+            <DocsText>{statusIconCode}</DocsText>
+
+            <Separator />
 
             <h2>Playground</h2>
-            <Playground component="badge" schema= {[
+            <Playground
+                component="badge"
+                schema={[
                     {
                         attribute: 'children',
                         typeOfAttribute: 'string'
@@ -104,21 +174,653 @@ export const BadgeComponent = () => {
                     {
                         attribute: 'component',
                         typeOfAttribute: 'string',
-                        enum: ['badge', 'label']
+                        enum: ['badge', 'label', 'status']
                     },
                     {
                         attribute: 'type',
                         typeOfAttribute: 'string',
-                        enum: ['default', 'success', 'warning', 'error']
-                    }, 
+                        enum: ['default', 'success', 'warning', 'error', 'available', 'away', 'busy', 'offline']
+                    },
                     {
                         attribute: 'modifier',
                         typeOfAttribute: 'string',
                         enum: ['', 'pill', 'filled']
-                    }]}>
-                <Badge type="success" modifier="filled">Default</Badge>
+                    },
+                    {
+                        attribute: 'glyph',
+                        typeOfAttribute: 'string',
+                        enum: [
+                            '',
+                            'accelerated',
+                            'accept',
+                            'accidental-leave',
+                            'account',
+                            'accounting-document-verification',
+                            'action',
+                            'action-settings',
+                            'activate',
+                            'activities',
+                            'activity-2',
+                            'activity-assigned-to-goal',
+                            'activity-individual',
+                            'activity-items',
+                            'add',
+                            'add-activity',
+                            'add-activity-2',
+                            'add-contact',
+                            'add-coursebook',
+                            'add-document',
+                            'add-equipment',
+                            'add-favorite',
+                            'add-filter',
+                            'add-photo',
+                            'add-process',
+                            'add-product',
+                            'address-book',
+                            'addresses',
+                            'alert',
+                            'along-stacked-chart',
+                            'alphabetical-order',
+                            'appointment',
+                            'appointment-2',
+                            'approvals',
+                            'area-chart',
+                            'arobase',
+                            'arrow-bottom',
+                            'arrow-down',
+                            'arrow-left',
+                            'arrow-right',
+                            'arrow-top',
+                            'attachment',
+                            'attachment-audio',
+                            'attachment-e-pub',
+                            'attachment-html',
+                            'attachment-photo',
+                            'attachment-text-file',
+                            'attachment-video',
+                            'attachment-zip-file',
+                            'back-to-top',
+                            'background',
+                            'badge',
+                            'bar-chart',
+                            'bar-code',
+                            'basket',
+                            'batch-payments',
+                            'bbyd-active-sales',
+                            'bbyd-dashboard',
+                            'bed',
+                            'begin',
+                            'bell',
+                            'blank-tag',
+                            'blank-tag-2',
+                            'bo-strategy-management',
+                            'bold-text',
+                            'bookmark',
+                            'border',
+                            'broken-link',
+                            'bubble-chart',
+                            'building',
+                            'bullet-text',
+                            'burglary',
+                            'bus-public-transport',
+                            'business-by-design',
+                            'business-card',
+                            'business-objects-experience',
+                            'business-objects-explorer',
+                            'business-objects-mobile',
+                            'business-one',
+                            'calendar',
+                            'call',
+                            'camera',
+                            'cancel',
+                            'cancel-maintenance',
+                            'cancel-share',
+                            'capital-projects',
+                            'car-rental',
+                            'card',
+                            'cargo-train',
+                            'cart',
+                            'cart-2',
+                            'cart-3',
+                            'cart-4',
+                            'cart-5',
+                            'cart-approval',
+                            'cart-full',
+                            'cause',
+                            'chain-link',
+                            'chalkboard',
+                            'chart-axis',
+                            'chart-table-view',
+                            'Chart-Tree-Map',
+                            'check-availability',
+                            'checklist',
+                            'checklist-2',
+                            'checklist-item',
+                            'checklist-item-2',
+                            'chevron-phase',
+                            'chevron-phase-2',
+                            'choropleth-chart',
+                            'circle-task',
+                            'circle-task-2',
+                            'citizen-connect',
+                            'clear-filter',
+                            'clinical-order',
+                            'clinical-tast-tracker',
+                            'close-command-field',
+                            'cloud',
+                            'co',
+                            'collaborate',
+                            'collapse',
+                            'collapse-group',
+                            'collections-insight',
+                            'collections-management',
+                            'collision',
+                            'color-fill',
+                            'column-chart-dual-axis',
+                            'comment',
+                            'commission-check',
+                            'company-view',
+                            'compare',
+                            'compare-2',
+                            'competitor',
+                            'complete',
+                            'connected',
+                            'contacts',
+                            'copy',
+                            'course-book',
+                            'course-program',
+                            'create',
+                            'create-entry-time',
+                            'create-form',
+                            'create-leave-request',
+                            'create-session',
+                            'credit-card',
+                            'crm-sales',
+                            'crm-service-manager',
+                            'crop',
+                            'crossed-line-chart',
+                            'curriculum',
+                            'cursor',
+                            'customer',
+                            'customer-and-contacts',
+                            'customer-and-supplier',
+                            'customer-briefing',
+                            'customer-financial-fact-sheet',
+                            'customer-history',
+                            'customer-order-entry',
+                            'customer-view',
+                            'customize',
+                            'database',
+                            'date-time',
+                            'decision',
+                            'decline',
+                            'decrease-line-height',
+                            'delete',
+                            'detail-view',
+                            'developer-settings',
+                            'dimension',
+                            'disconnected',
+                            'discussion',
+                            'discussion-2',
+                            'dishwasher',
+                            'display',
+                            'display-more',
+                            'doc-attachment',
+                            'doctor',
+                            'document',
+                            'document-text',
+                            'documents',
+                            'donut-chart',
+                            'down',
+                            'download',
+                            'download-from-cloud',
+                            'draw-rectangle',
+                            'drill-down',
+                            'drill-up',
+                            'drop-down-list',
+                            'dropdown',
+                            'duplicate',
+                            'e-care',
+                            'e-learning',
+                            'eam-work-order',
+                            'edit',
+                            'edit-outside',
+                            'education',
+                            'electrocardiogram',
+                            'electronic-medical-record',
+                            'email',
+                            'email-read',
+                            'employee',
+                            'employee-approvals',
+                            'employee-lookup',
+                            'employee-pane',
+                            'employee-rejections',
+                            'end-user-experience-monitoring',
+                            'endoscopy',
+                            'energy-saving-lightbulb',
+                            'enter-more',
+                            'eraser',
+                            'error',
+                            'example',
+                            'excel-attachment',
+                            'exitfullscreen',
+                            'expand',
+                            'expand-group',
+                            'expense-report',
+                            'explorer',
+                            'factory',
+                            'fallback',
+                            'family-care',
+                            'family-protection',
+                            'favorite',
+                            'favorite-list',
+                            'fax-machine',
+                            'feed',
+                            'feeder-arrow',
+                            'filter',
+                            'filter-analytics',
+                            'filter-facets',
+                            'filter-fields',
+                            'flag',
+                            'flight',
+                            'fob-watch',
+                            'folder',
+                            'folder-blank',
+                            'folder-full',
+                            'form',
+                            'forward',
+                            'fridge',
+                            'full-screen',
+                            'full-stacked-chart',
+                            'full-stacked-column-chart',
+                            'functional-location',
+                            'future',
+                            'gantt-bars',
+                            'general-leave-request',
+                            'generate-shortcut',
+                            'geographic-bubble-chart',
+                            'globe',
+                            'goal',
+                            'goalseek',
+                            'grid',
+                            'group',
+                            'group-2',
+                            'header',
+                            'heading-1',
+                            'heading-2',
+                            'heading-3',
+                            'headset',
+                            'heating-cooling',
+                            'heatmap-chart',
+                            'hello-world',
+                            'hide',
+                            'hint',
+                            'history',
+                            'home',
+                            'home-share',
+                            'horizontal-bar-chart',
+                            'horizontal-bar-chart-2',
+                            'horizontal-bullet-chart',
+                            'horizontal-grip',
+                            'horizontal-stacked-chart',
+                            'horizontal-waterfall-chart',
+                            'hr-approval',
+                            'idea-wall',
+                            'image-viewer',
+                            'inbox',
+                            'incident',
+                            'incoming-call',
+                            'increase-line-height',
+                            'indent',
+                            'initiative',
+                            'inspect',
+                            'inspect-down',
+                            'inspection',
+                            'instance',
+                            'insurance-car',
+                            'insurance-house',
+                            'insurance-life',
+                            'internet-browser',
+                            'inventory',
+                            'ipad',
+                            'ipad-2',
+                            'iphone',
+                            'iphone-2',
+                            'it-host',
+                            'it-instance',
+                            'it-system',
+                            'italic-text',
+                            'jam',
+                            'journey-arrive',
+                            'journey-change',
+                            'journey-depart',
+                            'key',
+                            'key-user-settings',
+                            'kpi-corporate-performance',
+                            'kpi-managing-my-area',
+                            'lab',
+                            'laptop',
+                            'lateness',
+                            'lead',
+                            'lead-outdated',
+                            'leads',
+                            'learning-assistant',
+                            'legend',
+                            'less',
+                            'letter',
+                            'lightbulb',
+                            'line-chart',
+                            'line-chart-dual-axis',
+                            'line-chart-time-axis',
+                            'line-charts',
+                            'list',
+                            'loan',
+                            'locate-me',
+                            'locked',
+                            'log',
+                            'machine',
+                            'manager',
+                            'manager-insight',
+                            'map',
+                            'map-2',
+                            'map-3',
+                            'marketing-campaign',
+                            'master-task-triangle',
+                            'master-task-triangle-2',
+                            'meal',
+                            'measure',
+                            'measurement-document',
+                            'measuring-point',
+                            'media-forward',
+                            'media-pause',
+                            'media-play',
+                            'media-reverse',
+                            'media-rewind',
+                            'meeting-room',
+                            'menu',
+                            'menu2',
+                            'message-error',
+                            'message-information',
+                            'message-popup',
+                            'message-success',
+                            'message-warning',
+                            'microphone',
+                            'mileage',
+                            'minimize',
+                            'mirrored-task-circle',
+                            'mirrored-task-circle-2',
+                            'money-bills',
+                            'monitor-payments',
+                            'move',
+                            'mri-scan',
+                            'multiple-bar-chart',
+                            'multiple-line-chart',
+                            'multiple-pie-chart',
+                            'multiple-radar-chart',
+                            'multiselect',
+                            'multiselect-all',
+                            'multiselect-none',
+                            'my-sales-order',
+                            'my-view',
+                            'nav-back',
+                            'navigation-down-arrow',
+                            'navigation-left-arrow',
+                            'navigation-right-arrow',
+                            'navigation-up-arrow',
+                            'negative',
+                            'Netweaver-business-client',
+                            'newspaper',
+                            'notes',
+                            'notification-2',
+                            'number-sign',
+                            'numbered-text',
+                            'nurse',
+                            'nutrition-activity',
+                            'official-service',
+                            'offsite-work',
+                            'open-command-field',
+                            'open-folder',
+                            'opportunities',
+                            'opportunity',
+                            'order-status',
+                            'org-chart',
+                            'outbox',
+                            'outdent',
+                            'outgoing-call',
+                            'overflow',
+                            'overlay',
+                            'overview-chart',
+                            'paging',
+                            'paid-leave',
+                            'palette',
+                            'paper-plane',
+                            'passenger-train',
+                            'past',
+                            'paste',
+                            'pause',
+                            'payment-approval',
+                            'pdf-attachment',
+                            'pdf-reader',
+                            'pending',
+                            'per-diem',
+                            'performance',
+                            'permission',
+                            'person-placeholder',
+                            'personnel-view',
+                            'pharmacy',
+                            'phone',
+                            'photo-voltaic',
+                            'physical-activity',
+                            'picture',
+                            'pie-chart',
+                            'pipeline-analysis',
+                            'play',
+                            'pool',
+                            'popup-window',
+                            'positive',
+                            'post',
+                            'ppt-attachment',
+                            'present',
+                            'print',
+                            'private',
+                            'process',
+                            'product',
+                            'program-triangles',
+                            'program-triangles-2',
+                            'project-definition-triangle',
+                            'project-definition-triangle-2',
+                            'projector',
+                            'provision',
+                            'pull-down',
+                            'pushpin-off',
+                            'pushpin-on',
+                            'puzzle',
+                            'quality-issue',
+                            'question-mark',
+                            'radar-chart',
+                            'receipt',
+                            'record',
+                            'redo',
+                            'refresh',
+                            'repost',
+                            'request',
+                            'reset',
+                            'resize',
+                            'resize-corner',
+                            'resize-horizontal',
+                            'resize-vertical',
+                            'response',
+                            'restart',
+                            'retail-store',
+                            'retail-store-manager',
+                            'rhombus-milestone',
+                            'rhombus-milestone-2',
+                            'role',
+                            'sales-document',
+                            'sales-notification',
+                            'sales-order',
+                            'sales-order-item',
+                            'sales-quote',
+                            'sap-box',
+                            'sap-logo-shape',
+                            'sap-ui5',
+                            'save',
+                            'scatter-chart',
+                            'scissors',
+                            'screen-split-one',
+                            'screen-split-three',
+                            'screen-split-two',
+                            'search',
+                            'settings',
+                            'share',
+                            'share-2',
+                            'shelf',
+                            'shield',
+                            'shipping-status',
+                            'shortcut',
+                            'show',
+                            'signature',
+                            'simple-payment',
+                            'simulate',
+                            'slim-arrow-down',
+                            'slim-arrow-left',
+                            'slim-arrow-right',
+                            'slim-arrow-up',
+                            'soccor',
+                            'sonography',
+                            'sort',
+                            'sort-ascending',
+                            'sort-descending',
+                            'sorting-ranking',
+                            'sound',
+                            'sound-loud',
+                            'sound-off',
+                            'source-code',
+                            'status-critical',
+                            'status-inactive',
+                            'status-negative',
+                            'status-positive',
+                            'step',
+                            'stethoscope',
+                            'stop',
+                            'study-leave',
+                            'subway-train',
+                            'suitcase',
+                            'supplier',
+                            'survey',
+                            'switch-classes',
+                            'switch-views',
+                            'synchronize',
+                            'syntax',
+                            'syringe',
+                            'sys-add',
+                            'sys-back',
+                            'sys-back-2',
+                            'sys-cancel',
+                            'sys-cancel-2',
+                            'sys-enter',
+                            'sys-enter-2',
+                            'sys-find',
+                            'sys-find-next',
+                            'sys-first-page',
+                            'sys-help',
+                            'sys-help-2',
+                            'sys-last-page',
+                            'sys-minus',
+                            'sys-monitor',
+                            'sys-next-page',
+                            'sys-prev-page',
+                            'system-exit',
+                            'system-exit-2',
+                            'table-chart',
+                            'table-view',
+                            'tag',
+                            'tag-cloud-chart',
+                            'tags',
+                            'target-group',
+                            'task',
+                            'taxi',
+                            'technical-object',
+                            'temperature',
+                            'text-align-center',
+                            'text-align-justified',
+                            'text-align-left',
+                            'text-align-right',
+                            'text-formatting',
+                            'theater',
+                            'thing-type',
+                            'thumb-down',
+                            'thumb-up',
+                            'time-account',
+                            'time-entry-request',
+                            'time-overtime',
+                            'timesheet',
+                            'to-be-reviewed',
+                            'toaster-down',
+                            'toaster-top',
+                            'toaster-up',
+                            'tools-opportunity',
+                            'travel-expense',
+                            'travel-expense-report',
+                            'travel-itinerary',
+                            'travel-request',
+                            'tree',
+                            'trend-down',
+                            'trend-up',
+                            'trip-report',
+                            'ui-notifications',
+                            'umbrella',
+                            'underline-text',
+                            'undo',
+                            'unfavorite',
+                            'unlocked',
+                            'unpaid-leave',
+                            'unwired',
+                            'up',
+                            'upload',
+                            'upload-to-cloud',
+                            'upstacked-chart',
+                            'user-edit',
+                            'user-settings',
+                            'value-help',
+                            'vds-file',
+                            'vehicle-repair',
+                            'vertical-bar-chart',
+                            'vertical-bar-chart-2',
+                            'vertical-bullet-chart',
+                            'vertical-grip',
+                            'vertical-stacked-chart',
+                            'vertical-waterfall-chart',
+                            'video',
+                            'visits',
+                            'waiver',
+                            'wallet',
+                            'warning',
+                            'warning2',
+                            'washing-machine',
+                            'weather-proofing',
+                            'web-cam',
+                            'widgets',
+                            'windows-doors',
+                            'work-history',
+                            'workflow-tasks',
+                            'world',
+                            'wounds-doc',
+                            'wrench',
+                            'write-new',
+                            'write-new-document',
+                            'x-ray',
+                            'zoom-in',
+                            'zoom-out'
+                        ]
+                    }
+                ]}
+            >
+                <Badge type="success" modifier="filled" glyph="message-error">
+                    Default
+                </Badge>
             </Playground>
             <Separator />
         </div>
     );
-}
\ No newline at end of file
+};
diff --git a/src/Badge/Badge.js b/src/Badge/Badge.js
index 8e50f4189..b49a48c7b 100644
--- a/src/Badge/Badge.js
+++ b/src/Badge/Badge.js
@@ -1,29 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const Badge = (props) => {
-  const { type, modifier, children } = props;
-  return (
-    <span className={`fd-badge${type ? ' fd-badge--' + type : ''}${modifier ? ' fd-badge--' + modifier : ''}`}>
-      {children}
-    </span>
-  );
-}
+export const Badge = props => {
+    const { type, modifier, children } = props;
+    return (
+        <span className={`fd-badge${type ? ' fd-badge--' + type : ''}${modifier ? ' fd-badge--' + modifier : ''}`}>
+            {children}
+        </span>
+    );
+};
 
 Badge.propTypes = {
-  type: PropTypes.string,
-  modifier: PropTypes.string
-}
+    type: PropTypes.string,
+    modifier: PropTypes.string
+};
 
-export const Label = (props) => {
-  const { type, children } = props;
-  return (
-    <span className={`fd-label${type ? ' fd-label--' + type : ''}`}>
-      {children}
-    </span>
-  );
-}
+export const Label = props => {
+    const { type, children } = props;
+    return <span className={`fd-label${type ? ' fd-label--' + type : ''}`}>{children}</span>;
+};
 
 Label.propTypes = {
-  type: PropTypes.string
-}
+    type: PropTypes.string
+};
+
+export const Status = props => {
+    const { type, glyph, children } = props;
+    return (
+        <span
+            className={`fd-status-label${type ? ' fd-status-label--' + type : ''}${glyph ? ' sap-icon--' + glyph : ''}`}
+        >
+            {children}
+        </span>
+    );
+};
+Status.propTypes = {
+    type: PropTypes.string,
+    glyph: PropTypes.string
+};
diff --git a/src/Routes.js b/src/Routes.js
index 7a26e272e..21ff30f9c 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -34,7 +34,7 @@ export default class Routes extends Component {
             routes: [
                 { url: '/actionBar', name: 'Action Bar', component: ActionBarComponent },
                 { url: '/alert', name: 'Alert', component: AlertComponent },
-                { url: '/badge', name: 'Badge and Label', component: BadgeComponent },
+                { url: '/badge', name: 'Badge, Label & Status', component: BadgeComponent },
                 { url: '/breadcrumb', name: 'Breadcrumb', component: BreadcrumbComponent },
                 { url: '/button', name: 'Button', component: ButtonComponent },
                 { url: '/calendar', name: 'Calendar', component: CalendarComponent },
diff --git a/src/documentation/Playground/Playground.js b/src/documentation/Playground/Playground.js
index 2c93629db..e12143e81 100644
--- a/src/documentation/Playground/Playground.js
+++ b/src/documentation/Playground/Playground.js
@@ -1,20 +1,20 @@
 import React, { Component } from 'react';
-import {Alert} from '../../'
-import {Badge,Label} from '../../'
-import {Button, ButtonGroup, ButtonGrouped} from '../../'
-import {Dropdown, DropdownList} from '../../'
-import {Icon} from '../../'
-import {Identifier} from '../../'
-import {Image} from '../../'
-import {Tabs, TabComponent} from '../../'
-import {FormGroup, FormLabel, FormItem, InputGroup} from '../../'
-import {ListGroup, ListGroupItem, ListGroupItemActions} from '../../'
-import {Tile, TileContent, TileMedia, TileActions, ProductTile, ProductTileContent, ProductTileMedia } from '../../'
+import { Alert } from '../../';
+import { Badge, Label, Status } from '../../';
+import { Button, ButtonGroup, ButtonGrouped } from '../../';
+import { Dropdown, DropdownList } from '../../';
+import { Icon } from '../../';
+import { Identifier } from '../../';
+import { Image } from '../../';
+import { Tabs, TabComponent } from '../../';
+import { FormGroup, FormLabel, FormItem, InputGroup } from '../../';
+import { ListGroup, ListGroupItem, ListGroupItemActions } from '../../';
+import { Tile, TileContent, TileMedia, TileActions, ProductTile, ProductTileContent, ProductTileMedia } from '../../';
 
 export class Playground extends Component {
     constructor(props) {
         super(props);
-        this.state = {schema: this.props.schema, childs: this.props.children.props, currentValues: [], component: ''}
+        this.state = { schema: this.props.schema, childs: this.props.children.props, currentValues: [], component: '' };
         this.updateComponent = this.updateComponent.bind(this);
         this.updateListsName = this.updateListsName.bind(this);
         this.updateListsContent = this.updateListsContent.bind(this);
@@ -24,17 +24,16 @@ export class Playground extends Component {
 
     updateComponent(event) {
         //checks if the target name is in the childs and that the children of childs is not an array or object because that means it's nested.
-        if (event.target.name in this.state.childs && 
-            !(this.state.childs.children instanceof Array || this.state.childs.children instanceof Object)){
-
-            let childsProperties = Object.assign({},this.state.childs);
-            if(event.target.checked && !(event.target.type == "text")) {
+        if (
+            event.target.name in this.state.childs &&
+            !(this.state.childs.children instanceof Array || this.state.childs.children instanceof Object)
+        ) {
+            let childsProperties = Object.assign({}, this.state.childs);
+            if (event.target.checked && !(event.target.type == 'text')) {
                 childsProperties[event.target.name] = true;
-            }
-            else if (event.target.checked == false && !(event.target.type == "text")) {
+            } else if (event.target.checked == false && !(event.target.type == 'text')) {
                 childsProperties[event.target.name] = false;
-            }
-            else {
+            } else {
                 childsProperties[event.target.name] = event.target.value;
             }
 
@@ -43,95 +42,84 @@ export class Playground extends Component {
             });
         }
         //Used for badge and label.
-        else if (event.target.name == "component") {
-            let childsProperties = Object.assign({},this.state.childs);
+        else if (event.target.name == 'component') {
+            let childsProperties = Object.assign({}, this.state.childs);
             childsProperties[event.target.name] = event.target.value;
             this.setState({
                 childs: childsProperties
-            })
-        }
-        else {
+            });
+        } else {
             //Here this is for components that have multiple nestings.
             let objAttrVal = {};
             let currentValuesArr = this.state.currentValues;
             let containsDuplicateAttribute = false;
             //This checks if the array contains values. If it does then it replaces the existing values of elements with new values.
             if (currentValuesArr.length > 0) {
-                let newCurrentValuesArr = currentValuesArr.map(element=> {
-                    if (event.target.name in element){
-                        if(event.target.checked && !(event.target.type == "text")) {
+                let newCurrentValuesArr = currentValuesArr.map(element => {
+                    if (event.target.name in element) {
+                        if (event.target.checked && !(event.target.type == 'text')) {
                             element[event.target.name] = true;
-                        }
-                        else if (event.target.checked == false && !(event.target.type == "text")) {
+                        } else if (event.target.checked == false && !(event.target.type == 'text')) {
                             element[event.target.name] = false;
-                        }
-                        else{
+                        } else {
                             element[event.target.name] = event.target.value;
                         }
                         containsDuplicateAttribute = true;
                         return element;
-                    }
-                    else {
+                    } else {
                         return element;
                     }
                 });
 
-                if (!containsDuplicateAttribute){
+                if (!containsDuplicateAttribute) {
                     objAttrVal[event.target.name] = event.target.value;
                     currentValuesArr.push(objAttrVal);
-                    this.setState({currentValues: currentValuesArr});
-                }
-                else {
-                    this.setState({currentValues: newCurrentValuesArr});
+                    this.setState({ currentValues: currentValuesArr });
+                } else {
+                    this.setState({ currentValues: newCurrentValuesArr });
                 }
-
-            }
-            else{
-                if(event.target.checked && !(event.target.type == "text")) {
+            } else {
+                if (event.target.checked && !(event.target.type == 'text')) {
                     objAttrVal[event.target.name] = true;
-                }
-                else if (event.target.checked == false && !(event.target.type == "text")) {
+                } else if (event.target.checked == false && !(event.target.type == 'text')) {
                     objAttrVal[event.target.name] = false;
-                }
-                else{
+                } else {
                     objAttrVal[event.target.name] = event.target.value;
                 }
                 currentValuesArr.push(objAttrVal);
-                this.setState({currentValues: currentValuesArr});
+                this.setState({ currentValues: currentValuesArr });
             }
-
         }
     }
 
     //Updates the component type selected for tile.
-    updateComponentType(event){
-        this.setState({component: event.target.value});     
+    updateComponentType(event) {
+        this.setState({ component: event.target.value });
     }
 
-    retrieveValue(attribute, defaultValue, lists){
+    retrieveValue(attribute, defaultValue, lists) {
         let value = defaultValue;
-        if (lists.length > 0){
-            lists.map(element=>{
+        if (lists.length > 0) {
+            lists.map(element => {
                 if (attribute in element) {
-                    value =  element[attribute];
+                    value = element[attribute];
                 }
-            })
+            });
         }
         return value;
     }
 
     updateListsName(event) {
-        let childsProperties = Object.assign({},this.state.childs);
+        let childsProperties = Object.assign({}, this.state.childs);
 
-        if ("ids" in childsProperties.children.props) {
-            childsProperties.children.props.ids.map(element=>{
+        if ('ids' in childsProperties.children.props) {
+            childsProperties.children.props.ids.map(element => {
                 if (event.target.name === element.id) {
                     element.name = event.target.value;
                 }
-            }); 
-        }
-        else if ("links" in childsProperties.children.props) {
-            childsProperties.children.props.links.map(element=>{
+            });
+        } else if ('links' in childsProperties.children.props) {
+            childsProperties.children.props.links.map(element => {
                 if (event.target.name === element.id) {
                     element.name = event.target.value;
                 }
@@ -140,22 +128,20 @@ export class Playground extends Component {
 
         this.setState({
             childs: childsProperties
-        })
-
+        });
     }
 
     updateListsContent(event) {
-        let childsProperties = Object.assign({},this.state.childs);
+        let childsProperties = Object.assign({}, this.state.childs);
 
-        if ("ids" in childsProperties.children.props) {
-            childsProperties.children.props.ids.map(element=>{
+        if ('ids' in childsProperties.children.props) {
+            childsProperties.children.props.ids.map(element => {
                 if (event.target.name === element.id) {
                     element.content = event.target.value;
                 }
-            }); 
-        }
-        else if ("links" in childsProperties.children.props) {
-            childsProperties.children.props.links.map(element=>{
+            });
+        } else if ('links' in childsProperties.children.props) {
+            childsProperties.children.props.links.map(element => {
                 if (event.target.name === element.id) {
                     element.content = event.target.value;
                 }
@@ -164,29 +150,36 @@ export class Playground extends Component {
 
         this.setState({
             childs: childsProperties
-        })
-
+        });
     }
 
     render() {
-
-        const {schema} = this.props;
+        const { schema } = this.props;
         const data = schema.map(item => {
             switch (item.typeOfAttribute) {
                 case 'string':
                     return (
                         <div className="form-group-sublevel" key={item.attribute}>
-                            <label>{item.attribute == "children" ? "content" : item.attribute}</label>
+                            <label>{item.attribute == 'children' ? 'content' : item.attribute}</label>
                             {item.enum ? (
                                 <select className="form-control" onChange={this.updateComponent} name={item.attribute}>
-                                    {item.enum.map(enumItem => <option key={enumItem} value={enumItem}>{enumItem}</option>)}
+                                    {item.enum.map(enumItem => (
+                                        <option key={enumItem} value={enumItem}>
+                                            {enumItem}
+                                        </option>
+                                    ))}
                                 </select>
                             ) : (
-                                    <input type="text" className="form-control" value={item.initialValue} onChange={this.updateComponent} name={item.attribute}/>
-                                )
-                            }
+                                <input
+                                    type="text"
+                                    className="form-control"
+                                    value={item.initialValue}
+                                    onChange={this.updateComponent}
+                                    name={item.attribute}
+                                />
+                            )}
                         </div>
-                    )
+                    );
 
                 case 'number':
                     return (
@@ -194,217 +187,414 @@ export class Playground extends Component {
                             <label>{item.attribute}</label>
                             {item.enum ? (
                                 <select className="form-control" onChange={this.updateComponent} name={item.attribute}>
-                                    {item.enum.map(enumItem => <option key={enumItem}>{enumItem}</option>)}
+                                    {item.enum.map(enumItem => (
+                                        <option key={enumItem}>{enumItem}</option>
+                                    ))}
                                 </select>
                             ) : (
-                                    <input type="text" className="form-control" value={item.initialValue}/>
-                                )
-                            }
-                        
+                                <input type="text" className="form-control" value={item.initialValue} />
+                            )}
                         </div>
-                    )
+                    );
 
                 case 'boolean':
                     return (
-                        
                         <div className="form-group-sublevel" key={item.attribute}>
                             <div>Properties</div>
-                            <input type="checkbox" onChange={this.updateComponent} name={item.attribute}/>
+                            <input type="checkbox" onChange={this.updateComponent} name={item.attribute} />
                             <label className="tn-form__label">{item.attribute}</label>
                         </div>
-                    )
+                    );
                 case 'lists':
                     return (
                         <div className="form-group-sublevel" key={item.attribute}>
-                        <p>Names</p>
-                        {
-                            item.enum ? (<div>
-
-                                {item.enum.map(enumItem => 
+                            <p>Names</p>
+                            {item.enum ? (
                                 <div>
-                                <label>{enumItem}</label>
-                                <input type="text" className="form-control" onChange={this.updateListsName} name={enumItem}/>
-                                </div>)}
-                            </div>) : null
-                        }
+                                    {item.enum.map(enumItem => (
+                                        <div>
+                                            <label>{enumItem}</label>
+                                            <input
+                                                type="text"
+                                                className="form-control"
+                                                onChange={this.updateListsName}
+                                                name={enumItem}
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            ) : null}
                         </div>
-                    )
+                    );
                 case 'listsContent':
                     return (
                         <div className="form-group-sublevel" key={item.attribute}>
-                        <p>Content</p>
-                        {
-                            item.enum ? (<div>
-
-                                {item.enum.map(enumItem => 
+                            <p>Content</p>
+                            {item.enum ? (
                                 <div>
-                                <label>{enumItem}</label>
-                                <input type="text" className="form-control" onChange={this.updateListsContent} name={enumItem}/>
-                                </div>)}
-                            </div>) : null
-                        }
+                                    {item.enum.map(enumItem => (
+                                        <div>
+                                            <label>{enumItem}</label>
+                                            <input
+                                                type="text"
+                                                className="form-control"
+                                                onChange={this.updateListsContent}
+                                                name={enumItem}
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            ) : null}
                         </div>
-                    )
+                    );
                 //This is used to display different type of components that belong to the same component.
                 case 'component':
                     return (
                         <div className="form-group-sublevel" key={item.attribute}>
                             <label>{item.attribute}</label>
                             {item.enum ? (
-                                <select className="form-control" onChange={this.updateComponentType} name={item.attribute}>
-                                    {item.enum.map(enumItem => <option key={enumItem} value={enumItem}>{enumItem}</option>)}
+                                <select
+                                    className="form-control"
+                                    onChange={this.updateComponentType}
+                                    name={item.attribute}
+                                >
+                                    {item.enum.map(enumItem => (
+                                        <option key={enumItem} value={enumItem}>
+                                            {enumItem}
+                                        </option>
+                                    ))}
                                 </select>
                             ) : (
-                                    <input type="text" className="form-control" value={item.initialValue} onChange={this.updateComponent} name={item.attribute}/>
-                                )
-                            }
+                                <input
+                                    type="text"
+                                    className="form-control"
+                                    value={item.initialValue}
+                                    onChange={this.updateComponent}
+                                    name={item.attribute}
+                                />
+                            )}
                         </div>
-                    )
+                    );
 
                 default:
-                    return undefined
+                    return undefined;
             }
         });
 
         let componentToGenerate;
         switch (this.props.component) {
             case 'alert':
-                componentToGenerate = <Alert type={this.state.childs.type} dismissable={this.state.childs.dismissable} link={this.state.childs.link} linkText={this.state.childs.linkText}>Default alert with a </Alert>;
+                componentToGenerate = (
+                    <Alert
+                        type={this.state.childs.type}
+                        dismissable={this.state.childs.dismissable}
+                        link={this.state.childs.link}
+                        linkText={this.state.childs.linkText}
+                    >
+                        Default alert with a{' '}
+                    </Alert>
+                );
                 break;
             case 'badge':
-                if (this.state.childs.component == 'label') {
-                    componentToGenerate = <Label type={this.state.childs.type} modifier={this.state.childs.modifier}>{this.state.childs.children}</Label>
-                }
-                else {
-                    componentToGenerate = <Badge type={this.state.childs.type} modifier={this.state.childs.modifier}>{this.state.childs.children}</Badge>
+                if (this.state.childs.component == 'badge') {
+                    componentToGenerate = (
+                        <Badge type={this.state.childs.type} modifier={this.state.childs.modifier}>
+                            {this.state.childs.children}
+                        </Badge>
+                    );
+                } else if (this.state.childs.component == 'label') {
+                    componentToGenerate = (
+                        <Label type={this.state.childs.type} modifier={this.state.childs.modifier}>
+                            {this.state.childs.children}
+                        </Label>
+                    );
+                } else if (this.state.childs.component == 'status') {
+                    componentToGenerate = (
+                        <Status type={this.state.childs.type} glyph={this.state.childs.glyph}>
+                            {this.state.childs.children}
+                        </Status>
+                    );
+                } else {
+                    componentToGenerate = (
+                        <Badge type={this.state.childs.type} modifier={this.state.childs.modifier}>
+                            {this.state.childs.children}
+                        </Badge>
+                    );
                 }
+
                 break;
+
             case 'button':
-                componentToGenerate = <Button type={this.state.childs.type} glyph={this.state.childs.glyph} semantic={this.state.childs.semantic} size={this.state.childs.size} state={this.state.childs.state}>{this.state.childs.children}</Button>
+                componentToGenerate = (
+                    <Button
+                        type={this.state.childs.type}
+                        glyph={this.state.childs.glyph}
+                        semantic={this.state.childs.semantic}
+                        size={this.state.childs.size}
+                        state={this.state.childs.state}
+                    >
+                        {this.state.childs.children}
+                    </Button>
+                );
                 break;
             case 'buttongroup':
-                componentToGenerate = <ButtonGroup>
-                <ButtonGrouped size={this.retrieveValue("size",this.state.childs.children[0].props.size, this.state.currentValues)}>Left</ButtonGrouped>
-                <ButtonGrouped size={this.retrieveValue("size", this.state.childs.children[1].props.size, this.state.currentValues)} glyph={this.retrieveValue("glyph",this.state.childs.children[1].props.glyph, this.state.currentValues)} state={this.retrieveValue("state", this.state.childs.children[1].props.state, this.state.currentValues)}></ButtonGrouped>
-                <ButtonGrouped size={this.retrieveValue("size",this.state.childs.children[2].props.size, this.state.currentValues)}>Right</ButtonGrouped>
-                </ButtonGroup>
+                componentToGenerate = (
+                    <ButtonGroup>
+                        <ButtonGrouped
+                            size={this.retrieveValue(
+                                'size',
+                                this.state.childs.children[0].props.size,
+                                this.state.currentValues
+                            )}
+                        >
+                            Left
+                        </ButtonGrouped>
+                        <ButtonGrouped
+                            size={this.retrieveValue(
+                                'size',
+                                this.state.childs.children[1].props.size,
+                                this.state.currentValues
+                            )}
+                            glyph={this.retrieveValue(
+                                'glyph',
+                                this.state.childs.children[1].props.glyph,
+                                this.state.currentValues
+                            )}
+                            state={this.retrieveValue(
+                                'state',
+                                this.state.childs.children[1].props.state,
+                                this.state.currentValues
+                            )}
+                        />
+                        <ButtonGrouped
+                            size={this.retrieveValue(
+                                'size',
+                                this.state.childs.children[2].props.size,
+                                this.state.currentValues
+                            )}
+                        >
+                            Right
+                        </ButtonGrouped>
+                    </ButtonGroup>
+                );
                 break;
             case 'dropdown':
-                componentToGenerate = <Dropdown buttonText={this.retrieveValue("buttonText",this.state.childs.buttonText, this.state.currentValues)} buttonIcon={this.retrieveValue("buttonIcon",this.state.childs.buttonIcon, this.state.currentValues)} size={this.retrieveValue("size", this.state.childs.size, this.state.currentValues)} state={this.retrieveValue("state",this.state.childs.state, this.state.currentValues)} isContextual={this.retrieveValue("isContextual", this.state.childs.isContextual, this.state.currentValues)}>
-                    <DropdownList links=
-                    {this.state.childs.children.props.links}>
-                    </DropdownList>
+                componentToGenerate = (
+                    <Dropdown
+                        buttonText={this.retrieveValue(
+                            'buttonText',
+                            this.state.childs.buttonText,
+                            this.state.currentValues
+                        )}
+                        buttonIcon={this.retrieveValue(
+                            'buttonIcon',
+                            this.state.childs.buttonIcon,
+                            this.state.currentValues
+                        )}
+                        size={this.retrieveValue('size', this.state.childs.size, this.state.currentValues)}
+                        state={this.retrieveValue('state', this.state.childs.state, this.state.currentValues)}
+                        isContextual={this.retrieveValue(
+                            'isContextual',
+                            this.state.childs.isContextual,
+                            this.state.currentValues
+                        )}
+                    >
+                        <DropdownList links={this.state.childs.children.props.links} />
                     </Dropdown>
+                );
                 break;
             case 'icon':
-                componentToGenerate = <Icon glyph={this.state.childs.glyph} size={this.state.childs.size} />
+                componentToGenerate = <Icon glyph={this.state.childs.glyph} size={this.state.childs.size} />;
                 break;
             case 'identifier':
-                componentToGenerate = <Identifier size={this.state.childs.size} label={this.state.childs.label} modifier={this.state.childs.modifier} color={this.state.childs.color} glyph={this.retrieveValue("children", "", this.state.currentValues) == "" ? this.state.childs.glyph : null}>{this.retrieveValue("children", this.state.childs.children, this.state.currentValues)}</Identifier>
+                componentToGenerate = (
+                    <Identifier
+                        size={this.state.childs.size}
+                        label={this.state.childs.label}
+                        modifier={this.state.childs.modifier}
+                        color={this.state.childs.color}
+                        glyph={
+                            this.retrieveValue('children', '', this.state.currentValues) == ''
+                                ? this.state.childs.glyph
+                                : null
+                        }
+                    >
+                        {this.retrieveValue('children', this.state.childs.children, this.state.currentValues)}
+                    </Identifier>
+                );
                 break;
             case 'image':
-                componentToGenerate = <Image size={this.state.childs.size} type={this.state.childs.type} photo={this.state.childs.photo}></Image>
+                componentToGenerate = (
+                    <Image
+                        size={this.state.childs.size}
+                        type={this.state.childs.type}
+                        photo={this.state.childs.photo}
+                    />
+                );
                 break;
             case 'tabs':
-                componentToGenerate = 
-                <Tabs>
-                    <TabComponent ids={this.state.childs.children.props.ids}>
-                    </TabComponent>
-                </Tabs>
+                componentToGenerate = (
+                    <Tabs>
+                        <TabComponent ids={this.state.childs.children.props.ids} />
+                    </Tabs>
+                );
                 break;
             case 'inputgroup':
-                componentToGenerate = 
-                <FormGroup>
-                <FormLabel labelText="Input with text action" />
-                <FormItem>
-                    <InputGroup inputType={this.state.childs.children[1].props.children.props.inputType} addonPos={this.retrieveValue("addonPos", this.state.childs.children[1].props.children.props.addonPos, this.state.currentValues)} inputValue={this.retrieveValue("inputValue", this.state.childs.children[1].props.children.props.inputValue, this.state.currentValues)} actions={true}>
-                        <Button type="secondary" glyph={this.retrieveValue("glyph", this.state.childs.children[1].props.children.props.children.props.glyph, this.state.currentValues)}>{this.retrieveValue("children", this.state.childs.children[1].props.children.props.children.props.children, this.state.currentValues)}</Button>
-                    </InputGroup>
-                </FormItem>
-            </FormGroup>
+                componentToGenerate = (
+                    <FormGroup>
+                        <FormLabel labelText="Input with text action" />
+                        <FormItem>
+                            <InputGroup
+                                inputType={this.state.childs.children[1].props.children.props.inputType}
+                                addonPos={this.retrieveValue(
+                                    'addonPos',
+                                    this.state.childs.children[1].props.children.props.addonPos,
+                                    this.state.currentValues
+                                )}
+                                inputValue={this.retrieveValue(
+                                    'inputValue',
+                                    this.state.childs.children[1].props.children.props.inputValue,
+                                    this.state.currentValues
+                                )}
+                                actions={true}
+                            >
+                                <Button
+                                    type="secondary"
+                                    glyph={this.retrieveValue(
+                                        'glyph',
+                                        this.state.childs.children[1].props.children.props.children.props.glyph,
+                                        this.state.currentValues
+                                    )}
+                                >
+                                    {this.retrieveValue(
+                                        'children',
+                                        this.state.childs.children[1].props.children.props.children.props.children,
+                                        this.state.currentValues
+                                    )}
+                                </Button>
+                            </InputGroup>
+                        </FormItem>
+                    </FormGroup>
+                );
                 break;
             case 'listgroup':
-                componentToGenerate = 
-                <ListGroup>
-                <ListGroupItem>{this.retrieveValue("children", this.state.childs.children.props.children[0],this.state.currentValues)}
-                <ListGroupItemActions>
-                                <Button type="secondary" glyph={this.retrieveValue("glyph", this.state.childs.children.props.children[1].props.children.props.glyph, this.state.currentValues)} />
+                componentToGenerate = (
+                    <ListGroup>
+                        <ListGroupItem>
+                            {this.retrieveValue(
+                                'children',
+                                this.state.childs.children.props.children[0],
+                                this.state.currentValues
+                            )}
+                            <ListGroupItemActions>
+                                <Button
+                                    type="secondary"
+                                    glyph={this.retrieveValue(
+                                        'glyph',
+                                        this.state.childs.children.props.children[1].props.children.props.glyph,
+                                        this.state.currentValues
+                                    )}
+                                />
                             </ListGroupItemActions>
-                </ListGroupItem>
-                </ListGroup>
+                        </ListGroupItem>
+                    </ListGroup>
+                );
                 break;
             case 'tile':
-                if (this.state.component == "" || this.state.component == "simple"){
-                    componentToGenerate = 
-                    <Tile>
-                        <TileContent title={this.retrieveValue("title", this.state.childs.children.props.title, this.state.currentValues)}>
-                            <p>{this.retrieveValue("children", this.state.childs.children.props.children.props.children, this.state.currentValues)}</p>
-                        </TileContent>
-                        <TileActions>
-                            <Dropdown size="m" isContextual={true}>
-                                <DropdownList links=
-                                    {[
-                                        { id: 'item_1', url: '#', name: 'Option 1' },
-                                        { id: 'item_2', url: '#', name: 'Option 2' },
-                                        { id: 'item_3', url: '#', name: 'Option 3' }
-                                    ]}>
-                                </DropdownList>
-                            </Dropdown>
-                        </TileActions>
-                    </Tile>
-                }
-                else if (this.state.component == "media") {
-                    componentToGenerate = 
-                    <Tile>
-                        <TileMedia>
-                            <Image size="m" photo="https://placeimg.com/400/400/nature"></Image>
-                        </TileMedia>
-                        <TileContent title={this.retrieveValue("title", this.state.childs.children.props.title, this.state.currentValues)}>
-                        </TileContent>
-                        <TileActions>
+                if (this.state.component == '' || this.state.component == 'simple') {
+                    componentToGenerate = (
+                        <Tile>
+                            <TileContent
+                                title={this.retrieveValue(
+                                    'title',
+                                    this.state.childs.children.props.title,
+                                    this.state.currentValues
+                                )}
+                            >
+                                <p>
+                                    {this.retrieveValue(
+                                        'children',
+                                        this.state.childs.children.props.children.props.children,
+                                        this.state.currentValues
+                                    )}
+                                </p>
+                            </TileContent>
+                            <TileActions>
                                 <Dropdown size="m" isContextual={true}>
-                                    <DropdownList links=
-                                        {[
+                                    <DropdownList
+                                        links={[
                                             { id: 'item_1', url: '#', name: 'Option 1' },
                                             { id: 'item_2', url: '#', name: 'Option 2' },
                                             { id: 'item_3', url: '#', name: 'Option 3' }
-                                        ]}>
-                                    </DropdownList>
+                                        ]}
+                                    />
                                 </Dropdown>
-                        </TileActions>
-                    </Tile>
-                }
-                else if (this.state.component == "product") {
-                    componentToGenerate =
-                    <Tile>
-                        <ProductTile isButton="true">
-                            <ProductTileMedia image="https://techne.yaas.io/images/product-thumbnail-wide.png"></ProductTileMedia>
-                            <ProductTileContent title={this.retrieveValue("title", this.state.childs.children.props.title, this.state.currentValues)}>
-                                <p>{this.retrieveValue("children", this.state.childs.children.props.children.props.children, this.state.currentValues)}</p>
-                            </ProductTileContent>
-                        </ProductTile>
-                    </Tile>;
+                            </TileActions>
+                        </Tile>
+                    );
+                } else if (this.state.component == 'media') {
+                    componentToGenerate = (
+                        <Tile>
+                            <TileMedia>
+                                <Image size="m" photo="https://placeimg.com/400/400/nature" />
+                            </TileMedia>
+                            <TileContent
+                                title={this.retrieveValue(
+                                    'title',
+                                    this.state.childs.children.props.title,
+                                    this.state.currentValues
+                                )}
+                            />
+                            <TileActions>
+                                <Dropdown size="m" isContextual={true}>
+                                    <DropdownList
+                                        links={[
+                                            { id: 'item_1', url: '#', name: 'Option 1' },
+                                            { id: 'item_2', url: '#', name: 'Option 2' },
+                                            { id: 'item_3', url: '#', name: 'Option 3' }
+                                        ]}
+                                    />
+                                </Dropdown>
+                            </TileActions>
+                        </Tile>
+                    );
+                } else if (this.state.component == 'product') {
+                    componentToGenerate = (
+                        <Tile>
+                            <ProductTile isButton="true">
+                                <ProductTileMedia image="https://techne.yaas.io/images/product-thumbnail-wide.png" />
+                                <ProductTileContent
+                                    title={this.retrieveValue(
+                                        'title',
+                                        this.state.childs.children.props.title,
+                                        this.state.currentValues
+                                    )}
+                                >
+                                    <p>
+                                        {this.retrieveValue(
+                                            'children',
+                                            this.state.childs.children.props.children.props.children,
+                                            this.state.currentValues
+                                        )}
+                                    </p>
+                                </ProductTileContent>
+                            </ProductTile>
+                        </Tile>
+                    );
                 }
                 break;
-            
+
             default:
                 break;
-
         }
 
-
         return (
             <div class="row general">
+                <div className="col">{componentToGenerate}</div>
                 <div className="col">
-                {componentToGenerate}
-                </div>
-                <div className="col">
-                <div className="schema">
-                {data}
-                </div>
+                    <div className="schema">{data}</div>
                 </div>
             </div>
-        )
+        );
     }
 }
-
diff --git a/src/index.js b/src/index.js
index bfd8af0d0..1372e42a3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@ import registerServiceWorker from './registerServiceWorker';
 
 import {ActionBar} from '../src/ActionBar/ActionBar'
 import {Alert} from '../src/Alert/Alert'
-import {Badge, Label} from '../src/Badge/Badge'
+import {Badge, Label, Status} from '../src/Badge/Badge'
 import {Breadcrumb, BreadcrumbItem} from '../src/Breadcrumb/Breadcrumb'
 import {Button, ButtonGroup, ButtonGrouped} from '../src/Button/Button'
 import {Calendar} from '../src/Calendar/Calendar'
@@ -50,6 +50,7 @@ export {
     Alert,
     Badge, 
     Label, 
+    Status,
     Breadcrumb,
     BreadcrumbItem,
     Button,