Alert
Aviso en la página sobre algo que afecta a lo que el usuario está viendo.
Cuándo usarlo
Props. color (gray · brand · success · warning · error), title, description, actions (botones link-gray + link-color), onClose, icon, variant (floating · full a todo el ancho).
Visual. bg-primary_alt, borde border-primary, radius-xl, shadow-xs, icono FeaturedIcon outline. El color va solo en el icono: el texto sigue en text-secondary / text-tertiary.
Accesibilidad. Los errores se anuncian al momento (role="alert"); el resto, sin interrumpir (role="status"). El icono cambia con el color, así que el estado no depende solo del color. La X se llama "Descartar" (se cambia con closeLabel).
Detalles. Sin icon, cada color trae el suyo: info-circle (gris y marca), check-circle, alert-triangle y alert-circle.
Ejemplos
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
color | "gray" · "brand" · "error" · "warning" · "success" | "gray" | El color va solo en el icono: el texto sigue en text-secondary / text-tertiary. |
titleobligatoria | ReactNode | — | |
description | ReactNode | — | |
actions | ReactNode | — | Botones link-gray + link-color. |
onClose | (() => void) | — | Muestra la X para descartarlo. |
closeLabel | string | "Descartar" | Nombre de la X. |
icon | IconName | — | Icono propio. Por defecto, uno según el color (alert-circle en error, check-circle en éxito…). |
variant | "floating" · "full" | "floating" | floating: tarjeta con borde y radio. full: a todo el ancho, sin radio y con línea inferior. |
className | string | — |
Código
import { Alert } from "@jotis-me/react";
export default function Page() {
return (
<>
<Alert color="error" title="No se pudo sincronizar" description="Revisa la conexión con el banco." />
</>
);
}---
import { Alert } from "@jotis-me/react";
---
<Alert color="error" title="No se pudo sincronizar" description="Revisa la conexión con el banco." />Con onClose o acciones que hacen algo necesita funciones: envuélvelo en un .tsx y úsalo como isla client:load.