diff --git a/src/components/Badge.module.css b/src/components/Badge.module.css
new file mode 100644
index 0000000..83a6211
--- /dev/null
+++ b/src/components/Badge.module.css
@@ -0,0 +1,12 @@
+@layer components {
+  .badge {
+    padding: var(--spacing-xs) var(--spacing-s);
+    border-radius: var(--border-radius-xs);
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    line-height: 1.2em;
+  }
+}
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 0000000..cd6ce47
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,12 @@
+import cx from 'clsx';
+import { ReactNode } from 'react';
+import styles from './Badge.module.css';
+
+type BadgeProps = {
+  extendClassName?: HTMLDivElement['className'];
+  children?: ReactNode;
+};
+
+export function Badge({ extendClassName, children }: BadgeProps) {
+  return <div className={cx(styles.badge, extendClassName)}>{children}</div>;
+}