diff --git a/projects/go-lib/package.json b/projects/go-lib/package.json
index b2ded8e4f..d91b40538 100644
--- a/projects/go-lib/package.json
+++ b/projects/go-lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tangoe/goponents",
-  "version": "1.14.2",
+  "version": "1.15.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mobi/goponents.git"
diff --git a/projects/go-lib/src/lib/components/go-badge/go-badge.component.scss b/projects/go-lib/src/lib/components/go-badge/go-badge.component.scss
index 545bd98a2..3be7aa287 100644
--- a/projects/go-lib/src/lib/components/go-badge/go-badge.component.scss
+++ b/projects/go-lib/src/lib/components/go-badge/go-badge.component.scss
@@ -1,5 +1,5 @@
 @import '../../../../styles/variables';
-@import '../../../../styles//mixins';
+@import '../../../../styles/mixins';
 
 .go-badge {
   @include z-index(1);
diff --git a/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.html b/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.html
new file mode 100644
index 000000000..ffb3c3de6
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.html
@@ -0,0 +1,6 @@
+<span class="go-pill-badge-container">
+  <ng-content></ng-content>
+  <span class="go-pill-badge" [ngClass]="badgeStyles">
+    {{ badgeData | uppercase }}
+  </span>
+</span>
diff --git a/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.scss b/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.scss
new file mode 100644
index 000000000..02caf76da
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.scss
@@ -0,0 +1,30 @@
+@import '../../../../styles/variables';
+@import '../../../../styles/mixins';
+
+.go-pill-badge-container {
+  display: inline-flex;
+}
+
+.go-pill-badge {
+  border-radius: .75rem;
+  font-size: 10px;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  margin-right: 0.5rem;
+  padding: 6px 8px;
+
+  &--info {
+    border: 1px solid $ui-color-neutral;
+    color: $ui-color-neutral;
+  }
+
+  &--success {
+    border: 1px solid $ui-color-positive;
+    color: $ui-color-positive;
+  }
+
+  &--error {
+    border: 1px solid $ui-color-negative;
+    color: $ui-color-negative;
+  }
+}
diff --git a/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.spec.ts b/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.spec.ts
new file mode 100644
index 000000000..0f911023c
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.spec.ts
@@ -0,0 +1,54 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { GoPillBadgeComponent } from "./go-pill-badge.component";
+
+describe("GoPillBadgeComponent", () => {
+  let component: GoPillBadgeComponent;
+  let fixture: ComponentFixture<GoPillBadgeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GoPillBadgeComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GoPillBadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe("badgeClasses()", () => {
+    beforeEach(() => {
+      component.badgeStyles = {};
+    });
+
+    it("returns an object that sets go-pill-badge--success to true based on type", () => {
+      expect(component.badgeStyles["go-pill-badge--success"]).toBeFalsy();
+
+      component.type = "success";
+      component.ngOnChanges();
+      expect(component.badgeStyles["go-pill-badge--success"]).toBe(true);
+    });
+
+    it("returns an object that set go-pill-badge--error to true based on type", () => {
+      expect(component.badgeStyles["go-pill-badge--error"]).toBeFalsy();
+
+      component.type = "error";
+      component.ngOnChanges();
+      expect(component.badgeStyles["go-pill-badge--error"]).toBe(true);
+    });
+
+    it("returns an object that set go-pill-badge--info to true based on type", () => {
+      expect(component.badgeStyles["go-pill-badge--info"]).toBeFalsy();
+
+      component.type = "info";
+      component.ngOnChanges();
+      expect(component.badgeStyles["go-pill-badge--info"]).toBe(true);
+    });
+  });
+});
diff --git a/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.ts b/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.ts
new file mode 100644
index 000000000..92f9a56d5
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'go-pill-badge',
+  templateUrl: './go-pill-badge.component.html',
+  styleUrls: ['./go-pill-badge.component.scss'],
+})
+export class GoPillBadgeComponent implements OnChanges {
+  badgeStyles: object;
+
+  @Input() badgeData: string;
+  @Input() type: string = 'info';
+
+  ngOnChanges(): void {
+    this.badgeStyles = this.badgeClasses();
+  }
+
+  badgeClasses(): object {
+    return {
+      'go-pill-badge--success': this.type === 'success',
+      'go-pill-badge--error': this.type === 'error',
+      'go-pill-badge--info': this.type === 'info',
+    };
+  }
+}
diff --git a/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.module.ts b/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.module.ts
new file mode 100644
index 000000000..ec3405a18
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GoPillBadgeComponent } from './go-pill-badge.component';
+
+@NgModule({
+  declarations: [GoPillBadgeComponent],
+  imports: [CommonModule],
+  exports: [GoPillBadgeComponent],
+})
+export class GoBadgePillModule {}
diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts
index faea1efd6..4bb9ef5ae 100644
--- a/projects/go-lib/src/lib/go-shared.module.ts
+++ b/projects/go-lib/src/lib/go-shared.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { GoAccordionModule } from './components/go-accordion/go-accordion.module';
 import { GoActionSheetModule } from './components/go-action-sheet/go-action-sheet.module';
 import { GoBadgeModule } from './components/go-badge/go-badge.module';
