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>
   );