add Badge

packages/svelte/src/lib/components/DataDisplay/Badge.stories.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { type ComponentProps } from 'svelte';
+	import Badge from './Badge.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Data Display/Badge',
+		component: Badge,
+		argTypes: {
+			color: {
+				control: 'radio',
+				options: [
+					undefined,
+					'primary',
+					'secondary',
+					'accent',
+					'neutral',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			size: {
+				control: 'radio',
+				options: ['xs', 'sm', 'md', 'lg'],
+			},
+			style: {
+				control: 'radio',
+				options: [undefined, 'outline', 'dash', 'soft', 'ghost'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: Partial<ComponentProps<typeof Badge>>)}
+	<Badge {...props}>Badge</Badge>
+{/snippet}
+
+<Story name="Default" children={template} />
+
+<Story name="Sizes">
+	<Badge size="xs">x-small</Badge>
+	<Badge size="sm">small</Badge>
+	<Badge size="md">medium</Badge>
+	<Badge size="lg">large</Badge>
+	<Badge size="xl">x-large</Badge>
+</Story>
+
+<Story name="Colors">
+	<Badge color="primary">Primary</Badge>
+	<Badge color="secondary">Secondary</Badge>
+	<Badge color="accent">Accent</Badge>
+	<Badge color="neutral">Neutral</Badge>
+	<Badge color="info">Info</Badge>
+	<Badge color="success">Success</Badge>
+	<Badge color="warning">Warning</Badge>
+	<Badge color="error">Error</Badge>
+</Story>
+
+<Story name="Outline">
+	<Badge style="outline" color="primary">Primary</Badge>
+	<Badge style="outline" color="secondary">Secondary</Badge>
+	<Badge style="outline" color="accent">Accent</Badge>
+	<Badge style="outline" color="neutral">Neutral</Badge>
+	<Badge style="outline" color="info">Info</Badge>
+	<Badge style="outline" color="success">Success</Badge>
+	<Badge style="outline" color="warning">Warning</Badge>
+	<Badge style="outline" color="error">Error</Badge>
+</Story>
+
+<Story name="Dash">
+	<Badge style="dash" color="primary">Primary</Badge>
+	<Badge style="dash" color="secondary">Secondary</Badge>
+	<Badge style="dash" color="accent">Accent</Badge>
+	<Badge style="dash" color="neutral">Neutral</Badge>
+	<Badge style="dash" color="info">Info</Badge>
+	<Badge style="dash" color="success">Success</Badge>
+	<Badge style="dash" color="warning">Warning</Badge>
+	<Badge style="dash" color="error">Error</Badge>
+</Story>
+
+<Story name="Soft">
+	<Badge style="soft" color="primary">Primary</Badge>
+	<Badge style="soft" color="secondary">Secondary</Badge>
+	<Badge style="soft" color="accent">Accent</Badge>
+	<Badge style="soft" color="neutral">Neutral</Badge>
+	<Badge style="soft" color="info">Info</Badge>
+	<Badge style="soft" color="success">Success</Badge>
+	<Badge style="soft" color="warning">Warning</Badge>
+	<Badge style="soft" color="error">Error</Badge>
+</Story>
+
+<Story name="Ghost">
+	<Badge style="ghost">Ghost</Badge>
+</Story>

packages/svelte/src/lib/components/DataDisplay/Badge.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	export type BadgeStyle = 'outline' | 'dash' | 'soft' | 'ghost';
+</script>
+
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+		color?: DaisyColor;
+		size?: DaisySize | 'xl';
+		style?: BadgeStyle;
+	};
+
+	let { children, color, size, style }: Props = $props();
+</script>
+
+<span
+	class="badge"
+	class:badge-primary={color === 'primary'}
+	class:badge-secondary={color === 'secondary'}
+	class:badge-accent={color === 'accent'}
+	class:badge-neutral={color === 'neutral'}
+	class:badge-info={color === 'info'}
+	class:badge-success={color === 'success'}
+	class:badge-warning={color === 'warning'}
+	class:badge-error={color === 'error'}
+	class:badge-xs={size === 'xs'}
+	class:badge-sm={size === 'sm'}
+	class:badge-md={size === 'md'}
+	class:badge-lg={size === 'lg'}
+	class:badge-xl={size === 'xl'}
+	class:badge-outline={style === 'outline'}
+	class:badge-dash={style === 'dash'}
+	class:badge-soft={style === 'soft'}
+	class:badge-ghost={style === 'ghost'}
+>
+	{@render children?.()}
+</span>

packages/svelte/src/lib/components/DataDisplay/index.ts

@@ -1,3 +1,4 @@
 export { default as Accordion } from './Accordion.svelte';
 export { default as Avatar } from './Avatar.svelte';
-export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { default as Badge } from './Badge.svelte';