Avisos
Añade componentes de aviso de tipo info, note, tip, check, warning, danger y personalizados para destacar información importante en tu documentación.
Aplica a los avisos los estilos Note, Advertencia, Información, Sugerencia, Check, Danger, o crea tu propio aviso:
<Note>Esto añade una nota en el contenido</Note><Warning>Esto muestra una advertencia a la que debes prestar atención</Warning><Info>Destaca información importante</Info><Tip>Esto sugiere una Sugerencia útil</Tip><Check>Esto nos da un estado marcado</Check><Danger>Este es un aviso de alerta</Danger><Callout icon="key" color="#FFC107" iconType="regular">Este es un aviso personalizado</Callout>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.
iconstringEl ícono que se mostrará.
Opciones:
- Nombre del ícono de Font Awesome, si tienes la propiedad
icons.libraryconfigurada comofontawesomeen tudocs.json - Nombre del ícono de Lucide, si tienes la propiedad
icons.libraryconfigurada comolucideen tudocs.json - Nombre del ícono de Tabler, si tienes la propiedad
icons.libraryconfigurada comotableren tudocs.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:
- Convierte tu SVG con el convertidor de SVGR.
- Pega tu código SVG en el campo de entrada de SVG.
- Copia el elemento completo
<svg>...</svg>del campo de salida de JSX. - Envuelve el código SVG compatible con JSX entre llaves:
icon={<svg ...> ... </svg>}. - Ajusta
heightywidthsegún sea necesario.
iconTypestringEl estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.
Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
colorstringColor personalizado como código hexadecimal (por ejemplo, #FFC107). Establece el borde, el tinte de fondo y el color del texto del aviso.