---
title: Callouts
description: Destaca advertencias, consejos y contexto importante sin interrumpir el flujo de lectura. Seis tipos disponibles.
---

Usa los Callouts para destacar contexto importante como advertencias, consejos o requisitos sin interrumpir el flujo.

## Callouts disponibles

<Note>
**Note** - Contexto útil o información adicional. Úsalo para consejos que mejoren la comprensión.
</Note>

<Info>
**Info** - Información neutral o datos. Úsalo para detalles complementarios.
</Info>

<Tip>
**Tip** - Mejores prácticas u optimizaciones. Úsalo para "consejos pro" que mejoran la experiencia.
</Tip>

<Warning>
**Warning** - Advertencias importantes o requisitos. Úsalo cuando algo podría causar problemas si se ignora.
</Warning>

<Danger>
**Danger** - Advertencias críticas. Úsalo para acciones que podrían causar pérdida de datos o problemas de seguridad.
</Danger>

<Check>
**Check** - Confirmaciones de éxito. Úsalo para confirmar un comportamiento correcto o la finalización exitosa.
</Check>

## Uso

```mdx
<Note>
This is helpful context for the reader.
</Note>

<Warning>
This could cause issues if you skip this step.
</Warning>

<Danger>
This action cannot be undone. Proceed with caution.
</Danger>
```

## Con títulos

Añade un título personalizado a cualquier callout:

```mdx
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>
```

<Note title="¿Sabías que?">
Puedes usar **Markdown** dentro de los callouts, incluyendo `código` y [enlaces](/es/components/card).
</Note>

## Con bloques de código

Los callouts pueden contener código:

<Warning title="Cambio incompatible en v2.0">
La firma de la función `getData()` cambió:

```javascript
// Before (v1.x)
getData(id)

// After (v2.0)
getData({ id, options })
```
</Warning>

## Mejores prácticas

<AccordionGroup>
  <Accordion title="Úsalos con moderación" icon="hand" defaultOpen>
    Demasiados callouts diluyen su impacto. Apunta a un máximo de 1-2 por página.

    Si todo es importante, nada es importante.
  </Accordion>

  <Accordion title="Elige el tipo adecuado" icon="list-check">
    | Escenario | Callout |
    |----------|---------|
    | Consejo útil | `<Tip>` |
    | Contexto extra | `<Note>` o `<Info>` |
    | Posible error | `<Warning>` |
    | Acción irreversible | `<Danger>` |
    | Confirmación | `<Check>` |
    | Marca personalizada | `<Callout>` |
  </Accordion>

  <Accordion title="Mantenlos concisos" icon="text-width">
    Los callouts deben ser fáciles de escanear. Si necesitas varios párrafos, considera usar un Accordion en su lugar.

    **Bien:** Una o dos oraciones
    **Evitar:** Múltiples párrafos de texto
  </Accordion>

  <Accordion title="Posiciónalos estratégicamente" icon="arrows-up-down">
    Coloca los callouts:
    - **Antes** del código que tiene requisitos
    - **Después** de instrucciones con advertencias importantes
    - **Cerca** del contenido al que hacen referencia
  </Accordion>
</AccordionGroup>

## Props

Todos los callouts aceptan las mismas propiedades:

<ParamField name="title" type="string">
  Título personalizado (reemplaza el predeterminado).
</ParamField>

## Accesibilidad

Los callouts están implementados con HTML semántico y roles ARIA:
- Los lectores de pantalla anuncian el tipo de callout
- El color no es el único indicador (se incluyen iconos)
- Contraste de color suficiente en ambos temas

## Callout personalizado

Crea callouts con iconos y colores personalizados usando el componente `Callout`:

<Callout icon="key" color="#FFC107">
**Personalizado** - Usa cualquier icono y color para que coincida con tu contenido.
</Callout>

<Callout icon="rocket" color="#9333EA">
Despliega tus cambios con confianza usando nuestro pipeline de CI/CD.
</Callout>

<Callout icon="regular/star" color="#EC4899">
Usa prefijos de estilo de icono como `regular/`, `light/` o `duotone/` para diferentes pesos.
</Callout>

### Uso del Callout personalizado

```mdx
<Callout icon="key" color="#FFC107">
  This callout uses a key icon with amber color.
</Callout>

<Callout icon="rocket" color="#9333EA">
  This callout uses a rocket icon with purple color.
</Callout>

<Callout icon="regular/star" color="#EC4899">
  Use style prefixes for different icon weights.
</Callout>
```

### Props del Callout personalizado

<ParamField name="icon" type="string" default="circle-info">
  Nombre del icono (ver [Iconos](/es/content/icons)).
</ParamField>

<ParamField name="color" type="string">
  Código de color hexadecimal (p. ej., `#FFC107`). Por defecto usa el color de acento.
</ParamField>

**Prefijos de estilo de icono:** Añade un prefijo para cambiar el peso del icono:
- `solid/` - Iconos rellenos (predeterminado)
- `regular/` - Iconos con contorno
- `light/` - Iconos con contorno fino
- `duotone/` - Iconos de dos tonos

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Vista general de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>