diff --git a/@stellar/design-system-website/docs/components/accents/_category_.json b/@stellar/design-system-website/docs/components/accents/_category_.json
new file mode 100644
index 00000000..f7f060ff
--- /dev/null
+++ b/@stellar/design-system-website/docs/components/accents/_category_.json
@@ -0,0 +1,6 @@
+{
+  "label": "Accents",
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/@stellar/design-system-website/docs/components/accents/badge.mdx b/@stellar/design-system-website/docs/components/accents/badge.mdx
new file mode 100644
index 00000000..bc7d1d17
--- /dev/null
+++ b/@stellar/design-system-website/docs/components/accents/badge.mdx
@@ -0,0 +1,19 @@
+---
+slug: /badge
+---
+
+# Badge
+
+<ComponentDescription componentName="Badge" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Badge">
+  <Badge>Label</Badge>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Badge" />
diff --git a/@stellar/design-system-website/src/componentPreview/badgePreview.tsx b/@stellar/design-system-website/src/componentPreview/badgePreview.tsx
new file mode 100644
index 00000000..f7bdcc4f
--- /dev/null
+++ b/@stellar/design-system-website/src/componentPreview/badgePreview.tsx
@@ -0,0 +1,32 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const badgePreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "variant",
+      options: [
+        {
+          value: "default",
+          label: "Default",
+        },
+        {
+          value: "success",
+          label: "Success",
+        },
+        {
+          value: "warning",
+          label: "Warning",
+        },
+        {
+          value: "pending",
+          label: "Pending",
+        },
+        {
+          value: "error",
+          label: "Error",
+        },
+      ],
+    },
+  ],
+};
diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
index 3cfcb8c3..110ea6cc 100644
--- a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
+++ b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
@@ -15,6 +15,7 @@ import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
 import { bannerPreview } from "@site/src/componentPreview/bannerPreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
+import { badgePreview } from "@site/src/componentPreview/badgePreview";
 import { avatarPreview } from "@site/src/componentPreview/avatarPreview";
 
 // =============================================================================
@@ -30,6 +31,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Title: titlePreview,
   Banner: bannerPreview,
   Notification: notificationPreview,
+  Badge: badgePreview,
   Avatar: avatarPreview,
 };
 
diff --git a/@stellar/design-system/src/components/Badge/index.tsx b/@stellar/design-system/src/components/Badge/index.tsx
index a20566f3..5bad4ab7 100644
--- a/@stellar/design-system/src/components/Badge/index.tsx
+++ b/@stellar/design-system/src/components/Badge/index.tsx
@@ -1,11 +1,17 @@
 import React from "react";
 import "./styles.scss";
 
-interface BadgeProps {
+/** */
+export interface BadgeProps {
+  /** Variant of the badge @defaultValue `default` */
   variant?: "default" | "success" | "warning" | "pending" | "error";
+  /** Label of the badge */
   children: string;
 }
 
+/**
+ * `Badge` is used to label or categorize an item. There are five variants: `default`, `success`, `warning`, `pending`, and `error`.
+ */
 export const Badge: React.FC<BadgeProps> = ({
   variant = "default",
   children,