+import { GoBadgePillModule } from './components/go-pill-badge/go-pill-badge.module';
 import { GoButtonGroupModule } from './components/go-button-group/go-button-group.module';
 import { GoButtonModule } from './components/go-button/go-button.module';
 import { GoCardModule } from './components/go-card/go-card.module';
@@ -40,6 +41,7 @@ import { GoCopyCardLinkModule } from './directives/go-copy-card-link/go-copy-car
     GoAccordionModule,
     GoActionSheetModule,
     GoBadgeModule,
+    GoBadgePillModule,
     GoButtonGroupModule,
     GoButtonModule,
     GoCardModule,
@@ -76,6 +78,7 @@ import { GoCopyCardLinkModule } from './directives/go-copy-card-link/go-copy-car
     GoAccordionModule,
     GoActionSheetModule,
     GoBadgeModule,
+    GoBadgePillModule,
     GoButtonGroupModule,
     GoButtonModule,
     GoCardModule,
diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts
index 30465efbf..fa46ad770 100644
--- a/projects/go-lib/src/public_api.ts
+++ b/projects/go-lib/src/public_api.ts
@@ -19,6 +19,10 @@ export * from './lib/components/go-action-sheet/go-panel/go-panel.component';
 export * from './lib/components/go-badge/go-badge.component';
 export * from './lib/components/go-badge/go-badge.module';
 
