Callouts
Destaca advertencias, consejos y contexto importante sin interrumpir el flujo de lectura. Seis tipos disponibles.
Usa los Callouts para destacar contexto importante como advertencias, consejos o requisitos sin interrumpir el flujo.
Callouts disponibles
Note - Contexto útil o información adicional. Úsalo para consejos que mejoren la comprensión.
Info - Información neutral o datos. Úsalo para detalles complementarios.
Tip - Mejores prácticas u optimizaciones. Úsalo para "consejos pro" que mejoran la experiencia.
Warning - Advertencias importantes o requisitos. Úsalo cuando algo podría 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 la 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
Añade 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 código 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 })Mejores prácticas
Demasiados callouts diluyen su impacto. Apunta a un máximo de 1-2 por página.
Si todo es importante, nada es importante.
| Escenario | Callout |
|---|---|
| Consejo útil | <Tip> |
| Contexto extra | <Note> o <Info> |
| Posible error | <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 Evitar: Múltiples párrafos de texto
Coloca los callouts:
- Antes del código que tiene 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 están implementados 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 iconos)
- Contraste de color suficiente en ambos temas
Callout personalizado
Crea callouts con iconos y colores personalizados usando el componente Callout:
Personalizado - Usa cualquier icono y color para que coincida con tu contenido.
Despliega tus cambios con confianza usando nuestro pipeline de CI/CD.
Usa prefijos de estilo de icono como regular/, light/ o duotone/ para diferentes pesos.
Uso del 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 del Callout personalizado
Nombre del icono (ver Iconos).
Código de color hexadecimal (p. ej., #FFC107). Por defecto usa el color de acento.
Prefijos de estilo de icono: Añade un prefijo para cambiar el peso del icono:
solid/- Iconos rellenos (predeterminado)regular/- Iconos con contornolight/- Iconos con contorno finoduotone/- Iconos de dos tonos