From 9b9aab9f2b9265f52ef0b8cef4fe3a308ffc0027 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 10 Apr 2018 18:25:15 -0400
Subject: [PATCH] docs(badge): add usage

---
 core/src/components/badge/readme.md           | 19 ----------------
 core/src/components/badge/usage/angular.md    | 22 +++++++++++++++++++
 core/src/components/badge/usage/javascript.md | 22 +++++++++++++++++++
 3 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 core/src/components/badge/usage/angular.md
 create mode 100644 core/src/components/badge/usage/javascript.md

diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md
index b52ace9f75..d782f806d6 100644
--- a/core/src/components/badge/readme.md
+++ b/core/src/components/badge/readme.md
@@ -2,25 +2,6 @@
 
 Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are.
 
-```html
-<ion-badge>99</ion-badge>
-
-<!-- Colors -->
-<ion-badge color="primary">11</ion-badge>
-<ion-badge color="secondary">22</ion-badge>
-<ion-badge color="warning">33</ion-badge>
-<ion-badge color="danger">44</ion-badge>
-<ion-badge color="light">55</ion-badge>
-<ion-badge color="dark">66</ion-badge>
-
-<!-- Item with badge on left and right -->
-<ion-item>
-  <ion-badge slot="start">11</ion-badge>
-  <ion-label>My Item</ion-label>
-  <ion-badge slot="end">22</ion-badge>
-</ion-item>
-```
-
 
 <!-- Auto Generated Below -->
 
diff --git a/core/src/components/badge/usage/angular.md b/core/src/components/badge/usage/angular.md
new file mode 100644
index 0000000000..92e8dd5c44
--- /dev/null
+++ b/core/src/components/badge/usage/angular.md
@@ -0,0 +1,22 @@
+```html
+<!-- Default -->
+<ion-badge>99</ion-badge>
+
+<!-- Colors -->
+<ion-badge color="primary">11</ion-badge>
+<ion-badge color="secondary">22</ion-badge>
+<ion-badge color="tertiary">33</ion-badge>
+<ion-badge color="success">44</ion-badge>
+<ion-badge color="warning">55</ion-badge>
+<ion-badge color="danger">66</ion-badge>
+<ion-badge color="light">77</ion-badge>
+<ion-badge color="medium">88</ion-badge>
+<ion-badge color="dark">99</ion-badge>
+
+<!-- Item with badge on left and right -->
+<ion-item>
+  <ion-badge slot="start">11</ion-badge>
+  <ion-label>My Item</ion-label>
+  <ion-badge slot="end">22</ion-badge>
+</ion-item>
+```
\ No newline at end of file
diff --git a/core/src/components/badge/usage/javascript.md b/core/src/components/badge/usage/javascript.md
new file mode 100644
index 0000000000..92e8dd5c44
--- /dev/null
+++ b/core/src/components/badge/usage/javascript.md
@@ -0,0 +1,22 @@
+```html
+<!-- Default -->
+<ion-badge>99</ion-badge>
+
+<!-- Colors -->
+<ion-badge color="primary">11</ion-badge>
+<ion-badge color="secondary">22</ion-badge>
+<ion-badge color="tertiary">33</ion-badge>
+<ion-badge color="success">44</ion-badge>
+<ion-badge color="warning">55</ion-badge>
+<ion-badge color="danger">66</ion-badge>
+<ion-badge color="light">77</ion-badge>
+<ion-badge color="medium">88</ion-badge>
+<ion-badge color="dark">99</ion-badge>
+
+<!-- Item with badge on left and right -->
+<ion-item>
+  <ion-badge slot="start">11</ion-badge>
+  <ion-label>My Item</ion-label>
+  <ion-badge slot="end">22</ion-badge>
+</ion-item>
+```
\ No newline at end of file