Alert

Uso

Elige tone para la intención semántica y variant para la superficie. Proyecta el mensaje en el cuerpo y coloca las acciones en neu-alert-actions. closable añade un botón de cierre; cerrar oculta esta instancia y emite closed una sola vez. Crea una nueva instancia para mostrar otro mensaje. icon resuelve un icono de la aplicación; los iconos de tono integrados no necesitan un proveedor.

Ejemplos

Prueba la interacción y abre Código para ver la implementación. Reiniciar restablece el estado inicial.

Prueba y configura

Cambia las opciones y consulta la vista previa y el template generado. Código contiene el ejemplo ejecutable completo.

<neu-alert
  tone="info"
  variant="soft"
  title="Cuenta actualizada"
  [showIcon]="true"
  [closable]="false"
  closeLabel="Cerrar alerta"
  (closed)="onClosed()"
>
  Tus preferencias se han guardado.
</neu-alert>

Datos y contenido

Los Inputs configuran la alerta. closed informa de que esta instancia se ha cerrado; no es un modelo bidireccional de visibilidad. Las acciones proyectadas por la aplicación gestionan sus propios eventos.

Accesibilidad y teclado

danger utiliza una alerta urgente; los otros tonos anuncian un estado de forma no intrusiva. Reserva los anuncios urgentes para mensajes que requieren atención inmediata. Proporciona un closeLabel significativo. Los botones proyectados conservan su acceso por teclado.

API

Los Inputs y Outputs se extraen del paquete fijado. Los tipos con nombre enlazan a sus definiciones; Templates enumera solo las zonas de proyección disponibles.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuAlertTone } from '@neural-ui/core/alert';

// Declaración pública (solo referencia)
export type NeuAlertTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger';

import type { NeuAlertVariant } from '@neural-ui/core/alert';

// Declaración pública (solo referencia)
export type NeuAlertVariant = 'soft' | 'outline';

Estilos y tokens

Utiliza los Inputs públicos y los tokens de superficie, texto, espaciado y color semántico de Core. Mantén el contenido adaptable y comprueba ambos temas.

Componentes relacionados

Consulta los componentes relacionados para componer la interfaz del entorno.

• Badge
• ProgressBar