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
<Note>Esto añade una nota en el contenido</Note>
Esto muestra una advertencia a la que debes prestar atención
<Warning>Esto muestra una advertencia a la que debes prestar atención</Warning>
Destaca información importante
<Info>Destaca información importante</Info>
Esto sugiere una Sugerencia útil
<Tip>Esto sugiere una Sugerencia útil</Tip>
Esto nos da un estado marcado
<Check>Esto nos da un estado marcado</Check>
Este es un aviso de alerta
<Danger>Este es un aviso de alerta</Danger>
Este es un aviso personalizado
<Callout icon="key" color="#FFC107" iconType="regular">Este es un aviso personalizado</Callout>

​
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.