diff --git a/docs/script.js b/docs/script.js
index c1cfd28..99de125 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -436,12 +436,12 @@ const sampleCollection = [
   <span class="is-error">framework!</span>
 </a>
 
-<a href="#" class="nes-badge is-splited">
+<a href="#" class="nes-badge is-split">
   <span class="is-dark">npm</span>
   <span class="is-primary">1.1.0</span>
 </a>
 
-<a href="#" class="nes-badge is-splited">
+<a href="#" class="nes-badge is-split">
   <span class="is-dark">test</span>
   <span class="is-success">100%</span>
 </a>
diff --git a/scss/elements/badges.scss b/scss/elements/badges.scss
index 1ac1286..bcc2776 100644
--- a/scss/elements/badges.scss
+++ b/scss/elements/badges.scss
@@ -27,7 +27,7 @@
 @mixin badge-style($color, $background, $option: is-default) {
   $box-shadow-first-two: 0 0.5em $background, 0 -0.5em $background;
 
-  @if $option == is-splited {
+  @if $option == is-split {
     &:first-child {
       @include span-style($color, $background, left);
 
@@ -85,9 +85,10 @@
     "error" $background-color map-get($error-colors, "normal");
 
   @each $type in $types {
-    &.is-splited {
+    &.is-splited, // deprecated. Please use .is-split
+    &.is-split {
       & span.is-#{nth($type, 1)} {
-        @include badge-style(nth($type, 2), nth($type, 3), is-splited);
+        @include badge-style(nth($type, 2), nth($type, 3), is-split);
       }
     }
 
diff --git a/story/badge/badge.template.js b/story/badge/badge.template.js
index 8f7a9c3..d38349f 100644
--- a/story/badge/badge.template.js
+++ b/story/badge/badge.template.js
@@ -12,9 +12,9 @@ export default () => {
 
   const iconStyle = select('Badge Display', {
     default: '',
-    'is-splited': 'is-splited',
+    'is-split': 'is-split',
     'is-icon': 'is-icon',
-  }, 'is-splited');
+  }, 'is-split');
 
   const leftOptions = select('Left Style', {
     ...sharedComponentOptions,