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;