fix(kbadge): doc issues [khcp-3409] (#588)

Docs clean up.
Kong · Apr 18, 2022 · 55f87d5 · 55f87d5
1 parent e76362e
commit 55f87d5
Showing 1 changed file with 11 additions and 9 deletions.
diff --git a/docs/components/badge.md b/docs/components/badge.md
@@ -21,10 +21,10 @@ The Badge component can take the following appearance values:
 - `default`
 - `custom`
 
-<KBadge appearance="success">SUCCESS</KBadge>
-<KBadge appearance="warning">WARNING</KBadge>
-<KBadge appearance="danger">DANGER</KBadge>
-<KBadge appearance="info">INFO</KBadge>
+<KBadge appearance="success" class="mr-2">SUCCESS</KBadge>
+<KBadge appearance="warning" class="mr-2">WARNING</KBadge>
+<KBadge appearance="danger" class="mr-2">DANGER</KBadge>
+<KBadge appearance="info" class="mr-2">INFO</KBadge>
 <KBadge>DEFAULT</KBadge>
 
 ```vue
@@ -42,7 +42,7 @@ The Badge has two shapes that can be changed with a `shape` property.
 - `rounded` - Default
 - `rectangular`
 
-<KBadge appearance="warning">Round</KBadge>
+<KBadge appearance="warning" class="mr-2">Round</KBadge>
 <KBadge appearance="warning" shape="rectangular">Rectangular</KBadge>
 
 ```vue
@@ -54,10 +54,10 @@ The Badge has two shapes that can be changed with a `shape` property.
 
 Using the `custom` appearance in conjunction with `color` and `background-color`:
 
-<KBadge color="var(--yellow-500)" background-color="var(--yellow-200)">Custom</KBadge>
-<KBadge color="var(--red-100)" background-color="var(--red-400)">Badge</KBadge>
-<KBadge color="var(--blue-200)" background-color="var(--blue-500)">Hello</KBadge>
-<KBadge color="#dfe6e9" background-color="#636e72">Something</KBadge>
+<KBadge color="var(--yellow-500)" background-color="var(--yellow-200)" class="mr-2">Custom</KBadge>
+<KBadge color="var(--red-100)" background-color="var(--red-400)" class="mr-2">Badge</KBadge>
+<KBadge color="var(--blue-200)" background-color="var(--blue-500)" class="mr-2">Hello</KBadge>
+<KBadge color="#dfe6e9" background-color="#636e72" class="mr-2">Something</KBadge>
 <KBadge color="var(--red-500)" background-color="var(--red-300)">Long Badge 236bfb09-fe79-4cc9-99be-9361d6b1db64 aa07575b-bcd3-4bb2-bfd7-998224e3d31e 364b78fc-dba3-4b94-9134-388515496de5</KBadge>
 
 ```vue
@@ -72,6 +72,8 @@ Using the `custom` appearance in conjunction with `color` and `background-color`
 
 - `default` - innerHTML inside badge
 
+<KBadge appearance="success">SUCCESS</KBadge>
+
 ```vue
 <KBadge appearance="success">SUCCESS</KBadge>
 ```