+// v2 Badge
+export * from './lib/components/go-pill-badge/go-pill-badge.component';
+export * from './lib/components/go-pill-badge/go-pill-badge.module';
+
 // Button
 export * from './lib/components/go-button/go-split-button-option.model';
 export * from './lib/components/go-button/go-button.component';
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.html
index cc9d47736..5f465498a 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.html
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.html
@@ -1,139 +1 @@
-<header class="go-page-title">
-  <h1 class="go-heading-1">{{ pageTitle }}</h1>
-  <a
-  [href]="linkToSource"
-  target="_blank">
-    <go-button buttonVariant="neutral"> View on GitHub </go-button>
-  </a>
-</header>
-
-<section class="go-container">
-  <go-card class="go-column go-column--100" id="usage">
-    <ng-container go-card-header>
-      <h2 class="go-heading-2 go-heading--no-wrap">Usage</h2>
-      <go-copy cardId="usage" goCopyCardLink></go-copy>
-    </ng-container>
-    <ng-container class="go-container" go-card-content>
-      
-      <div class="go-column go-column--100">
-        <!-- Intro -->
-        <p class="go-body-copy">
-          The <code class="code-block--inline">&lt;go-badge&gt;</code>
-          component should be used for times when we want to show a short notification
-          to a user over an icon for more information. A good example of this would be
-          the number of notifications a user has over an icon that goes to their
-          notifications.
-        </p>
-      </div>
-
-      <div class="go-column go-column--100">
-        <!-- Bindings -->
-        <h3 class="go-heading-3">Bindings</h3>
-        <code [highlight]="componentBindings"></code>
-      </div>
-
-      <div class="go-column go-column--100">
-        <h4 class="go-heading-4">badgeData</h4>
-        <p class="go-body-copy">
-          This is the text or data that we want to show up inside of the badge
-        </p>
-      </div>
-
-      <div class="go-column go-column--100">
-        <h4 class="go-heading-4">badgeColor</h4>
-        <p class="go-body-copy">
-          The color can be one of three things <code class="code-block--inline">neutral</code>,
-          <code class="code-block--inline">positive</code> or <code class="code-block--inline">negative</code>.
-          These will denote what type of badge it is whether it's a good thing, bad thing or just information. The badgeColor
-          defaults to `neutral`
-        </p>
-      </div>
-
-      <div class="go-column go-column--100 go-column--no-padding">
-        <h4 class="go-heading-4">displayData</h4>
-        <p class="go-body-copy">
-          This can be used to override whether the information inside of the badge shows up or not.
-          Setting this to false will cause the badge to just be an empty circle without displaying
-          the `badgeData`.
-        </p>
-      </div>
-
-    </ng-container>
-  </go-card>
-
-  <go-card class="go-column go-column--100" id="basic-example">
-    <ng-container go-card-header>
-      <h2 class="go-heading-2 go-heading--no-wrap">Basic Example</h2>
-      <go-copy cardId="basic-example" goCopyCardLink></go-copy>
-    </ng-container>
-    <ng-container go-card-content>
-      <p class="go-body-copy">
-        The badge uses content projection to apply itself to an inline element inside of it. You
-        can apply it to any element by wrapping the element in the <code class="code-block--inline">go-badge</code>
-      </p>
-
-      <h3 class="go-heading-3">Icon</h3>
-      <section class="go-container">
-        <div class="go-column go-column--50 go-column--no-padding">
-          <code [highlight]="iconBadge"></code>
-        </div>
-        <div class="go-column go-column--50 go-column--no-padding">
-          <go-badge badgeData="12">
-            <go-icon icon="notifications"></go-icon>
-          </go-badge>
-        </div>
-      </section>
-    </ng-container>
-  </go-card>
-
-  <go-card class="go-column go-column--100" id="badge-color">
-    <ng-container go-card-header>
-      <h2 class="go-heading-2 go-heading--no-wrap">Badge Color</h2>
-      <go-copy cardId="badge-color" goCopyCardLink></go-copy>
-    </ng-container>
-    <ng-container go-card-content>
-      <h3 class="go-heading-3">Positive</h3>
-      <section class="go-container">
-        <div class="go-column go-column--50">
-          <code [highlight]="iconBadgePositive"></code>
-        </div>
-        <div class="go-column go-column--50">
-          <go-badge badgeData="12" badgeColor="positive">
-            <go-icon icon="notifications"></go-icon>
-          </go-badge>
-        </div>
-      </section>
-
-      <h3 class="go-heading-3">Negative</h3>
-      <section class="go-container">
-        <div class="go-column go-column--50 go-column--no-padding">
-          <code [highlight]="iconBadgeNegative"></code>
-        </div>
-        <div class="go-column go-column--50 go-column--no-padding">
-          <go-badge badgeData="12" badgeColor="negative">
-            <go-icon icon="notifications"></go-icon>
-          </go-badge>
-        </div>
-      </section>
-    </ng-container>
-  </go-card>
-
-  <go-card class="go-column go-column--100" id="display-data">
-    <ng-container go-card-header>
-      <h2 class="go-heading-2 go-heading--no-wrap">Display Data</h2>
-      <go-copy cardId="display-data" goCopyCardLink></go-copy>
-    </ng-container>
-    <ng-container go-card-content>
-      <section class="go-container">
-        <div class="go-column go-column--75 go-column--no-padding">
-          <code [highlight]="iconBadgeDisplay"></code>
-        </div>
-        <div class="go-column go-column--25 go-column--no-padding">
-          <go-badge badgeData="really long text that we want to hide" [displayData]="false">
-            <go-icon icon="notifications"></go-icon>
-          </go-badge>
-        </div>
-      </section>
-    </ng-container>
-  </go-card>
-</section>
+<app-sub-nav [menuItems]="menuItems"></app-sub-nav>
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.ts
new file mode 100644
index 000000000..b2f3a3103
--- /dev/null
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NavGroup } from '../../../../../../../go-lib/src/public_api';
+
+@Component({
+  selector: 'app-badge-docs',
+  templateUrl: './badge-docs.component.html'
+})
+export class BadgeDocsComponent {
+  menuItems: Array<NavGroup> = [
+    {
+      routeTitle: 'Badges', subRoutes: [
+        { route: './', routeTitle: 'Positioned' },
+        { route: './pill', routeTitle: 'Pill' },
+      ]
+    }
+  ];
+}
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/pill-badge-docs/pill-badge-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/pill-badge-docs/pill-badge-docs.component.html
new file mode 100644
index 000000000..f22a0f076
--- /dev/null
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/pill-badge-docs/pill-badge-docs.component.html
@@ -0,0 +1,86 @@
+<section class="go-container">
+  <go-card class="go-column go-column--100" id="usage">
+    <ng-container go-card-header>
+      <h2 class="go-heading-2 go-heading--no-wrap">Usage</h2>
+      <go-copy cardId="usage" goCopyCardLink></go-copy>
+    </ng-container>
+    <ng-container class="go-container" go-card-content>
+      <div class="go-column go-column--100">
+        <!-- Intro -->
+        <p class="go-body-copy">
+          The <code class="code-block--inline">&lt;go-pill-badge&gt;</code> are
+          used to display short details or numbers.
+        </p>
+      </div>
+
+      <div class="go-column go-column--100">
+        <!-- Bindings -->
+        <h3 class="go-heading-3">Bindings</h3>
+        <code [highlight]="componentBindings"></code>
+      </div>
+
+      <div class="go-column go-column--100">
+        <h4 class="go-heading-4">badgeData</h4>
+        <p class="go-body-copy">
+          This is the text or data that we want to show up inside of the badge
+        </p>
+      </div>
+
+      <div class="go-column go-column--100">
+        <h4 class="go-heading-4">type</h4>
+        <p class="go-body-copy">
+          The type can be one of three things
+          <code class="code-block--inline">info</code>,
+          <code class="code-block--inline">success</code> or
+          <code class="code-block--inline">error</code>. These will denote what
+          type of badge it is whether it's a success, error or just information.
+          The type defaults to `info`
+        </p>
+      </div>
+    </ng-container>
+  </go-card>
+
+  <go-card class="go-column go-column--100" id="pill-badge">
+    <ng-container go-card-header>
+      <h2 class="go-heading-2 go-heading--no-wrap">Examples</h2>
+      <go-copy cardId="pill-badge" goCopyCardLink></go-copy>
+    </ng-container>
+    <ng-container go-card-content>
+      <div class="go-column go-column--100">
+        <h3 class="go-heading-3">Info</h3>
+        <section class="go-container">
+          <div class="go-column go-column--50 go-column--no-padding">
+            <code [highlight]="iconBadgeInfo"></code>
+          </div>
+          <div class="go-column go-column--50 go-column--no-padding">
+            <go-pill-badge badgeData="12" type="info"></go-pill-badge>
+          </div>
+        </section>
+      </div>
+
+      <div class="go-column go-column--100">
+        <h3 class="go-heading-3">Success</h3>
+        <section class="go-container">
+          <div class="go-column go-column--50">
+            <code [highlight]="iconBadgeSuccess"></code>
+          </div>
+          <div class="go-column go-column--50">
+            <go-pill-badge badgeData="Success" type="success"></go-pill-badge>
+          </div>
+        </section>
+      </div>
+
+      <div class="go-column go-column--100">
+        <h3 class="go-heading-3">Error</h3>
+        <section class="go-container">
+          <div class="go-column go-column--50 go-column--no-padding">
+            <code [highlight]="iconBadgeError"></code>
+          </div>
+          <div class="go-column go-column--50 go-column--no-padding">
+            <go-pill-badge badgeData="Error" type="error"></go-pill-badge>
+          </div>
+        </section>
+      </div>
+    </ng-container>
+  </go-card>
+</section>
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/pill-badge-docs/pill-badge-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/pill-badge-docs/pill-badge-docs.component.ts
new file mode 100644
index 000000000..5cd636def
--- /dev/null
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/pill-badge-docs/pill-badge-docs.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service';
+
+@Component({
+  selector: 'app-pill-badge-docs',
+  templateUrl: './pill-badge-docs.component.html',
+})
+export class PillBadgeDocsComponent {
+  componentBindings: string = `
+  @Input() badgeData: string;
+  @Input() type: string = 'info';
+  `;
+
+  iconBadgeInfo: string = `<go-pill-badge badgeData="12" type="info"></go-pill-badge>`;
+
+  iconBadgeSuccess: string = `<go-pill-badge badgeData="success" type="success"></go-pill-badge>`;
+
+  iconBadgeError: string = `<go-pill-badge badgeData="Error" type="error"></go-pill-badge>`;
+
+  constructor(private subNavService: SubNavService) {
+    this.subNavService.pageTitle = 'Pill Badge';
+    this.subNavService.linkToSource =
+      'https://github.com/mobi/goponents/tree/dev/projects/go-lib/src/lib/components/go-pill-badge';
+  }
+}
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/positioned-badge-docs/positioned-badge-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/positioned-badge-docs/positioned-badge-docs.component.html
new file mode 100644
index 000000000..bb17c9267
--- /dev/null
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/positioned-badge-docs/positioned-badge-docs.component.html
@@ -0,0 +1,134 @@
+<section class="go-container">
+  <go-card class="go-column go-column--100" id="usage">
+    <ng-container go-card-header>
+      <h2 class="go-heading-2 go-heading--no-wrap">Usage</h2>
+      <go-copy cardId="usage" goCopyCardLink></go-copy>
+    </ng-container>
+    <ng-container class="go-container" go-card-content>
+      <div class="go-column go-column--100">
+        <!-- Intro -->
+        <p class="go-body-copy">
+          The <code class="code-block--inline">&lt;go-badge&gt;</code>
+          component should be used for times when we want to show a short
+          notification to a user over an icon for more information. A good
+          example of this would be the number of notifications a user has over
+          an icon that goes to their notifications.
+        </p>
+      </div>
+
+      <div class="go-column go-column--100">
+        <!-- Bindings -->
+        <h3 class="go-heading-3">Bindings</h3>
+        <code [highlight]="componentBindings"></code>
+      </div>
+
+      <div class="go-column go-column--100">
+        <h4 class="go-heading-4">badgeData</h4>
+        <p class="go-body-copy">
+          This is the text or data that we want to show up inside of the badge
+        </p>
+      </div>
+
+      <div class="go-column go-column--100">
+        <h4 class="go-heading-4">badgeColor</h4>
+        <p class="go-body-copy">
+          The color can be one of three things
+          <code class="code-block--inline">neutral</code>,
+          <code class="code-block--inline">positive</code> or
+          <code class="code-block--inline">negative</code>. These will denote
+          what type of badge it is whether it's a good thing, bad thing or just
+          information. The badgeColor defaults to `neutral`
+        </p>
+      </div>
+
+      <div class="go-column go-column--100 go-column--no-padding">
+        <h4 class="go-heading-4">displayData</h4>
+        <p class="go-body-copy">
+          This can be used to override whether the information inside of the
+          badge shows up or not. Setting this to false will cause the badge to
+          just be an empty circle without displaying the `badgeData`.
+        </p>
+      </div>
+    </ng-container>
+  </go-card>
+
+  <go-card class="go-column go-column--100" id="basic-example">
+    <ng-container go-card-header>
+      <h2 class="go-heading-2 go-heading--no-wrap">Basic Example</h2>
+      <go-copy cardId="basic-example" goCopyCardLink></go-copy>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        The badge uses content projection to apply itself to an inline element
+        inside of it. You can apply it to any element by wrapping the element in
+        the <code class="code-block--inline">go-badge</code>
+      </p>
+
+      <h3 class="go-heading-3">Icon</h3>
+      <section class="go-container">
+        <div class="go-column go-column--50 go-column--no-padding">
+          <code [highlight]="iconBadge"></code>
+        </div>
+        <div class="go-column go-column--50 go-column--no-padding">
+          <go-badge badgeData="12">
+            <go-icon icon="notifications"></go-icon>
+          </go-badge>
+        </div>
+      </section>
+    </ng-container>
+  </go-card>
+
+  <go-card class="go-column go-column--100" id="badge-color">
+    <ng-container go-card-header>
+      <h2 class="go-heading-2 go-heading--no-wrap">Badge Color</h2>
+      <go-copy cardId="badge-color" goCopyCardLink></go-copy>
+    </ng-container>
+    <ng-container go-card-content>
+      <h3 class="go-heading-3">Positive</h3>
+      <section class="go-container">
+        <div class="go-column go-column--50">
+          <code [highlight]="iconBadgePositive"></code>
+        </div>
+        <div class="go-column go-column--50">
+          <go-badge badgeData="12" badgeColor="positive">
+            <go-icon icon="notifications"></go-icon>
+          </go-badge>
+        </div>
+      </section>
+
+      <h3 class="go-heading-3">Negative</h3>
+      <section class="go-container">
+        <div class="go-column go-column--50 go-column--no-padding">
+          <code [highlight]="iconBadgeNegative"></code>
+        </div>
+        <div class="go-column go-column--50 go-column--no-padding">
+          <go-badge badgeData="12" badgeColor="negative">
+            <go-icon icon="notifications"></go-icon>
+          </go-badge>
+        </div>
+      </section>
+    </ng-container>
+  </go-card>
+
+  <go-card class="go-column go-column--100" id="display-data">
+    <ng-container go-card-header>
+      <h2 class="go-heading-2 go-heading--no-wrap">Display Data</h2>
+      <go-copy cardId="display-data" goCopyCardLink></go-copy>
+    </ng-container>
+    <ng-container go-card-content>
+      <section class="go-container">
+        <div class="go-column go-column--75 go-column--no-padding">
+          <code [highlight]="iconBadgeDisplay"></code>
+        </div>
+        <div class="go-column go-column--25 go-column--no-padding">
+          <go-badge
+            badgeData="really long text that we want to hide"
+            [displayData]="false"
+          >
+            <go-icon icon="notifications"></go-icon>
+          </go-badge>
+        </div>
+      </section>
+    </ng-container>
+  </go-card>
+</section>
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.coponent.ts b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/positioned-badge-docs/positioned-badge-docs.component.ts
similarity index 61%
rename from projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.coponent.ts
rename to projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/positioned-badge-docs/positioned-badge-docs.component.ts
index 9f24cac32..508b7004e 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.coponent.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/components/positioned-badge-docs/positioned-badge-docs.component.ts
@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
+import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service';
 
 @Component({
-  selector: 'app-badge-docs',
-  templateUrl: './badge-docs.component.html'
+  selector: 'app-positioned-badge-docs',
+  templateUrl: './positioned-badge-docs.component.html',
 })
