Banner

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:

"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

contentstringrequired

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.

dismissibleboolean

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.

typestring

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.

colorobject

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.

Show propiedades de color

lightstring

Color hexadecimal usado en modo claro. Si solo se proporciona dark, también se usa en modo claro.

darkstring

Color hexadecimal usado en modo oscuro. Si solo se proporciona light, también se usa en modo oscuro.

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:

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

Propiedades

Banners específicos por idioma

Comportamiento de respaldo

On this page