# Alert / Alerta

> In-page message: info, success, warning or error.

Page: https://componentes-lovat.vercel.app/c/alert/  
License: MIT · Design: coss ui (MIT) · alert.tsx  
Requires: tokens.css, button  
Context: ambos · Density: baja · Tone: sobria

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- Dependency `button`: https://componentes-lovat.vercel.app/r/button.json
- HTML: https://componentes-lovat.vercel.app/raw/alert/alert.html
- CSS: https://componentes-lovat.vercel.app/raw/alert/alert.css
- Everything in one file: https://componentes-lovat.vercel.app/r/alert.html

Dark theme: add class `dark` to `<html>`.

## When to use

- For messages that must stay visible.

## When not to use

- For passing confirmations: use a toast.

## Accessibility

Roles: note, alert

- role=alert only for urgent errors; the rest use role=note.
- The icon is decorative: the title states the type.

## Code

```html
<div class="c-alert-stack">
  <div class="c-alert c-alert--info" role="note">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <p class="c-alert__title">Hay una versión nueva</p>
    <p class="c-alert__description">Actualiza para usar el tema oscuro automático.</p>
    <div class="c-alert__action"><button class="c-btn c-btn--outline c-btn--sm" type="button">Actualizar</button></div>
  </div>
  <div class="c-alert c-alert--success" role="note">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>
    <p class="c-alert__title">Pago recibido</p>
    <p class="c-alert__description">Te enviamos el recibo a tu correo.</p>
  </div>
  <div class="c-alert c-alert--warning" role="note">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
    <p class="c-alert__title">Tu plan vence en 3 días</p>
    <p class="c-alert__description">Renueva para no perder tus proyectos.</p>
  </div>
  <div class="c-alert c-alert--error" role="alert">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
    <p class="c-alert__title">No se pudo guardar</p>
    <p class="c-alert__description">Revisa tu conexión e inténtalo de nuevo.</p>
  </div>
</div>
```

```css
/* alert · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde alert.tw.json. No editar a mano. Necesita tokens.css. */
.c-alert{position:relative}
.c-alert__description{display:flex}
.c-alert__action{display:flex}
.c-alert{display:grid;width:100%}
.c-alert__description{flex-direction:column}
.c-alert{align-items:flex-start}
.c-alert__action{gap:calc(var(--spacing)*1)}
.c-alert__description{gap:calc(var(--spacing)*2.5)}
.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}
.c-alert--error{border-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-alert--error{border-color:color-mix(in oklab,var(--destructive)32%,transparent)}
}
.c-alert--info{border-color:var(--info)}
@supports (color:color-mix(in lab, red, red)){
.c-alert--info{border-color:color-mix(in oklab,var(--info)32%,transparent)}
}
.c-alert--success{border-color:var(--success)}
@supports (color:color-mix(in lab, red, red)){
.c-alert--success{border-color:color-mix(in oklab,var(--success)32%,transparent)}
}
.c-alert--warning{border-color:var(--warning)}
@supports (color:color-mix(in lab, red, red)){
.c-alert--warning{border-color:color-mix(in oklab,var(--warning)32%,transparent)}
}
.c-alert--error{background-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-alert--error{background-color:color-mix(in oklab,var(--destructive)4%,transparent)}
}
.c-alert--info{background-color:var(--info)}
@supports (color:color-mix(in lab, red, red)){
.c-alert--info{background-color:color-mix(in oklab,var(--info)4%,transparent)}
}
.c-alert--success{background-color:var(--success)}
@supports (color:color-mix(in lab, red, red)){
.c-alert--success{background-color:color-mix(in oklab,var(--success)4%,transparent)}
}
.c-alert--default{background-color:#0000}
.c-alert--warning{background-color:var(--warning)}
@supports (color:color-mix(in lab, red, red)){
.c-alert--warning{background-color:color-mix(in oklab,var(--warning)4%,transparent)}
}
.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))}
.c-alert__title{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.c-alert{color:var(--card-foreground)}
.c-alert__description{color:var(--muted-foreground)}
.c-alert:has(>svg){grid-template-columns:calc(var(--spacing)*4)1fr;column-gap:calc(var(--spacing)*2)}
@media not all and (min-width:40rem){
.c-alert__action{grid-column-start:2;margin-top:calc(var(--spacing)*2)}
}
@media (min-width:40rem){
.c-alert__action{grid-row-start:1;grid-row-end:3;align-self:center}
}
.c-alert--default:is(.dark *){background-color:var(--input)}
@supports (color:color-mix(in lab, red, red)){
.c-alert--default:is(.dark *){background-color:color-mix(in oklab,var(--input)32%,transparent)}
}
.c-alert>svg{height:1lh;width:calc(var(--spacing)*4)}
.c-alert--error>svg{color:var(--destructive)}
.c-alert--info>svg{color:var(--info)}
.c-alert--default>svg{color:var(--muted-foreground)}
.c-alert--success>svg{color:var(--success)}
.c-alert--warning>svg{color:var(--warning)}
/* propio */
.c-alert:has(>svg):has(>.c-alert__action){grid-template-columns:calc(var(--spacing)*4) 1fr auto}
.c-alert:not(:has(>svg)):has(>.c-alert__action){grid-template-columns:1fr auto}
@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}}
.c-alert-stack{display:grid;gap:.75rem;width:100%;max-width:32rem}
svg~.c-alert__title,svg~.c-alert__description{grid-column-start:2}
```

## Credits

- coss ui (MIT) · alert.tsx: https://coss.com/ui