diff --git a/docs/badge.stories.js b/docs/badge.stories.js
index 7265590..5d80bb4 100644
--- a/docs/badge.stories.js
+++ b/docs/badge.stories.js
@@ -8,26 +8,29 @@ stories.addDecorator(withKnobs);
 
 stories.add('badges', () => {
   const optionsLeft = radios('class-left', {
+    default: 'is-dark',
     'is-dark': 'is-dark',
     'is-success': 'is-success',
     'is-primary': 'is-primary',
     'is-warning': 'is-warning',
     'is-error': 'is-error',
-  }, '');
+  }, 'is-dark');
 
   const optionsRight = radios('class-right', {
+    default: 'is-success',
     'is-dark': 'is-dark',
     'is-success': 'is-success',
     'is-primary': 'is-primary',
     'is-warning': 'is-warning',
     'is-error': 'is-error',
-  }, '');
+  }, 'is-success');
 
   const sizes = radios('size', {
+    default: 'is-medium',
     'is-small': 'is-small',
     'is-medium': 'is-medium',
     'is-large': 'is-large',
-  }, '');
+  }, 'is-medium');
 
   return `<span class="nes-badge ${sizes}">
               <span class="${optionsLeft}">npm</span>
diff --git a/scss/elements/badges.scss b/scss/elements/badges.scss
index 95e47b9..4fe643b 100644
--- a/scss/elements/badges.scss
+++ b/scss/elements/badges.scss
@@ -1,9 +1,9 @@
 @mixin span-style($color, $background, $left) {
   position: absolute;
-  color: $color;
-  background-color: $background;
   top: 0;
   width: 50%;
+  color: $color;
+  background-color: $background;
 
   @if $left == 0 {
     left: 0;
@@ -46,6 +46,7 @@
   $border-size: 4px;
 
   position: relative;
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -55,7 +56,6 @@
   white-space: nowrap;
   vertical-align: middle;
   cursor: $cursor-click-url;
-  box-sizing: border-box;
   user-select: none;
   border: none;