---
title: Avisos
description: >-
  Aprenda a usar os componentes Note, Tip, Warning, Danger, Check e Callout
  personalizados para destacar informações importantes na sua documentação.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Use os avisos para destacar contextos importantes, como advertências, dicas ou requisitos, sem interromper o fluxo.

## Avisos disponíveis

<Note>
**Nota** - Contexto útil ou informações adicionais. Use para dicas que aprimoram a compreensão.
</Note>

<Info>
**Informação** - Informações ou fatos neutros. Use para detalhes complementares.
</Info>

<Tip>
**Dica** - Práticas recomendadas ou otimizações. Use para “dicas profissionais” que melhoram a experiência.
</Tip>

<Warning>
**Advertência** - Requisitos ou ressalvas importantes. Use quando algo puder causar problemas se for ignorado.
</Warning>

<Danger>
**Perigo** - Advertências críticas. Use para ações que podem causar perda de dados ou problemas de segurança.
</Danger>

<Check>
**Verificação** - Confirmações de sucesso. Use para confirmar um comportamento correto ou uma conclusão bem-sucedida.
</Check>

## Uso

```mdx
<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:

```mdx
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>
```

<Note title="Você sabia?">
Você pode usar **Markdown** nos avisos, incluindo `code` e [links](/pt/components/card).
</Note>

## Com blocos de código

Os avisos podem conter código:

<Warning title="Alteração incompatível na v2.0">
A assinatura da função `getData()` foi alterada:

```javascript
// Before (v1.x)
getData(id)

// After (v2.0)
getData({ id, options })
```
</Warning>

## Práticas recomendadas

<AccordionGroup>
  <Accordion title="Use com moderação" icon="hand" defaultOpen>
    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.
  </Accordion>

  <Accordion title="Escolha o tipo certo" icon="list-check">
    | 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>` |
  </Accordion>

  <Accordion title="Mantenha a concisão" icon="text-width">
    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
  </Accordion>

  <Accordion title="Posicione estrategicamente" icon="arrows-up-down">
    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
  </Accordion>
</AccordionGroup>

## Propriedades

Todos os avisos aceitam as mesmas propriedades:

<ParamField name="title" type="string">
  Título personalizado (substitui o padrão).
</ParamField>

## 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`:

<Callout icon="key" color="#FFC107">
**Personalizado** - Use qualquer ícone e cor para combinar com seu conteúdo.
</Callout>

<Callout icon="rocket" color="#9333EA">
Implante suas alterações com confiança usando nosso pipeline de CI/CD.
</Callout>

<Callout icon="regular/star" color="#EC4899">
Use prefixos de estilo de ícone, como `regular/`, `light/` ou `duotone/`, para diferentes espessuras.
</Callout>

### Uso de avisos personalizados

```mdx
<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

<ParamField name="icon" type="string" default="circle-info">
  Nome do ícone (consulte [Ícones](/pt/content/icons)).
</ParamField>

<ParamField name="color" type="string">
  Código de cor hexadecimal (por exemplo, `#FFC107`). Usa a cor de destaque por padrão.
</ParamField>

**Prefixos de estilo de ícone:** adicione um prefixo para alterar a espessura do ícone:
- `solid/` - Ícones preenchidos (padrão)
- `regular/` - Ícones contornados
- `light/` - Ícones com contorno fino
- `duotone/` - Ícones em dois tons

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Visão geral dos componentes" icon="puzzle-piece" href="/pt/components/overview">
    Consulte todos os componentes disponíveis
  </Card>
  <Card title="Noções básicas de MDX" icon="file-code" href="/pt/content/mdx-basics">
    Saiba como usar componentes em MDX
  </Card>
</Columns>