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
+
+
+
+## Example
+
+```tsx live
+
+ Label
+
+```
+
+## Props
+
+
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 48d4933b..220922fa 100644
--- a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
+++ b/@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";
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 = ({
variant = "default",
children,