K
KoreUI

Alert

UI

Componente de alerta con soporte para tipos semánticos, variantes, iconos automáticos, cierre y auto-dismiss.

Uso básico

<x-kore::alert title="Éxito" description="Operación completada." type="success" />
<x-kore::alert title="Error" type="destructive">Algo salió mal.</x-kore::alert>
<x-kore::alert title="Éxito" description="Operación completada." type="success" />
<x-kore::alert title="Error" type="destructive">Algo salió mal.</x-kore::alert>

Tipos

Cuatro tipos semánticos con iconos auto-resueltos.

<x-kore::alert type="info" title="Información" description="Nota informativa." />
<x-kore::alert type="success" title="Éxito" description="Todo bien." />
<x-kore::alert type="warning" title="Advertencia" description="Cuidado." />
<x-kore::alert type="destructive" title="Error" description="Falló." />
<x-kore::alert type="info" title="Información" description="Nota informativa." />
<x-kore::alert type="success" title="Éxito" description="Todo bien." />
<x-kore::alert type="warning" title="Advertencia" description="Cuidado." />
<x-kore::alert type="destructive" title="Error" description="Falló." />

Variantes

Tres variantes visuales: soft (default), solid y outline.

<x-kore::alert type="info" title="Soft" description="Variante por defecto." variant="soft" />
<x-kore::alert type="info" title="Solid" description="Fondo sólido." variant="solid" />
<x-kore::alert type="info" title="Outline" description="Solo borde." variant="outline" />
<x-kore::alert type="info" title="Soft" description="Variante por defecto." variant="soft" />
<x-kore::alert type="info" title="Solid" description="Fondo sólido." variant="solid" />
<x-kore::alert type="info" title="Outline" description="Solo borde." variant="outline" />

Closeable

Muestra un botón para cerrar la alerta.

<x-kore::alert title="Cerrable" description="Haz clic en la X para cerrar." closeable />
<x-kore::alert title="Cerrable" description="Haz clic en la X para cerrar." closeable />

Auto-dismiss

Se cierra automáticamente tras los segundos indicados.

<x-kore::alert title="Auto-dismiss" description="Se cerrará en 5 segundos." :timeout="5" />
<x-kore::alert title="Auto-dismiss" description="Se cerrará en 5 segundos." :timeout="5" />

Sin icono

Oculta el icono automático con showIcon=false.

<x-kore::alert type="info" title="Sin icono" description="Alerta sin icono." :showIcon="false" />
<x-kore::alert type="info" title="Sin icono" description="Alerta sin icono." :showIcon="false" />

Con acción

Slot para agregar botones u otros elementos de acción.

<x-kore::alert title="Actualización disponible" type="info">
    <x-slot:action>
        <x-kore::button label="Actualizar" size="sm" />
    </x-slot:action>
</x-kore::alert>
<x-kore::alert title="Actualización disponible" type="info">
    <x-slot:action>
        <x-kore::button label="Actualizar" size="sm" />
    </x-slot:action>
</x-kore::alert>

Props

Prop Tipo Default Descripción
title string|null null Título de la alerta
description string|null null Descripción textual
type string info Tipo: info, success, warning, destructive
icon string|null auto Icono Lucide (auto-resuelto por tipo)
variant string soft Variante: solid, soft, outline
closeable bool false Muestra botón de cierre
timeout int|null null Auto-dismiss en segundos
showIcon bool true Mostrar/ocultar icono