From f8d13193eaf8b17fee5f51615eb94b11784e0417 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 14 Jul 2026 10:36:08 +0300
Subject: [PATCH] refactor(Badge): forward native span props via spread

---
 src/shared/ui/Badge/ui/Badge.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/shared/ui/Badge/ui/Badge.tsx b/src/shared/ui/Badge/ui/Badge.tsx
index 9150fd5..0f79939 100644
--- a/src/shared/ui/Badge/ui/Badge.tsx
+++ b/src/shared/ui/Badge/ui/Badge.tsx
@@ -1,14 +1,10 @@
-import type { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { cn } from '$shared/lib';
 
 export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'outline';
 export type BadgeSize = 'xs' | 'sm' | 'md';
 
-interface Props {
-  /**
-   * Badge content
-   */
-  children: ReactNode;
+interface Props extends Pick<ComponentPropsWithoutRef<'span'>, 'children' | 'className' | 'style'> {
   /**
    * Visual variant
    * @default 'default'
@@ -19,10 +15,6 @@ interface Props {
    * @default 'sm'
    */
   size?: BadgeSize;
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
 }
 
 const VARIANTS: Record<BadgeVariant, string> = {
@@ -41,9 +33,17 @@ const SIZES: Record<BadgeSize, string> = {
 /**
  * Small label for categorization or status.
  */
-export function Badge({ children, variant = 'default', size = 'sm', className }: Props) {
+export function Badge({ children, variant = 'default', size = 'sm', className, ...rest }: Props) {
   return (
-    <span className={cn('inline-block uppercase tracking-wider', SIZES[size], VARIANTS[variant], className)}>
+    <span
+      className={cn(
+        'inline-flex items-center leading-none uppercase tracking-wider',
+        SIZES[size],
+        VARIANTS[variant],
+        className,
+      )}
+      {...rest}
+    >
       {children}
     </span>
   );