diff --git a/packages/chakra-ui-sass/src/components/badge/Badge.module.scss b/packages/chakra-ui-sass/src/components/badge/Badge.module.scss
new file mode 100644
index 0000000..ece0e14
--- /dev/null
+++ b/packages/chakra-ui-sass/src/components/badge/Badge.module.scss
@@ -0,0 +1,138 @@
+%badge-style {
+  display: inline-block;
+  min-height: 16px;
+  margin: 0 5px;
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-txt-xs);
+  font-weight: var(--font-large);
+  line-height: 14px;
+  color: var(--color-white);
+}
+%badge-style:first-of-type {
+  margin-left: 0;
+}
+
+.outline {
+  background-color: transparent !important;
+}
+
+.badge {
+  @extend %badge-style;
+  background-color: var(--color-gray-500);
+
+  &.subtle {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-800);
+  }
+
+  &.outline {
+    color: var(--color-gray-600);
+    border: 1px solid var(--color-gray-500);
+  }
+
+  &-blue {
+    @extend %badge-style;
+    background-color: var(--color-blue-500);
+
+    &.outline {
+      color: var(--color-blue-600);
+      border: 1px solid var(--color-blue-500);
+    }
+
+    &.subtle {
+      background-color: var(--color-blue-100);
+      color: var(--color-blue-800);
+    }
+  }
+
+  &-teal {
+    @extend %badge-style;
+    background-color: var(--color-teal-500);
+
+    &.outline {
+      color: var(--color-teal-600);
+      border: 1px solid var(--color-teal-500);
+    }
+
+    &.subtle {
+      background-color: var(--color-teal-100);
+      color: var(--color-teal-800);
+    }
+  }
+
+  &-green {
+    @extend %badge-style;
+    background-color: var(--color-green-500);
+
+    &.outline {
+      color: var(--color-green-600);
+      border: 1px solid var(--color-green-500);
+    }
+
+    &.subtle {
+      background-color: var(--color-green-100);
+      color: var(--color-green-800);
+    }
+  }
+
+  &-red {
+    @extend %badge-style;
+    background-color: var(--color-red-500);
+
+    &.outline {
+      color: var(--color-red-600);
+      border: 1px solid var(--color-red-500);
+    }
+
+    &.subtle {
+      background-color: var(--color-red-100);
+      color: var(--color-red-800);
+    }
+  }
+
+  &-purple {
+    @extend %badge-style;
+    background-color: var(--color-purple-500);
+
+    &.outline {
+      color: var(--color-purple-600);
+      border: 1px solid var(--color-purple-500);
+    }
+
+    &.subtle {
+      background-color: var(--color-purple-100);
+      color: var(--color-purple-800);
+    }
+  }
+
+  &-pink {
+    @extend %badge-style;
+    background-color: var(--color-pink-500);
+
+    &.outline {
+      color: var(--color-pink-600);
+      border: 1px solid var(--color-pink-500);
+    }
+
+    &.subtle {
+      background-color: var(--color-pink-100);
+      color: var(--color-pink-800);
+    }
+  }
+
+  &-orange {
+    @extend %badge-style;
+    background-color: var(--color-orange-500);
+
+    &.outline {
+      color: var(--color-orange-600);
+      border: 1px solid var(--color-orange-500);
+    }
+
+    &.subtle {
+      background-color: var(--color-orange-100);
+      color: var(--color-orange-800);
+    }
+  }
+}
diff --git a/packages/chakra-ui-sass/src/components/badge/Badge.stories.tsx b/packages/chakra-ui-sass/src/components/badge/Badge.stories.tsx
new file mode 100644
index 0000000..329dfc7
--- /dev/null
+++ b/packages/chakra-ui-sass/src/components/badge/Badge.stories.tsx
@@ -0,0 +1,13 @@
+import { StoryFn } from '@storybook/react';
+import { IBadgeProps } from './Badge.types';
+import { Badge } from './Badge';
+export default {
+  title: 'chakra-ui-sass/Components/Badge',
+  component: Badge
+};
+
+export const BadgeStory: StoryFn<IBadgeProps> = (props) => {
+  return <Badge {...props}>BADGE</Badge>;
+};
+
+BadgeStory.storyName = 'Badge';
diff --git a/packages/chakra-ui-sass/src/components/badge/Badge.tsx b/packages/chakra-ui-sass/src/components/badge/Badge.tsx
new file mode 100644
index 0000000..1d13b98
--- /dev/null
+++ b/packages/chakra-ui-sass/src/components/badge/Badge.tsx
@@ -0,0 +1,16 @@
+import styled from './Badge.module.scss';
+import { IBadgeProps } from './Badge.types';
+
+export const Badge = ({ variant = 'default', color = 'default', children }: IBadgeProps) => {
+  return (
+    <span
+      className={`${color !== 'default' ? styled[`badge-${color}`] : styled.badge} ${
+        variant !== 'default' ? styled[variant] : ``
+      }`}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Badge;
diff --git a/packages/chakra-ui-sass/src/components/badge/Badge.types.ts b/packages/chakra-ui-sass/src/components/badge/Badge.types.ts
new file mode 100644
index 0000000..ad57ce0
--- /dev/null
+++ b/packages/chakra-ui-sass/src/components/badge/Badge.types.ts
@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { IChildrenProps } from '../../types/props.types';
+
+export interface IBadgeProps extends IChildrenProps, HTMLAttributes<HTMLElement> {
+  variant: 'default' | 'outline' | 'subtle';
+  color: 'default' | 'blue' | 'teal' | 'green' | 'red' | 'purple' | 'pink' | 'orange';
+}
diff --git a/packages/chakra-ui-sass/src/components/badge/index.ts b/packages/chakra-ui-sass/src/components/badge/index.ts
new file mode 100644
index 0000000..9c8edca
--- /dev/null
+++ b/packages/chakra-ui-sass/src/components/badge/index.ts
@@ -0,0 +1 @@
+export * from './Badge';
diff --git a/packages/chakra-ui-sass/src/foundation/root/_color-root.scss b/packages/chakra-ui-sass/src/foundation/root/_color-root.scss
index db9a7bb..c1b6977 100644
--- a/packages/chakra-ui-sass/src/foundation/root/_color-root.scss
+++ b/packages/chakra-ui-sass/src/foundation/root/_color-root.scss
@@ -1,8 +1,8 @@
 @import '../variables/color-variables';
 
 :root {
-  --color-black: $black;
-  --color-white: $white;
+  --color-black: #{$black};
+  --color-white: #{$white};
 
   @each $key, $value in $color-black {
     --color-black-#{$key}: #{$value};