Callouts
Aprende a usar Note, Tip, Warning, Danger, Check y componentes Callout personalizados para resaltar información clave en tu documentación.
Usa los Callouts para resaltar contexto importante como advertencias, consejos o requisitos sin interrumpir el flujo.
Callouts disponibles
Note - Contexto útil o información adicional. Úsalo para consejos que mejoran la comprensión.
Info - Información o datos neutrales. Úsalo para detalles complementarios.
Tip - Buenas prácticas u optimizaciones. Úsalo para "consejos pro" que mejoran la experiencia.
Warning - Advertencias o requisitos importantes. Úsalo cuando algo pueda causar problemas si se ignora.
Danger - Advertencias críticas. Úsalo para acciones que podrían causar pérdida de datos o problemas de seguridad.
Check - Confirmaciones de éxito. Úsalo para confirmar un comportamiento correcto o una finalización exitosa.
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>Con títulos
Agrega un título personalizado a cualquier callout:
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>Puedes usar Markdown dentro de los callouts, incluyendo code y enlaces.
Con bloques de código
Los callouts pueden contener código:
La firma de la función getData() cambió:
// Before (v1.x)
getData(id)
// After (v2.0)
getData({ id, options })Buenas prácticas
Demasiados callouts diluyen su impacto. Procura usar como máximo 1-2 por página.
Reserva los callouts para información que el lector no debe pasar por alto.
| Escenario | Callout |
|---|---|
| Consejo útil | <Tip> |
| Contexto adicional | <Note> o <Info> |
| Posible error frecuente | <Warning> |
| Acción irreversible | <Danger> |
| Confirmación | <Check> |
| Marca personalizada | <Callout> |
Los callouts deben ser fáciles de escanear. Si necesitas varios párrafos, considera usar un Accordion en su lugar.
Bien: Una o dos oraciones Evita: Varios párrafos de texto
Coloca los callouts:
- Antes de código que tenga requisitos
- Después de instrucciones con advertencias importantes
- Cerca del contenido al que hacen referencia
Props
Todos los callouts aceptan las mismas propiedades:
Título personalizado (reemplaza el predeterminado).
Accesibilidad
Los callouts se implementan con HTML semántico y roles ARIA:
- Los lectores de pantalla anuncian el tipo de callout
- El color no es el único indicador (se incluyen íconos)
- Contraste de color suficiente en ambos temas
Callout personalizado
Crea callouts con íconos y colores personalizados usando el componente Callout:
Custom - Usa cualquier ícono y color para que coincida con tu contenido.
Despliega tus cambios con confianza usando nuestro pipeline de CI/CD.
Usa prefijos de estilo de ícono como regular/, light/ o duotone/ para diferentes grosores.
Uso de Callout personalizado
<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>Props de Callout personalizado
Nombre del ícono (ver Íconos).
Código de color hexadecimal (p. ej., #FFC107). Por defecto usa el color de acento.
Prefijos de estilo de ícono: Agrega un prefijo para cambiar el grosor del ícono:
solid/- Íconos rellenos (predeterminado)regular/- Íconos delineadoslight/- Íconos delineados finosduotone/- Íconos de dos tonos