Mensaje informativo o de error que aparece dentro del flujo de la página.
No interrumpe la interacción — es lectura, no decisión. Si necesitas que el
usuario confirme algo, usa alert-dialog en su lugar.
Variantes
default
Pedido confirmado
Tu mesa estará lista en 5 min.
destructive
Pago rechazado
Tu sesión expiró. Por favor inicia sesión de nuevo.
Con ícono
Acompaña el alert con un ícono Phosphor (peso regular para info,
fill para énfasis). El layout usa grid grid-cols-[auto_1fr] gap-3
para alinear ícono y texto.
default + ícono regular
Tu pedido va en camino
El mesero ya lo tiene marcado.
destructive + ícono fill
No hay mesas disponibles
Intenta con otra fecha o suscríbete a la lista.
Con acción
Cuando el alert pide una respuesta — confirmación, undo, link a una página — se agrega un botón al final, alineado a la derecha. Se mantiene la jerarquía: el alert es lectura, el botón es la salida opcional.
Pedido eliminado
¿Te equivocaste? Puedes deshacerlo.
Colores custom
shadcn trae solo default y destructive. Para
success, warning u otros estados, mapea directo a tokens
de marca (asiento para verde, sol para amarillo). El borde y el ícono usan
el color del estado; el texto se mantiene legible.
success — asiento (verde)
Reserva confirmada
Te esperamos el viernes a las 8 pm. Mesa para 4.
warning — sol (amarillo)
Quedan 2 mesas
Si quieres reservar, hazlo pronto.
Estado theme: ⚠ pendiente verificar.