diff --git a/src/components/Badge.stories.tsx b/src/components/Badge.stories.tsx
new file mode 100644
index 0000000..f952327
--- /dev/null
+++ b/src/components/Badge.stories.tsx
@@ -0,0 +1,30 @@
+import React, { Children } from "react";
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Badge from "./Badge";
+
+
+
+export default{
+    title: 'Badge',
+    component: Badge,
+} as ComponentMeta<typeof Badge>;
+
+const Template: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;
+
+export const High = Template.bind({});
+High.args = {
+    emphasis: 'high',
+    children: ['Tom Cook'],
+};
+
+export const Medium = Template.bind({});
+Medium.args = {
+    emphasis: 'medium',
+    children: ['Tanya Fox'],
+};
+
+export const Low = Template.bind({});
+Low.args = {
+    emphasis:'low',
+    children:['Hellen Schmidt'],
+};
\ No newline at end of file
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 0000000..f74404a
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,51 @@
+/* -------------------------------------------------------------------------- */
+/*                                   Imports                                  */
+/* -------------------------------------------------------------------------- */
+
+import classNames from "classnames";
+import { StyleType } from "core/_variants";
+import React from "react";
+
+/* -------------------------------------------------------------------------- */
+/*                               Component props                              */
+/* -------------------------------------------------------------------------- */
+
+type Props = {
+  emphasis?: StyleType;
+  children: React.ReactNode;
+  className?: string;
+  iconed?: boolean;
+  onClick?: () => void;
+} & Omit<React.MouseEventHandler<HTMLSpanElement>, "">;
+
+/* -------------------------------------------------------------------------- */
+/*                          Component implementation                          */
+/* -------------------------------------------------------------------------- */
+
+function Badge({
+  className,
+  children,
+  onClick,
+  emphasis = "low",
+  ...props
+}: Props): JSX.Element {
+  return (
+      <span
+        onClick={onClick}
+        className={classNames(
+          "border p-2 rounded-sm text-xs text-center",
+          {
+            "cursor-pointer": onClick,
+            "border-transparent": emphasis == "low",
+            "bg-blue-400 text-white": emphasis == "high",
+            "border-gray-400 background-gray-200": emphasis == "medium",
+          },
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+  );
+}
+export default Badge;