✨ Make data attributes passable to badges

Author: Frontendland

src/components/Badge/Badge.astro

@@ -8,7 +8,8 @@ interface Props extends BadgeProps {
 
 const {
     theme,
-    interactive
+    interactive,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -18,6 +19,6 @@ const classes = [
 ]
 ---
 
-<span class:list={classes}>
+<span class:list={classes} {...rest}>
     <slot />
 </span>

src/components/Badge/Badge.svelte

@@ -12,6 +12,6 @@
     ].filter(Boolean).join(' ')
 </script>
 
-<span class={classes} on:click={onClick}>
+<span class={classes} on:click={onClick} {...$$restProps}>
     <slot />
 </span>

src/components/Badge/Badge.tsx

@@ -6,15 +6,15 @@ type ReactBadgeProps = {
     children: React.ReactNode
 } & BadgeProps
 
-const Badge = ({ theme, onClick, children }: ReactBadgeProps) => {
+const Badge = ({ theme, onClick, children, ...rest }: ReactBadgeProps) => {
     const classes = [
         'w-badge',
         theme || null,
         onClick && 'hover'
     ].filter(Boolean).join(' ')
 
     return (
-        <span className={classes} onClick={onClick}>
+        <span className={classes} onClick={onClick} {...rest}>
             {children}
         </span>
     )