Масштабируемые компоненты

Если компонент оборачивает React элемент, расширяйте его пропсы через ComponentProps. Так вы сразу получаете нативные атрибуты (onClick, disabled, type) без ручного дублирования типов. Это также уменьшает риск рассинхрона, когда в компоненте забывают добавить новый атрибут, уже доступный в платформе.

import type { ComponentProps, ReactNode } from "react";

interface ButtonProps extends ComponentProps<"button"> {
  children: ReactNode;
  variant?: "primary" | "secondary";
  ...
}

const Button = ({ variant = "primary", children, ...props }: ButtonProps) => (
  <button className={variant} {...props}>
    {children}
  </button>
);

export const App = () => (
  <Button
    variant="secondary"
    onClick={() => console.log("clicked")}
  >
    Закрыть
  </Button>
);

Такой подход упрощает поддержку: типы короче, компонент легче переиспользовать, а API остается предсказуемым. Держите типы рядом с компонентом и не усложняйте интерфейс без необходимости. Если компонент начинает расти, вы всегда можете добавить собственные пропсы поверх ComponentProps, не ломая базовую совместимость.