{ "name": "alert", "title": { "es": "Alerta", "en": "Alert" }, "summary": { "es": "Mensaje en la página: información, éxito, advertencia o error.", "en": "In-page message: info, success, warning or error." }, "category": "feedback", "status": "stable", "nivel": "componentes", "updated": "2026-09-29", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/alert/", "requires": [ "button" ], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/alert/alert.html", "content": "
\n
\n \n

Hay una versión nueva

\n

Actualiza para usar el tema oscuro automático.

\n
\n
\n
\n \n

Pago recibido

\n

Te enviamos el recibo a tu correo.

\n
\n
\n \n

Tu plan vence en 3 días

\n

Renueva para no perder tus proyectos.

\n
\n
\n \n

No se pudo guardar

\n

Revisa tu conexión e inténtalo de nuevo.

\n
\n
\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/alert/alert.css", "content": "/* alert · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde alert.tw.json. No editar a mano. Necesita tokens.css. */\n.c-alert{position:relative}\n.c-alert__description{display:flex}\n.c-alert__action{display:flex}\n.c-alert{display:grid;width:100%}\n.c-alert__description{flex-direction:column}\n.c-alert{align-items:flex-start}\n.c-alert__action{gap:calc(var(--spacing)*1)}\n.c-alert__description{gap:calc(var(--spacing)*2.5)}\n.c-alert{column-gap:calc(var(--spacing)*2);row-gap:calc(var(--spacing)*.5);border-radius:calc(var(--radius) + 4px);border-style:var(--tw-border-style);border-width:1px}\n.c-alert--error{border-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-alert--error{border-color:color-mix(in oklab,var(--destructive)32%,transparent)}\n}\n.c-alert--info{border-color:var(--info)}\n@supports (color:color-mix(in lab, red, red)){\n.c-alert--info{border-color:color-mix(in oklab,var(--info)32%,transparent)}\n}\n.c-alert--success{border-color:var(--success)}\n@supports (color:color-mix(in lab, red, red)){\n.c-alert--success{border-color:color-mix(in oklab,var(--success)32%,transparent)}\n}\n.c-alert--warning{border-color:var(--warning)}\n@supports (color:color-mix(in lab, red, red)){\n.c-alert--warning{border-color:color-mix(in oklab,var(--warning)32%,transparent)}\n}\n.c-alert--error{background-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-alert--error{background-color:color-mix(in oklab,var(--destructive)4%,transparent)}\n}\n.c-alert--info{background-color:var(--info)}\n@supports (color:color-mix(in lab, red, red)){\n.c-alert--info{background-color:color-mix(in oklab,var(--info)4%,transparent)}\n}\n.c-alert--success{background-color:var(--success)}\n@supports (color:color-mix(in lab, red, red)){\n.c-alert--success{background-color:color-mix(in oklab,var(--success)4%,transparent)}\n}\n.c-alert--default{background-color:#0000}\n.c-alert--warning{background-color:var(--warning)}\n@supports (color:color-mix(in lab, red, red)){\n.c-alert--warning{background-color:color-mix(in oklab,var(--warning)4%,transparent)}\n}\n.c-alert{padding-inline:calc(var(--spacing)*3.5);padding-block:calc(var(--spacing)*3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-alert__title{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.c-alert{color:var(--card-foreground)}\n.c-alert__description{color:var(--muted-foreground)}\n.c-alert:has(>svg){grid-template-columns:calc(var(--spacing)*4)1fr;column-gap:calc(var(--spacing)*2)}\n@media not all and (min-width:40rem){\n.c-alert__action{grid-column-start:2;margin-top:calc(var(--spacing)*2)}\n}\n@media (min-width:40rem){\n.c-alert__action{grid-row-start:1;grid-row-end:3;align-self:center}\n}\n.c-alert--default:is(.dark *){background-color:var(--input)}\n@supports (color:color-mix(in lab, red, red)){\n.c-alert--default:is(.dark *){background-color:color-mix(in oklab,var(--input)32%,transparent)}\n}\n.c-alert>svg{height:1lh;width:calc(var(--spacing)*4)}\n.c-alert--error>svg{color:var(--destructive)}\n.c-alert--info>svg{color:var(--info)}\n.c-alert--default>svg{color:var(--muted-foreground)}\n.c-alert--success>svg{color:var(--success)}\n.c-alert--warning>svg{color:var(--warning)}\n/* propio */\n.c-alert:has(>svg):has(>.c-alert__action){grid-template-columns:calc(var(--spacing)*4) 1fr auto}\n.c-alert:not(:has(>svg)):has(>.c-alert__action){grid-template-columns:1fr auto}\n@media (width >= 40rem){.c-alert:has(>svg)>.c-alert__action{grid-column-start:3}.c-alert:not(:has(>svg))>.c-alert__action{grid-column-start:2}}\n.c-alert-stack{display:grid;gap:.75rem;width:100%;max-width:32rem}\nsvg~.c-alert__title,svg~.c-alert__description{grid-column-start:2}\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/alert.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "ambos", "densidad": "baja", "tono": "sobria", "states": [ "info", "success", "warning", "error" ], "use": { "es": [ "Para mensajes que deben quedarse a la vista." ], "en": [ "For messages that must stay visible." ] }, "avoid": { "es": [ "Para confirmaciones pasajeras: usa un aviso." ], "en": [ "For passing confirmations: use a toast." ] }, "a11y": { "roles": [ "note", "alert" ], "keyboard": [], "notes": { "es": [ "role=alert solo para errores urgentes; el resto usa role=note.", "El icono es decorativo: el título dice el tipo." ], "en": [ "role=alert only for urgent errors; the rest use role=note.", "The icon is decorative: the title states the type." ] }, "test": { "es": [ "El lector anuncia de inmediato solo la alerta de error." ], "en": [ "The screen reader immediately announces only the error alert." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "coss ui (MIT) · alert.tsx", "url": "https://coss.com/ui" } ], "changes": [ { "date": "2026-09-29", "es": "Diseño de coss ui en HTML, CSS y JS sin dependencias", "en": "coss ui design in dependency-free HTML, CSS and JS" } ], "partes": [], "pieza": "https://componentes-lovat.vercel.app/r/alert.html" }