-export class BadgeDocsComponent {
+export class PositionedBadgeDocsComponent {
   componentBindings: string = `
   @Input() badgeData: string;
   @Input() badgeColor: string = 'neutral';
@@ -35,6 +36,9 @@ export class BadgeDocsComponent {
   </go-badge>
   `;
 
-  pageTitle: string = 'Badge';
-  linkToSource: string = 'https://github.com/mobi/goponents/tree/dev/projects/go-lib/src/lib/components/go-badge';
+  constructor(private subNavService: SubNavService) {
+    this.subNavService.pageTitle = 'Positioned Badge';
+    this.subNavService.linkToSource =
+      'https://github.com/mobi/goponents/tree/dev/projects/go-lib/src/lib/components/go-badge';
+  }
 }
diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts
index 6e334c263..e29834411 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts
@@ -4,7 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { AccordionDocsComponent } from '../components/accordion-docs/accordion-docs.component';
 import { AccordionPanelDocsComponent } from '../components/accordion-docs/components/accordion-panel-docs/accordion-panel-docs.component';
 import { ActionSheetDocsComponent } from '../components/action-sheet-docs/action-sheet-docs.component';
-import { BadgeDocsComponent } from '../components/badge-docs/badge-docs.coponent';
+import { BadgeDocsComponent } from '../components/badge-docs/badge-docs.component';
 import { ButtonDocsComponent } from '../components/button-docs/button-docs.component';
 import { CardDocsComponent } from '../components/card-docs/card-docs.component';
 import { CopyDocsComponent } from '../components/copy-docs/copy-docs.component';
@@ -62,6 +62,8 @@ import { TableChildRowsComponent } from '../components/table-docs/components/tab
 import { TimepickerDocsComponent } from '../components/form-docs/components/timepicker-docs/timepicker-docs.component';
 import { EditorDocsComponent } from '../components/form-docs/components/editor-docs/editor-docs.component';
 import { ButtonGroupDocsComponent } from '../components/button-group-docs/button-group-docs.component';
+import { PositionedBadgeDocsComponent } from '../components/badge-docs/components/positioned-badge-docs/positioned-badge-docs.component';
+import { PillBadgeDocsComponent } from '../components/badge-docs/components/pill-badge-docs/pill-badge-docs.component';
 
 const routes: Routes = [
   { path: 'ui-kit', component: UiKitComponent },
@@ -74,7 +76,10 @@ const routes: Routes = [
     { path: '', component: ActionSheetOverviewComponent },
     { path: 'panel', component: ActionSheetPanelDocsComponent }
   ]},
-  { path: 'ui-kit/badge', component: BadgeDocsComponent },
+  { path: 'ui-kit/badge', component: BadgeDocsComponent , children: [
+    { path: '', component: PositionedBadgeDocsComponent },
+    { path: 'pill', component: PillBadgeDocsComponent }
+  ]},
   { path: 'ui-kit/button', component: ButtonDocsComponent },
   { path: 'ui-kit/button-group', component: ButtonGroupDocsComponent },
   { path: 'ui-kit/card', component: CardDocsComponent },
diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts
index 3c2ac5e7a..f13dc2860 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts
@@ -9,6 +9,7 @@ import {
   GoAccordionModule,
   GoActionSheetModule,
   GoBadgeModule,
+  GoBadgePillModule,
   GoButtonModule,
   GoCardModule,
   GoCheckboxModule,
@@ -45,7 +46,7 @@ import { UiKitRoutesModule } from './routes/ui-kit-routing.module';
 // Module Components
 import { AccordionDocsComponent } from './components/accordion-docs/accordion-docs.component';
 import { AccordionPanelDocsComponent } from './components/accordion-docs/components/accordion-panel-docs/accordion-panel-docs.component';
-import { BadgeDocsComponent } from './components/badge-docs/badge-docs.coponent';
+import { BadgeDocsComponent } from './components/badge-docs/badge-docs.component';
 import { ButtonDocsComponent } from './components/button-docs/button-docs.component';
 import { CardDocsComponent } from './components/card-docs/card-docs.component';
 import { ConfigurationDocsComponent } from './components/configuration-docs/configuration-docs.component';
@@ -111,6 +112,8 @@ import { TableChildRowsComponent } from './components/table-docs/components/tabl
 import { TimepickerDocsComponent } from './components/form-docs/components/timepicker-docs/timepicker-docs.component';
 import { EditorDocsComponent } from './components/form-docs/components/editor-docs/editor-docs.component';
 import { ButtonGroupDocsComponent } from './components/button-group-docs/button-group-docs.component';
+import { PillBadgeDocsComponent } from './components/badge-docs/components/pill-badge-docs/pill-badge-docs.component';
+import { PositionedBadgeDocsComponent } from './components/badge-docs/components/positioned-badge-docs/positioned-badge-docs.component';
 
 @NgModule({
   imports: [
@@ -118,6 +121,7 @@ import { ButtonGroupDocsComponent } from './components/button-group-docs/button-
     GoAccordionModule,
     GoActionSheetModule,
     GoBadgeModule,
+    GoBadgePillModule,
     GoButtonModule,
     GoCardModule,
     GoCheckboxModule,
@@ -214,7 +218,9 @@ import { ButtonGroupDocsComponent } from './components/button-group-docs/button-
     VirtualScrollComponent,
     TableChildRowsComponent,
     TimepickerDocsComponent,
-    EditorDocsComponent
+    EditorDocsComponent,
+    PillBadgeDocsComponent,
+    PositionedBadgeDocsComponent
   ],
   providers: [
     DatePipe,