Confirmação

Card centralizado para o fim de um fluxo: ícone de status, título, mensagem, dados para conferir, aviso e ações.

const CupomCadastrado = () => <Confirmacao
    status="success"
    title="Cupom cadastrado!"
    message="Seus números da sorte já estão na sua conta. Boa sorte!"
    primaryAction={{ label: 'Ver meus números', href: '#numeros' }}
    secondaryAction={{ label: 'Cadastrar outro cupom', href: '#cadastro' }} />;

Conferir antes de confirmar

Com details e notice, o mesmo bloco mostra os dados informados e avisa que não poderão ser alterados.

const ConfirmarDados = () => <Confirmacao
    status="warning"
    title="Confira os dados do cupom"
    message="As informações abaixo estão corretas?"
    details={[
      { label: 'CNPJ', value: '00.000.000/0001-00' },
      { label: 'Valor da compra', value: 'R$ 150,00' },
      { label: 'Data da compra', value: '15/10/2026' },
      { label: 'Número do cupom', value: '000123456' },
    ]}
    notice="Estas informações não poderão ser alteradas após a confirmação."
    primaryAction={{ label: 'Confirmar', onClick: fn() }}
    secondaryAction={{ label: 'Corrigir', onClick: fn() }} />;

O que adaptar

Prop	O que é
`status`	`success`, `info` ou `warning`: muda o ícone e a cor de destaque.
`title`, `message`	Título e texto do resultado.
`details`	Lista de rótulo e valor (CNPJ, valor da compra, data, número do cupom).
`notice`	Aviso exibido antes das ações.
`primaryAction`, `secondaryAction`	Ações com `label` e `href` ou `onClick`.