Aviso

Alert, en src/components/ui/alert.tsx. Solo existe en el portal.

import { Alert } from '@/components/ui';

<Alert tone="success">{t('clientDeleted')}</Alert>
<Alert tone="warning">{t('seatsFull')}</Alert>
<Alert tone="danger">{t('teamLoadError')}</Alert>

Tonos

<div style="display:grid;gap:12px;max-width:560px">
<div role="status" class="rounded-xl border px-4 py-3 text-sm border-success-soft bg-success-soft text-success">Cliente eliminado junto con sus archivos.</div>
<div role="status" class="rounded-xl border px-4 py-3 text-sm border-warning-soft bg-warning-soft text-warning">No quedan plazas libres. Quita a alguien o escríbenos para ampliarlas.</div>
<div role="alert" class="rounded-xl border px-4 py-3 text-sm border-danger-soft bg-danger-soft text-danger">No hemos podido cargar el equipo. Recarga la página.</div>
</div>

El tono info (por defecto) usa border-accent-soft bg-accent-soft/60 text-ink. Hoy ninguna pantalla lo usa.

Props

Prop	Valores	Por defecto
tone	info, success, warning, danger	info
role	status, alert	alert si el tono es danger; si no, status
className	Clases extra (en producción, sobre todo el margen: mb-6)	—

Reglas

Regla	Cómo se comprueba
El tono dice qué pasó: success confirma, warning explica un límite o una incidencia que la persona puede resolver, danger es un error.	Cada <Alert> de producción usa el tono de su mensaje.
Los errores se anuncian al momento; el resto, sin interrumpir.	danger lleva role="alert"; los demás, role="status".
El texto dice qué pasó y qué hacer después, en una o dos frases.	Los textos salen del diccionario i18n (teamLoadError, seatsFull).
El aviso ocupa el ancho de su contenedor y va antes del contenido al que se refiere.	En las páginas aparece tras la cabecera de página o encima del formulario.

Antipatrones

• Aviso para un dato fijo: si no es el resultado de algo ni una situación que cambie, es texto de la página.
• Rojo para avisar: danger solo para errores; un límite de plan es warning.
• Aviso con botones dentro: las acciones van fuera del aviso, con el botón.

Accesibilidad

• El color nunca es la única señal: el texto explica el estado.
• Contraste: el texto de cada tono usa el color fuerte (--success, --warning, --danger) sobre su versión suave.