---
titulo: Aviso
resumen: Mensaje en línea que informa del resultado de una acción o de una
  situación de la cuenta. Cuatro tonos.
estado: produccion
funcion: feedback
nivel: atomo
creado: 2026-10-11
actualizado: 2026-10-11
tokens:
  - accent-soft
  - ink
  - success
  - success-soft
  - warning
  - warning-soft
  - danger
  - danger-soft
relacionados:
  - componentes/insignia
  - fundamentos/color
plataformas:
  web:
    estado: produccion
    superficies:
      - id: portal
        fuente: src/components/ui/alert.tsx
id: componentes/aviso
url: /designloop/componentes/aviso
sync: ok
---

# Aviso

Mensaje en línea que informa del resultado de una acción o de una situación de la cuenta. Cuatro tonos.

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

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

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

## Tonos

```html preview superficie=portal
<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](/designloop/componentes/boton).

## 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.

# Enlace con producción

| Fuente | Estado | Huella |
| --- | --- | --- |
| `src/components/ui/alert.tsx` | Sincronizado | 67a4aa293e097e8a |
| `tokens.produccion.json` | Sincronizado | — |