Callout
Scopri come usare i componenti Note, Tip, Warning, Danger, Check e Callout personalizzati per evidenziare informazioni chiave nella documentazione.
Usa i Callout per evidenziare contesto importante come avvisi, suggerimenti o requisiti senza interrompere il flusso di lettura.
Riquadri disponibili
Note: Contesto utile o informazioni aggiuntive.
Info: Informazioni neutre o dati di fatto. Usalo per dettagli supplementari.
Tip: Approcci consigliati o ottimizzazioni.
Warning: Avvertenze importanti o requisiti. Usalo quando ignorare qualcosa potrebbe causare problemi.
Danger: Avvisi critici. Usalo per azioni che potrebbero causare perdita di dati o problemi di sicurezza.
Check: Conferme di successo. Usalo per confermare un comportamento corretto o un completamento riuscito.
Utilizzo
<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 callout:
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>Puoi usare Markdown all'interno dei callout, inclusi code e link.
Con blocchi di codice
I callout possono contenere codice:
La firma della funzione getData() è cambiata:
// Before (v1.x)
getData(id)
// After (v2.0)
getData({ id, options })Procedure consigliate
Troppi callout diluiscono il loro impatto. Punta a 1-2 per pagina al massimo.
Riserva i callout alle informazioni che il lettore non deve assolutamente perdere.
| Scenario | Callout |
|---|---|
| Suggerimento utile | <Tip> |
| Contesto extra | <Note> o <Info> |
| Possibile insidia | <Warning> |
| Azione irreversibile | <Danger> |
| Conferma | <Check> |
| Branding personalizzato | <Callout> |
Mantieni i callout facili da scorrere. Usa un Accordion per più paragrafi.
Buono: una o due frasi Da evitare: più paragrafi di testo
Posiziona i callout:
- Prima del codice che ha dei requisiti
- Dopo le istruzioni con avvertenze importanti
- Vicino al contenuto a cui si riferiscono
Proprietà
Ogni callout accetta questi props:
Titolo personalizzato (sostituisce quello predefinito).
Accessibilità
I callout usano HTML semantico e ruoli ARIA:
- Gli screen reader annunciano il tipo di callout
- Il colore non è l'unico indicatore (sono incluse le icone)
- Contrasto cromatico sufficiente in modalità scura
Callout personalizzato
Imposta un'icona e un colore personalizzati con il componente Callout:
Custom: Usa qualsiasi icona e colore per adattarli al tuo contenuto.
Distribuisci le tue modifiche con sicurezza tramite la nostra pipeline CI/CD.
Usa i prefissi di stile dell'icona come regular/, light/ o duotone/ per pesi diversi.
Utilizzo di Callout personalizzati
<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
Nome dell'icona (vedi Icone).
Codice colore esadecimale (ad esempio #FFC107). Predefinito: colore di accento.
Prefissi di stile dell'icona: aggiungi un prefisso per cambiare il peso dell'icona:
solid/- Icone piene (predefinito)regular/- Icone con contornolight/- Icone con contorno sottileduotone/- Icone a due toni