diff --git a/apps/docs/content/_components/badge.md b/apps/docs/content/_components/badge.md
index 929dc31..3e98561 100644
--- a/apps/docs/content/_components/badge.md
+++ b/apps/docs/content/_components/badge.md
@@ -111,7 +111,7 @@ The component itself does not provide any specific accessibility features. Pleas
<<<../../../../packages/sfui/frameworks/react/components/SfBadge/SfBadge.tsx
::
-::react-only
+::qwik-only
<<<../../../../dist/packages/qwik-storefront-ui/components/SfBadge/index.tsx
diff --git a/apps/website/public/images/woman_avatar.png b/apps/website/public/images/woman_avatar.png
new file mode 100644
index 0000000..9cf8911
Binary files /dev/null and b/apps/website/public/images/woman_avatar.png differ
diff --git a/apps/website/src/routes/examples/SfBadge/index.tsx b/apps/website/src/routes/examples/SfBadge/index.tsx
new file mode 100644
index 0000000..3593732
--- /dev/null
+++ b/apps/website/src/routes/examples/SfBadge/index.tsx
@@ -0,0 +1,62 @@
+import { component$, useContext, useTask$ } from '@builder.io/qwik';
+import { SfBadge, SfBadgePlacement, SfBadgeVariant, SfButton, SfIconShoppingCart } from 'qwik-storefront-ui';
+import { ComponentExample } from '../../../components/utils/ComponentExample';
+import { ControlsType } from '../../../components/utils/types';
+import { EXAMPLES_STATE } from '../layout';
+
+export default component$(() => {
+
+ const examplesState = useContext(EXAMPLES_STATE);
+
+ useTask$(() => {
+ examplesState.data = {
+ controls: [
+ {
+ type: 'text',
+ modelName: 'content',
+ description: 'Content to display in the badge.',
+ propType: 'string | number',
+ },
+ {
+ type: 'text',
+ modelName: 'max',
+ description: 'Maximum number of counter to show.',
+ propType: 'number',
+ propDefaultValue: '99',
+ },
+ {
+ type: 'select',
+ modelName: 'variant',
+ description: 'Badge can have content or be a simple dot.',
+ options: Object.values(SfBadgeVariant),
+ propType: 'SfBadgeVariant',
+ propDefaultValue: 'standard',
+ },
+ {
+ type: 'select',
+ modelName: 'placement',
+ description: 'Position of the badge relatively to a container.',
+ options: Object.values(SfBadgePlacement),
+ propType: 'SfBadgePlacement',
+ propDefaultValue: 'top-right',
+ },
+ ] satisfies ControlsType,
+
+ state: {
+ content: '1',
+ max: 99,
+ variant: SfBadgeVariant.standard,
+ placement: SfBadgePlacement['top-right'],
+ }
+ }
+ });
+
+ return (
+
+
+
+
+
+
+ );
+});
\ No newline at end of file
diff --git a/apps/website/src/routes/showcases/Badge/BadgeAvatar/index.tsx b/apps/website/src/routes/showcases/Badge/BadgeAvatar/index.tsx
new file mode 100644
index 0000000..2e75fcb
--- /dev/null
+++ b/apps/website/src/routes/showcases/Badge/BadgeAvatar/index.tsx
@@ -0,0 +1,20 @@
+import { SfBadge } from 'qwik-storefront-ui';
+
+export default function BadgeAvatar() {
+ return (
+
+ -
+
+
+
+
+ -
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/website/src/routes/showcases/Badge/BadgeBasic/index.tsx b/apps/website/src/routes/showcases/Badge/BadgeBasic/index.tsx
new file mode 100644
index 0000000..2366174
--- /dev/null
+++ b/apps/website/src/routes/showcases/Badge/BadgeBasic/index.tsx
@@ -0,0 +1,28 @@
+import { component$ } from '@builder.io/qwik';
+import { SfBadge, SfButton, SfIconShoppingCart } from 'qwik-storefront-ui';
+
+export default component$(() => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+})
\ No newline at end of file
diff --git a/apps/website/src/routes/showcases/Badge/BadgeOutline/index.tsx b/apps/website/src/routes/showcases/Badge/BadgeOutline/index.tsx
new file mode 100644
index 0000000..bfe64b7
--- /dev/null
+++ b/apps/website/src/routes/showcases/Badge/BadgeOutline/index.tsx
@@ -0,0 +1,29 @@
+import { SfBadge, SfButton, SfIconShoppingCart } from "qwik-storefront-ui";
+
+export default function BadgeOutline() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/qwik-storefront-ui/src/components/SfBadge/SfBadge.tsx b/packages/qwik-storefront-ui/src/components/SfBadge/SfBadge.tsx
new file mode 100644
index 0000000..0c4b7b6
--- /dev/null
+++ b/packages/qwik-storefront-ui/src/components/SfBadge/SfBadge.tsx
@@ -0,0 +1,40 @@
+import { component$ } from '@builder.io/qwik';
+import { SfBadgePlacement, SfBadgeProps } from './types';
+
+export const SfBadge = component$(
+ ({
+ content,
+ variant,
+ max = 99,
+ class: className,
+ placement = SfBadgePlacement['top-right'],
+ ...attributes
+}: SfBadgeProps) => {
+ const isDot = variant === 'dot';
+ let displayValue = content;
+ if (isDot) {
+ displayValue = '';
+ } else if (!Number.isNaN(content) && Number(content) > max) {
+ displayValue = `${max}+`;
+ }
+ return (
+
+ {displayValue}
+
+ );
+})
diff --git a/packages/qwik-storefront-ui/src/components/SfBadge/index.ts b/packages/qwik-storefront-ui/src/components/SfBadge/index.ts
new file mode 100644
index 0000000..a1891a0
--- /dev/null
+++ b/packages/qwik-storefront-ui/src/components/SfBadge/index.ts
@@ -0,0 +1,3 @@
+export * from './types';
+
+export { SfBadge } from './SfBadge';
diff --git a/packages/qwik-storefront-ui/src/components/SfBadge/types.ts b/packages/qwik-storefront-ui/src/components/SfBadge/types.ts
new file mode 100644
index 0000000..6ecef71
--- /dev/null
+++ b/packages/qwik-storefront-ui/src/components/SfBadge/types.ts
@@ -0,0 +1,19 @@
+export type SfBadgeProps = {
+ content?: string | number;
+ max?: number;
+ class?: string;
+ placement?: `${SfBadgePlacement}`;
+ variant?: `${SfBadgeVariant}`;
+}
+
+ export enum SfBadgeVariant {
+ standard = 'standard',
+ dot = 'dot',
+ }
+
+ export enum SfBadgePlacement {
+ 'top-right' = 'top-right',
+ 'top-left' = 'top-left',
+ 'bottom-right' = 'bottom-right',
+ 'bottom-left' = 'bottom-left',
+ }
\ No newline at end of file
diff --git a/packages/qwik-storefront-ui/src/components/index.ts b/packages/qwik-storefront-ui/src/components/index.ts
index 6e95cea..3d55c39 100644
--- a/packages/qwik-storefront-ui/src/components/index.ts
+++ b/packages/qwik-storefront-ui/src/components/index.ts
@@ -1,4 +1,5 @@
export * from './SfAccordionItem';
+export * from './SfBadge';
export * from './SfButton';
export * from './SfCheckbox';
export * from './SfChip';
@@ -21,3 +22,4 @@ export * from './SfSelect';
export * from './SfSwitch';
export * from './SfThumbnail';
export * from './SfTooltip';
+