Introducción

Muestra mensajes breves, importantes y muy visibles para mantener a los usuarios informados sobre eventos del sistema, estados de éxito, advertencias o errores sin interrumpir los flujos de trabajo activos ni requerir bloques de diseño inmediatos.

El componente Alert está totalmente integrado como un bloque alert en el Page Builder, lo que permite a los editores de contenido y administradores configurar rápidamente diseños, mensajes, indicadores de iconos y niveles de severidad directamente dentro de las plantillas de página de Sveltia CMS.

Uso a través del Page Builder de CMS (JSON)

Estas configuraciones representan exactamente cómo se construyen los elementos de bloque del page builder dentro de las colecciones de esquema de página (content/pages/*.json).

1. Mensaje de éxito (variante Subtle)

Se usa para notificar a los usuarios sobre eventos positivos, finalizaciones o formularios procesados correctamente (p. ej., "Cuenta creada", "Cambios guardados").

{
  "type": "alert",
  "status": "success",
  "variant": "subtle",
  "title": "Changes Saved",
  "description": "Your profile changes and document uploads have been successfully processed."
}

2. Aviso de advertencia dinámico (variante Solid)

Llama la atención sobre problemas potenciales o acciones que requieren precaución (p. ej., "Plan por caducar pronto", "Mantenimiento del sistema programado").

{
  "type": "alert",
  "status": "warning",
  "variant": "solid",
  "title": "Approaching Storage Limit",
  "description": "Your workspace has used 85% of allocated file capacity. Upgrade plan to avoid system freezes."
}

3. Error / fallo de alta prioridad (variante Outline)

Informa al usuario sobre fallos críticos, credenciales caducadas o errores de transacción que bloquean el progreso.

{
  "type": "alert",
  "status": "error",
  "variant": "outline",
  "title": "Connection Terminated",
  "description": "The analytics engine timed out while pulling data. Check database credentials and try again."
}

Referencia de configuración de CMS

Estas propiedades se pueden mapear directamente a los campos de widget de Sveltia CMS en public/admin/config.yml:

Notas para desarrolladores y accesibilidad

• Iconos renderizados en el servidor: Para evitar advertencias de discrepancia de hidratación y optimizar la entrega de recursos, el icono semántico AlertIcon se compila dinámicamente en un SVG en línea y muy optimizado según la prop status elegida.
• Accesibilidad WAI-ARIA: Las alertas incluyen automáticamente el atributo role="alert" al montarse para notificar a las tecnologías de asistencia. El parámetro aria-live predeterminado se establece en "polite" para no interrumpir bruscamente las tareas del usuario.
• Integración con el flujo de diseño: Diseñado como contenedores de diseño a nivel de bloque. Si se anida dentro de directorios de cuadrícula flexibles, el contenedor de alerta se expandirá horizontalmente de forma automática para encajar suavemente con los límites de columna existentes.