Badge docs + preview

@stellar/design-system-website/docs/components/accents/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Accents",
+  "link": {
+    "type": "generated-index"
+  }
+}

@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" />

@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",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -14,6 +14,7 @@ import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
+import { badgePreview } from "@site/src/componentPreview/badgePreview";
 
 // =============================================================================
 // Component previews
@@ -27,6 +28,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Paragraph: paragraphPreview,
   Title: titlePreview,
   Notification: notificationPreview,
+  Badge: badgePreview,
 };
 
 type Theme = "sds-theme-light" | "sds-theme-dark";

@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,