diff --git a/apps/website/src/components/menu/menu.tsx b/apps/website/src/components/menu/menu.tsx
index 15caa9101..629e4feaf 100644
--- a/apps/website/src/components/menu/menu.tsx
+++ b/apps/website/src/components/menu/menu.tsx
@@ -19,6 +19,10 @@ export const Menu = component$<Props>(({ onClose$ }) => {
       label: 'Alert',
       path: `/docs/${appState.theme.toLowerCase()}/alert`,
     },
+    {
+      label: 'Badge',
+      path: `/docs/${appState.theme.toLowerCase()}/badge`,
+    },
     {
       label: 'Breadcrumb',
       path: `/docs/${appState.theme.toLowerCase()}/breadcrumb`,
diff --git a/apps/website/src/routes/docs/daisy/badge/index.tsx b/apps/website/src/routes/docs/daisy/badge/index.tsx
new file mode 100644
index 000000000..dfe37f381
--- /dev/null
+++ b/apps/website/src/routes/docs/daisy/badge/index.tsx
@@ -0,0 +1,177 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Badge, Button } from '@qwik-ui/theme-daisy';
+
+export default component$(() => {
+  useStylesScoped$(`
+    h1 { margin: 0.5rem 0 1rem 0; padding-top: 1rem; font-weight: bold; }
+  `);
+  return (
+    <>
+      <h2>This is the documentation for the Badge</h2>
+
+      <h1>Badge Example</h1>
+
+      <Badge>badge</Badge>
+
+      <h1>Variant</h1>
+
+      <div class="flex gap-2">
+        <Badge>neutral</Badge>
+        <Badge variant="primary">primary</Badge>
+        <Badge variant="secondary">secondary</Badge>
+        <Badge variant="accent">accent</Badge>
+        <Badge variant="ghost">ghost</Badge>
+        <Badge variant="info">info</Badge>
+        <Badge variant="success">success</Badge>
+        <Badge variant="warning">warning</Badge>
+        <Badge variant="error">error</Badge>
+      </div>
+
+      <h1>Outline</h1>
+      <div class="flex gap-2">
+        <Badge outline>neutral</Badge>
+        <Badge variant="primary" outline>
+          primary
+        </Badge>
+        <Badge variant="secondary" outline>
+          secondary
+        </Badge>
+        <Badge variant="accent" outline>
+          accent
+        </Badge>
+        <Badge variant="ghost" outline>
+          ghost
+        </Badge>
+        <Badge variant="info" outline>
+          info
+        </Badge>
+        <Badge variant="success" outline>
+          success
+        </Badge>
+        <Badge variant="warning" outline>
+          warning
+        </Badge>
+        <Badge variant="error" outline>
+          error
+        </Badge>
+      </div>
+
+      <h1>Badge sizes</h1>
+      <div class="flex gap-2">
+        <Badge size="lg">Badge lg</Badge>
+        <Badge size="md">Badge md</Badge>
+        <Badge size="sm">Badge sm</Badge>
+        <Badge size="xs">Badge xs</Badge>
+      </div>
+
+      <h1>Empty badge</h1>
+      <div class="flex gap-2">
+        <Badge size="lg" />
+        <Badge size="md" />
+        <Badge size="sm" />
+        <Badge size="xs" />
+      </div>
+
+      <h1>Badge with state colors</h1>
+      <div class="flex gap-2">
+        <Badge variant="info" class="gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="inline-block w-4 h-4 stroke-current"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
+          </svg>
+          info
+        </Badge>
+
+        <Badge variant="success" class="gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="inline-block w-4 h-4 stroke-current"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
+          </svg>
+          success
+        </Badge>
+        <Badge variant="warning" class="gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="inline-block w-4 h-4 stroke-current"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
+          </svg>
+          warning
+        </Badge>
+        <Badge variant="error" class="gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="inline-block w-4 h-4 stroke-current"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
+          </svg>
+          error
+        </Badge>
+      </div>
+
+      <h1>Badge in a text</h1>
+      <div class="flex flex-col gap-2">
+        <h2 class="text-xl">
+          Heading
+          <Badge size="lg">NEW</Badge>
+        </h2>
+        <h3 class="text-lg">
+          Heading
+          <Badge size="md">NEW</Badge>
+        </h3>
+        <h4 class="text-base">
+          Heading
+          <Badge size="sm">NEW</Badge>
+        </h4>
+        <h5 class="text-sm">
+          Heading
+          <Badge size="xs">NEW</Badge>
+        </h5>
+      </div>
+
+      <h1>Badge in a button</h1>
+      <div class="flex gap-2">
+        <Button variant="primary" class="gap-2">
+          Inbox
+          <Badge variant="primary">+4</Badge>
+        </Button>
+        <Button variant="secondary" class="gap-2">
+          Inbox
+          <Badge variant="primary">+5</Badge>
+        </Button>
+      </div>
+    </>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/badge/index.tsx b/apps/website/src/routes/docs/headless/badge/index.tsx
new file mode 100644
index 000000000..a05e58b95
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/badge/index.tsx
@@ -0,0 +1,65 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Badge, Button } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStylesScoped$(`
+    h1 { margin: 0.5rem 0 1rem 0; padding-top: 1rem; font-weight: bold; }
+    .container { display: flex; gap: 10px; } .customBtnCls { background-color: lightcoral;}
+    svg { width: 1rem; height: 1rem; stroke: currentColor }
+    .badge-lg {height: 1.5rem;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      padding-left: 0.688rem;
+      padding-right: 0.688rem;
+    }
+  `);
+  return (
+    <>
+      <h2>This is the documentation for the Badge</h2>
+
+      <h1>Badge Example</h1>
+
+      <Badge class="badge">badge</Badge>
+
+      <h1>Color</h1>
+
+      <div class="container">
+        <Badge class="badge">neutral</Badge>
+        <Badge class="badge" style="background-color: lightblue">
+          lightblue
+        </Badge>
+      </div>
+
+      <h1>Badge sizes</h1>
+      <Badge class="badge badge-lg">Badge lg</Badge>
+
+      <h1>Empty badge</h1>
+      <Badge class="badge" />
+
+      <h1>Badge with state colors</h1>
+      <Badge class="badge">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          ></path>
+        </svg>
+        info
+      </Badge>
+
+      <h1>Badge in a text</h1>
+      <h2>
+        Heading
+        <Badge class="badge">NEW</Badge>
+      </h2>
+
+      <h1>Badge in a button</h1>
+      <Button style="background-color: lightcoral">
+        Inbox
+        <Badge class="badge">+4</Badge>
+      </Button>
+    </>
+  );
+});
diff --git a/packages/daisy/src/components/badge/badge.tsx b/packages/daisy/src/components/badge/badge.tsx
new file mode 100644
index 000000000..545709e66
--- /dev/null
+++ b/packages/daisy/src/components/badge/badge.tsx
@@ -0,0 +1,71 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+import { Badge as HeadlessBadge } from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
+
+export type DaisyBadgeProps = {
+  variant?: DaisyBadgeVariants;
+  size?: DaisyBadgeSizes;
+  outline?: boolean;
+};
+
+export type DaisyBadgeVariants =
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'ghost'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error';
+export type DaisyBadgeSizes = 'xs' | 'sm' | 'md' | 'lg';
+export type BadgeProps = HTMLAttributes<HTMLElement> & DaisyBadgeProps;
+
+export const Badge = component$((props: BadgeProps) => {
+  const {
+    size = 'md',
+    variant = 'neutral',
+    class: classNames,
+    outline,
+    ...rest
+  } = props;
+
+  const { variants, sizes, options } = {
+    variants: {
+      neutral: '',
+      primary: 'badge-primary',
+      secondary: 'badge-secondary',
+      accent: 'badge-accent',
+      ghost: 'badge-ghost',
+      info: 'badge-info',
+      success: 'badge-success',
+      warning: 'badge-warning',
+      error: 'badge-error',
+    },
+    sizes: {
+      xs: 'badge-xs',
+      sm: 'badge-sm',
+      md: 'badge-md',
+      lg: 'badge-lg',
+    },
+    options: {
+      outline: 'badge-outline',
+    },
+  };
+
+  return (
+    <HeadlessBadge
+      {...rest}
+      class={clsq(
+        'badge',
+        variants[variant],
+        sizes[size],
+        {
+          [options.outline]: outline,
+        },
+        classNames
+      )}
+    >
+      <Slot />
+    </HeadlessBadge>
+  );
+});
diff --git a/packages/daisy/src/index.ts b/packages/daisy/src/index.ts
index bef57aa08..e4eaa9d00 100644
--- a/packages/daisy/src/index.ts
+++ b/packages/daisy/src/index.ts
@@ -1,5 +1,6 @@
 export * from './components/accordion/accordion';
 export * from './components/alert/alert';
+export * from './components/badge/badge';
 export * from './components/button/button';
 export * from './components/progress/progress';
 export * from './components/button-group/button-group';
diff --git a/packages/headless/src/components/badge/badge.tsx b/packages/headless/src/components/badge/badge.tsx
new file mode 100644
index 000000000..d80d137f3
--- /dev/null
+++ b/packages/headless/src/components/badge/badge.tsx
@@ -0,0 +1,11 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+
+export type BadgeProps = HTMLAttributes<HTMLElement>;
+
+export const Badge = component$((props: BadgeProps) => {
+  return (
+    <div {...props}>
+      <Slot />
+    </div>
+  );
+});
diff --git a/packages/headless/src/index.ts b/packages/headless/src/index.ts
index cc32eee09..7b46d7348 100644
--- a/packages/headless/src/index.ts
+++ b/packages/headless/src/index.ts
@@ -1,5 +1,6 @@
 export * from './components/accordion/accordion';
 export * from './components/alert/alert';
+export * from './components/badge/badge';
 export * from './components/button/button';
 export * from './components/progress/progress';
 export * from './components/button-group/button-group';