Callout
Um componente de destaque visual utilizado para exibir alertas, dicas ou mensagens importantes.
Informação
Este é um callout informativo, utilizado para comunicar uma mensagem leve e útil.
Utilização
index.tsx
import { Callout, CalloutTitle, CalloutDescription } from "@convertcompany/ui";
Exemplos
Variantes
Success
Sucesso
Operação realizada com sucesso!
Warning
Atenção
Verifique as informações antes de prosseguir.
Danger
Erro
Ocorreu um erro crítico durante o processo.
Hint
Dica
Você pode usar atalhos para acelerar seu fluxo de trabalho.
Tamanhos
Callout padrão
Com padding e fontes em tamanho padrão.
Callout pequeno
Com padding reduzido e fontes menores.
Com ícone customizado
Informação
Este é um callout informativo, utilizado para comunicar uma mensagem leve e útil.
Props
| Propriedade | Tipo |
|---|---|
| variantEstilo visual do callout. | default success info warning danger hint |
| sizeTamanho do callout. | default sm |
| iconÍcone customizado a ser exibido ao lado do conteúdo. | ReactElement |
| classNameClasse CSS adicional para customização. | string |
| childrenConteúdo do callout (título, descrição etc). | ReactNode |
| ...propsDemais props nativas do elemento <div>. | HTMLAttributes<HTMLDivElement> |