Saltar al contenido principal
Aplica a los avisos los estilos Note, Advertencia, Información, Sugerencia, Check, Danger, o crea tu propio aviso:
Esto añade una nota en el contenido
Esto muestra una advertencia a la que debes prestar atención
Destaca información importante
Esto sugiere una Sugerencia útil
Esto nos da un estado marcado
Este es un aviso de alerta
Este es un aviso personalizado

​
Propiedades de aviso personalizado

El componente genérico Callout admite iconos y colores personalizados. Los avisos con tipo (Note, Warning, Info, Tip, Check, Danger) usan iconos y colores predefinidos y solo aceptan children.
​
icon
string
El ícono que se mostrará.Opciones:
  • Nombre del ícono de Font Awesome, si tienes la propiedad icons.library configurada como fontawesome en tu docs.json
  • Nombre del ícono de Lucide, si tienes la propiedad icons.library configurada como lucide en tu docs.json
  • Nombre del ícono de Tabler, si tienes la propiedad icons.library configurada como tabler en tu docs.json
  • URL de un ícono alojado externamente
  • Ruta a un archivo de ícono en tu proyecto
  • Código SVG envuelto entre llaves
Para íconos SVG personalizados:
  1. Convierte tu SVG con el convertidor de SVGR.
  2. Pega tu código SVG en el campo de entrada de SVG.
  3. Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
  5. Ajusta height y width según sea necesario.
​
iconType
string
El estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
​
color
string
Color personalizado como código hexadecimal (por ejemplo, #FFC107). Establece el borde, el tinte de fondo y el color del texto del aviso.