Saltar al contenido principal
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: 
"banner": {
  "content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/changelog) para más detalles.",
  "dismissible": true
}
También puedes configurar banners por idioma configurando banner en navigation.languages. Consulta Banners específicos por idioma.

​
Propiedades

​
content
string
requerido
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.
​
dismissible
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.
​
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.
​
color
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.

​
Banners específicos por idioma

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. 
{
  "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
  }
}

​
Comportamiento de respaldo

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.

Temas relacionados

Referencia del esquema docs.jsonEstructura del sitioOsano