Props

Props são as propriedades de um componente. Quando você cria um component no Figma com propriedade "tamanho: pequeno, médio, grande" e "tem ícone: sim, não", você está declarando props.

function Alerta({ tipo, titulo, temIcone = true }) {
  return (
    <div className={`alerta alerta--${tipo}`}>
      {temIcone && <Icone tipo={tipo} />}
      <strong>{titulo}</strong>
    </div>
  );
}

<Alerta tipo="erro" titulo="Não deu pra salvar" />
<Alerta tipo="sucesso" titulo="Salvo" temIcone={false} />

O = true no temIcone é o valor padrão: se ninguém passar, ele vem ligado.

Props descem, e só descem

Um componente pai passa props pro filho. O filho não altera o que recebeu, ele só usa. Se algo precisa mudar com o tempo ou com o clique do usuário, isso não é prop, é estado.

Essa é a confusão mais comum de quem está começando, e a distinção é simples: prop vem de fora e é fixa naquele momento, estado nasce dentro e muda.

Nome de prop é decisão de design

variante="primario" conta mais que azul={true}. Prop com nome ligado à intenção sobrevive à próxima troca de identidade visual, prop com nome ligado à aparência não. É a mesma regra de nomear token.