---
title: Callouts
description: Destaca información importante con bloques de llamada estilizados.
url: https://docs.thally.io/es/components/callouts
---

# Callouts

Destaca información importante con bloques de llamada estilizados.

Usa `<Note>`, `<Tip>`, `<Warning>` e `<Info>` para llamar la atención sobre contenido importante. Cada uno corresponde a un estilo visual que indica su propósito.

## Tipos

> **Note:**
  Esto es una **Nota** — información general que el lector debe tener en cuenta.

> **Tip:**
  Esto es un **Consejo** — una sugerencia útil o una buena práctica.

> **Warning:**
  Esto es una **Advertencia** — algo que podría causar problemas si se ignora.

> **Info:**
  Esto es un callout de **Información** — contenido informativo neutral.

```mdx
<Note>
  Esto es una **Nota** — información general que el lector debe tener en cuenta.
</Note>

<Tip>
  Esto es un **Consejo** — una sugerencia útil o una buena práctica.
</Tip>

<Warning>
  Esto es una **Advertencia** — algo que podría causar problemas si se ignora.
</Warning>

<Info>
  Esto es un callout de **Información** — contenido informativo neutral.
</Info>
```

## `<Callout>` genérico

Usa el `<Callout>` genérico para callouts con un color o ícono personalizado:

> **Note:**
  Mantén tu clave API segura — nunca la expongas en código del cliente.

```mdx
<Callout icon="key" color="#C77DFF">
  Mantén tu clave API segura — nunca la expongas en código del cliente.
</Callout>
```

El contenido migrado que usa `<Callout type="...">` también es compatible. El valor de `type` se normaliza sin distinguir mayúsculas, y los alias de migración `success` y `error` se asignan a **Check** y **Danger** respectivamente.

## Props

Todos los componentes de callout aceptan hijos MDX arbitrarios, incluyendo código en línea, enlaces y listas.

| Prop | Tipo | Descripción |
| --- | --- | --- |
| `title` | string | Encabezado opcional que se muestra sobre el cuerpo del callout. |
| `icon` | string | Reemplaza el glifo de tipo predeterminado con un ícono del conjunto de íconos compartido. |
| `color` | color CSS | Un literal de color CSS (hex, nombre o notación funcional como `oklch()`) que define el tono del callout. |
| `colorDark` | color CSS | Variante para modo oscuro. Si se omite, se usa `color` en ambos temas. |