Visualización
Alert
Un componente de alerta versátil para mostrar mensajes importantes con múltiples estilos y apariencias.
Tests
100%
Uso
El componente SAlert muestra mensajes importantes con soporte para múltiples temas de color, variantes visuales, iconos y opción de cierre.
Colores
Usa la prop color para cambiar el tema de color de la alerta.
Variantes
Usa la prop variant para cambiar el estilo visual de la alerta.
Solo Título
Solo Descripción
Con Contenido de Slot
Cuando no se proporciona la prop description, se usa el slot por defecto como contenido de la alerta. A diferencia de la prop, el slot acepta contenido HTML enriquecido.
Cerrable
Establece closeable en true para mostrar un botón de cierre. El componente emite un evento close al hacer clic.
Con Icono
Usa la prop icon para mostrar un icono junto al contenido de la alerta.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
title | string | - | Texto del título en la parte superior de la alerta |
description | string | - | Texto descriptivo del contenido de la alerta |
icon | FunctionalComponent | - | Componente de icono mostrado junto al contenido |
color | 'neutral' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral' | Tema de color de la alerta |
variant | 'solid' | 'outline' | 'soft' | 'subtle' | 'solid' | Variante de estilo visual |
closeable | boolean | false | Muestra un botón de cierre |
closeIcon | FunctionalComponent | XMarkIcon | Icono personalizado para el botón de cierre |
class | string | - | Clases CSS adicionales |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
close | - | Se emite cuando se hace clic en el botón de cierre |
Slots
| Nombre | Descripción |
|---|---|
default | Contenido de la alerta. Se usa cuando no se proporciona la prop description |