Children prop

children - это основной способ композиции в React. Через него компонент принимает любой контент между открывающим и закрывающим тегами: текст, иконки, другие компоненты. За счет этого можно строить гибкие контейнеры и layout-компоненты без множества специальных пропсов под каждый сценарий.

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

interface ButtonProps extends ComponentProps<'button'> {
  children: ReactNode;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
}

const Button = ({
  children,
  variant = 'primary',
  size = 'medium',
  className,
  ...props
}: ButtonProps) => (
  <button className={`btn btn-${variant} btn-${size} ${className}`} {...props}>
    {children}
  </button>
);

export const App = () => (
  <div>
    <Button variant='primary'>Текст</Button>
    <Button variant='secondary'>
      <Icon name='save' />
      Текст с иконкой
    </Button>
    <Button variant='danger'>
      <span className='font-bold'>Жирный</span> текст
    </Button>
  </div>
);

Обычно для children достаточно ReactNode. Если нужно ограничение, можно типизировать строже:

interface TextOnlyProps {
  children: string;
}

const TextOnly = ({ children }: TextOnlyProps) => <p>{children}</p>;

children - такой же проп, как и остальные. Если компонент должен принимать только текст или только элементы, укажите это явно в типах. Такое ограничение особенно полезно для базовых UI-компонентов в дизайн-системе, где API должен быть предсказуемым.