Avisos
Aprenda a usar os componentes Note, Tip, Warning, Danger, Check e Callout personalizados para destacar informações importantes na sua documentação.
Use os avisos para destacar contextos importantes, como advertências, dicas ou requisitos, sem interromper o fluxo.
Avisos disponíveis
Nota - Contexto útil ou informações adicionais. Use para dicas que aprimoram a compreensão.
Informação - Informações ou fatos neutros. Use para detalhes complementares.
Dica - Práticas recomendadas ou otimizações. Use para “dicas profissionais” que melhoram a experiência.
Advertência - Requisitos ou ressalvas importantes. Use quando algo puder causar problemas se for ignorado.
Perigo - Advertências críticas. Use para ações que podem causar perda de dados ou problemas de segurança.
Verificação - Confirmações de sucesso. Use para confirmar um comportamento correto ou uma conclusão bem-sucedida.
Uso
<Note>
This is helpful context for the reader.
</Note>
<Warning>
This could cause issues if you skip this step.
</Warning>
<Danger>
This action cannot be undone. Proceed with caution.
</Danger>Com títulos
Adicione um título personalizado a qualquer aviso:
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>Você pode usar Markdown nos avisos, incluindo code e links.
Com blocos de código
Os avisos podem conter código:
A assinatura da função getData() foi alterada:
// Before (v1.x)
getData(id)
// After (v2.0)
getData({ id, options })Práticas recomendadas
Avisos em excesso diluem seu impacto. Procure usar no máximo 1 ou 2 por página.
Reserve os avisos para informações que o leitor não pode deixar de ver.
| Cenário | Aviso |
|---|---|
| Dica útil | <Tip> |
| Contexto adicional | <Note> ou <Info> |
| Possível problema | <Warning> |
| Ação irreversível | <Danger> |
| Confirmação | <Check> |
| Identidade visual personalizada | <Callout> |
Os avisos devem ser fáceis de examinar. Se precisar de vários parágrafos, considere usar um Accordion.
Bom: Uma ou duas frases Evite: Vários parágrafos de texto
Posicione os avisos:
- Antes do código que tenha requisitos
- Depois de instruções com ressalvas importantes
- Perto do conteúdo ao qual fazem referência
Propriedades
Todos os avisos aceitam as mesmas propriedades:
Título personalizado (substitui o padrão).
Acessibilidade
Os avisos são implementados com HTML semântico e funções ARIA:
- Os leitores de tela anunciam o tipo de aviso
- A cor não é o único indicador (ícones são incluídos)
- Contraste de cores suficiente em ambos os temas
Aviso personalizado
Crie avisos com ícones e cores personalizados usando o componente Callout:
Personalizado - Use qualquer ícone e cor para combinar com seu conteúdo.
Implante suas alterações com confiança usando nosso pipeline de CI/CD.
Use prefixos de estilo de ícone, como regular/, light/ ou duotone/, para diferentes espessuras.
Uso de avisos personalizados
<Callout icon="key" color="#FFC107">
This callout uses a key icon with amber color.
</Callout>
<Callout icon="rocket" color="#9333EA">
This callout uses a rocket icon with purple color.
</Callout>
<Callout icon="regular/star" color="#EC4899">
Use style prefixes for different icon weights.
</Callout>Propriedades de avisos personalizados
Nome do ícone (consulte Ícones).
Código de cor hexadecimal (por exemplo, #FFC107). Usa a cor de destaque por padrão.
Prefixos de estilo de ícone: adicione um prefixo para alterar a espessura do ícone:
solid/- Ícones preenchidos (padrão)regular/- Ícones contornadoslight/- Ícones com contorno finoduotone/- Ícones em dois tons