# Avisos (/es/components/callouts)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 923 · updated: 2026-07-30 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md), [Color](/es/components/color.md)

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>

```mdx
<Note>Esto añade una nota en el contenido</Note>
```

<Warning>
  Esto muestra una advertencia a la que debes prestar atención
</Warning>

```mdx
<Warning>Esto muestra una advertencia a la que debes prestar atención</Warning>
```

<Info>
  Destaca información importante
</Info>

```mdx
<Info>Destaca información importante</Info>
```

<Tip>
  Esto sugiere una Sugerencia útil
</Tip>

```mdx
<Tip>Esto sugiere una Sugerencia útil</Tip>
```

<Check>
  Esto nos da un estado marcado
</Check>

```mdx
<Check>Esto nos da un estado marcado</Check>
```

<Danger>
  Este es un aviso de alerta
</Danger>

```mdx
<Danger>Este es un aviso de alerta</Danger>
```

<Callout icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M15.5 14.5C18.8137 14.5 21.5 11.8137 21.5 8.5C21.5 5.18629 18.8137 2.5 15.5 2.5C12.1863 2.5 9.5 5.18629 9.5 8.5C9.5 9.38041 9.68962 10.2165 10.0303 10.9697L2.5 18.5V21.5H5.5V19.5H7.5V17.5H9.5L13.0303 13.9697C13.7835 14.3104 14.6196 14.5 15.5 14.5Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M17.5 6.5L16.5 7.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="#FFC107" iconType="regular">
   Este es un aviso personalizado
</Callout>

```mdx wrap
<Callout icon="key" color="#FFC107" iconType="regular">Este es un aviso personalizado</Callout>
```

<div id="custom-callout-properties">
  ## Propiedades de aviso personalizado [#propiedades-de-aviso-personalizado]
</div>

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

<ResponseField name="icon" type="string">
  El ícono que se mostrará.

  Opciones:

  * Nombre del ícono de [Font Awesome](https://fontawesome.com/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `fontawesome` en tu `docs.json`
  * Nombre del ícono de [Lucide](https://lucide.dev/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `lucide` en tu `docs.json`
  * Nombre del ícono de [Tabler](https://tabler.io/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `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](https://react-svgr.com/playground/).
  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.
</ResponseField>

<ResponseField name="iconType" type="string">
  El estilo de ícono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con íconos de Font Awesome.

  Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="color" type="string">
  Color personalizado como código hexadecimal (por ejemplo, `#FFC107`). Establece el borde, el tinte de fondo y el color del texto del aviso.
</ResponseField>