---
title: Riquadri informativi
description: >-
  Scopri come usare i componenti Note, Tip, Warning, Danger, Check e Callout
  personalizzati per evidenziare le informazioni chiave nella documentazione.
---

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

Usa i riquadri informativi per evidenziare contesti importanti, come avvisi, suggerimenti o requisiti, senza interrompere il flusso.

## Riquadri disponibili

<Note>
**Note** - Contesto utile o informazioni aggiuntive. Usalo per suggerimenti che migliorano la comprensione.
</Note>

<Info>
**Info** - Informazioni o fatti neutrali. Usalo per dettagli supplementari.
</Info>

<Tip>
**Tip** - Procedure consigliate o ottimizzazioni. Usalo per suggerimenti avanzati che migliorano l'esperienza.
</Tip>

<Warning>
**Warning** - Avvertenze o requisiti importanti. Usalo quando ignorare qualcosa potrebbe causare problemi.
</Warning>

<Danger>
**Danger** - Avvertenze critiche. Usalo per azioni che potrebbero causare perdita di dati o problemi di sicurezza.
</Danger>

<Check>
**Check** - Conferme di operazioni riuscite. Usalo per confermare un comportamento corretto o il completamento di un'operazione.
</Check>

## Utilizzo

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

## Con titoli

Aggiungi un titolo personalizzato a qualsiasi riquadro informativo:

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

<Note title="Did you know?">
Puoi usare **Markdown** nei riquadri informativi, inclusi `code` e i [link](/it/components/card).
</Note>

## Con blocchi di codice

I riquadri informativi possono contenere codice:

<Warning title="Breaking Change in v2.0">
La firma della funzione `getData()` è cambiata:

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

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

## Procedure consigliate

<AccordionGroup>
  <Accordion title="Usa con moderazione" icon="hand" defaultOpen>
    Un numero eccessivo di riquadri informativi ne riduce l'efficacia. Cerca di usarne al massimo 1-2 per pagina.

    Riserva i riquadri informativi alle informazioni che il lettore non deve assolutamente ignorare.
  </Accordion>

  <Accordion title="Scegli il tipo corretto" icon="list-check">
    | Scenario | Riquadro |
    |----------|---------|
    | Suggerimento utile | `<Tip>` |
    | Contesto aggiuntivo | `<Note>` o `<Info>` |
    | Possibile problema | `<Warning>` |
    | Azione irreversibile | `<Danger>` |
    | Conferma | `<Check>` |
    | Branding personalizzato | `<Callout>` |
  </Accordion>

  <Accordion title="Mantienili concisi" icon="text-width">
    I riquadri informativi devono essere facilmente consultabili. Se ti servono più paragrafi, valuta l'uso di un Accordion.

    **Buono:** una o due frasi
    **Da evitare:** più paragrafi di testo
  </Accordion>

  <Accordion title="Posizionali strategicamente" icon="arrows-up-down">
    Posiziona i riquadri informativi:
    - **Prima del** codice che presenta requisiti
    - **Dopo** istruzioni con avvertenze importanti
    - **Vicino** al contenuto a cui fanno riferimento
  </Accordion>
</AccordionGroup>

## Proprietà

Tutti i riquadri informativi accettano le stesse proprietà:

<ParamField name="title" type="string">
  Titolo personalizzato (sostituisce quello predefinito).
</ParamField>

## Accessibilità

I riquadri informativi sono implementati con HTML semantico e ruoli ARIA:
- Gli screen reader annunciano il tipo di riquadro informativo
- Il colore non è l'unico indicatore (sono incluse icone)
- Contrasto cromatico sufficiente in entrambi i temi

## Callout personalizzato

Crea riquadri informativi con icone e colori personalizzati usando il componente `Callout`:

<Callout icon="key" color="#FFC107">
**Personalizzato** - Usa qualsiasi icona e colore per adattarlo al tuo contenuto.
</Callout>

<Callout icon="rocket" color="#9333EA">
Distribuisci le modifiche con sicurezza usando la pipeline CI/CD.
</Callout>

<Callout icon="regular/star" color="#EC4899">
Usa prefissi per lo stile delle icone come `regular/`, `light/` o `duotone/` per pesi diversi.
</Callout>

### Utilizzo di Callout personalizzati

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

### Proprietà di Callout personalizzati

<ParamField name="icon" type="string" default="circle-info">
  Nome dell'icona (vedi [Icone](/it/content/icons)).
</ParamField>

<ParamField name="color" type="string">
  Codice colore esadecimale (ad es. `#FFC107`). Per impostazione predefinita usa il colore di accento.
</ParamField>

**Prefissi per lo stile delle icone:** aggiungi un prefisso per modificare il peso dell'icona:
- `solid/` - Icone piene (predefinito)
- `regular/` - Icone con contorno
- `light/` - Icone con contorno sottile
- `duotone/` - Icone bicolore

## Prossimi passaggi

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Esplora tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>