> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.manicule.dev/es/llms.txt
> Use this file to discover all available pages before exploring further.
> For every page in one file, fetch https://mintlify.manicule.dev/es/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://mintlify.manicule.dev/api/mcp.
> Every agent surface: https://mintlify.manicule.dev/.well-known/llms-manifest.json

# Banner (/es/components/banner)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1280 · updated: 2026-07-31 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md), [Color](/es/components/color.md)

> Añade un banner descartable en la parte superior de tu sitio de documentación para mostrar anuncios importantes, notas de lanzamiento o notificaciones.

Usa banners para mostrar anuncios, actualizaciones o notificaciones importantes en todo tu sitio de documentación. Los banners aparecen en la parte superior de cada página, admiten formato Markdown y puedes hacer que sean descartables. De manera predeterminada, los banners usan el color definido por la propiedad `colors.dark` en tu `docs.json`. Puedes cambiar la apariencia con la propiedad `type` o anular por completo el fondo con `color`.

Para añadir un banner, usa la propiedad `banner` en tu `docs.json`:

<CodeGroup>
```json title="Product announcements" wrap
"banner": {
  "content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/changelog) para más detalles.",
  "dismissible": true
}
```

```json title="Maintenance notices" wrap
"banner": {
  "content": "⚠️ Mantenimiento programado: la API no estará disponible el 15 de diciembre, de 2 a 4 a. m. UTC",
  "type": "warning",
  "dismissible": false
}
```

```json title="Critical notices" wrap
"banner": {
  "content": "**Acción requerida:** rota tus claves de API antes del 1 de enero. [Guía de migración](/migration)",
  "type": "critical",
  "dismissible": true
}
```

```json title="Custom color" wrap
"banner": {
  "content": "🎉 ¡Únete a nosotros en nuestra conferencia anual!",
  "color": {
    "light": "#7C3AED",
    "dark": "#5B21B6"
  },
  "dismissible": true
}
```
</CodeGroup>

<Note>También puedes configurar banners por idioma configurando `banner` en `navigation.languages`. Consulta [Banners específicos por idioma](#language-specific-banners).</Note>

<div id="properties">
  ## Propiedades
</div>

<ResponseField name="content" type="string" required>El contenido de texto que se muestra en el banner. Admite formato MDX básico, incluyendo enlaces, negrita y cursiva. No se admiten componentes personalizados.</ResponseField>

<ResponseField name="dismissible" type="boolean">Indica si los usuarios pueden cerrar el banner. Cuando es `true`, aparece un botón de cierre. Si un usuario cierra el banner, permanece oculto para él hasta que actualices el contenido del banner. De manera predeterminada, es `false`.</ResponseField>

<ResponseField name="type" type="string">
  El estilo visual del banner. Controla el color de fondo para que los visitantes puedan reconocer rápidamente la urgencia del mensaje. De manera predeterminada, es `info`.

  * `info`: Usa el color principal de la marca. Ideal para anuncios de producto y actualizaciones generales.
  * `warning`: Usa un fondo ámbar. Ideal para avisos de precaución, como mantenimientos programados o próximas obsolescencias.
  * `critical`: Usa un fondo rojo. Ideal para avisos urgentes que requieren atención inmediata, como interrupciones o acciones obligatorias.
</ResponseField>

<ResponseField name="color" type="object">
  Anula el color de fondo del banner con un valor hexadecimal personalizado. Cuando se establece, tiene prioridad sobre el color implícito por `type`. El texto del banner es blanco, así que elige un fondo lo suficientemente oscuro para que siga siendo legible.

  <Expandable title="propiedades de color">
<ResponseField name="light" type="string">Color hexadecimal usado en modo claro. Si solo se proporciona `dark`, también se usa en modo claro.</ResponseField>

<ResponseField name="dark" type="string">Color hexadecimal usado en modo oscuro. Si solo se proporciona `light`, también se usa en modo oscuro.</ResponseField>
  </Expandable>
</ResponseField>

<div id="language-specific-banners">
  ## Banners específicos por idioma
</div>

Configura distintos banners para cada idioma en tu documentación. Define los banners específicos por idioma en el array `navigation.languages` de tu `docs.json`.

```json
{
  "navigation": {
    "languages": [
      {
        "language": "en",
        "banner": {
          "content": "🚀 Version 2.0 is now live! See our [changelog](/en/changelog) for details.",
          "dismissible": true
        },
        "groups": [
          {
            "group": "Getting started",
            "pages": ["en/overview", "en/quickstart"]
          }
        ]
      },
      {
        "language": "es",
        "banner": {
          "content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/es/changelog) para más detalles.",
          "dismissible": true
        },
        "groups": [
          {
            "group": "Getting started",
            "pages": ["es/overview", "es/quickstart"]
          }
        ]
      }
    ]
  },
  "banner": {
    "content": "🚀 ¡La versión 2.0 ya está disponible!",
    "dismissible": true
  }
}
```

<div id="fallback-behavior">
  ### Comportamiento de respaldo
</div>

Los banners siguen un orden de prioridad al decidir qué contenido mostrar:

1. **Banner específico por idioma**: Si el idioma actual tiene una configuración de `banner`, esta tendrá prioridad.
2. **Banner global**: Si no existe un banner específico por idioma, se muestra el `banner` global.