CSS состояния компонентов

Состояния вроде hover, focus и disabled лучше описывать через CSS-селекторы. Это проще, чем дублировать поведение через JavaScript-классы и обработчики. Кроме читаемости, это помогает не смешивать визуальные состояния в одном месте.

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

import styles from './Button.module.css';

interface ButtonProps extends ComponentProps<'button'> {
  children: ReactNode;
}

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

/* Button.module.css */
.button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
}

.button:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

CSS сам обрабатывает такие состояния, поэтому компонент остается чище и легче в поддержке. JavaScript стоит добавлять только там, где действительно нужна логика, а не визуальный state.