Toast

Los toasts confirman que algo pasó sin interrumpir: un pago, una hora agendada, un dato guardado. Aparecen unos segundos y desaparecen solos.

Mantención 10.000 km · JTRX-12

Sábado 18, 10:00

Av. Apoquindo 4501, Las Condes

Hora agendada

Te avisaremos un día antes

Ver

Anatomía

Un título corto que confirma lo que pasó. La descripción y la acción son opcionales; en mobile la acción se oculta para no competir con el contenido.

Hora agendada

Sábado 18, 10:00

Ver
  1. Ícono
  2. Título
  3. Descripción opcional
  4. Acción opcional

Variantes

El tono acompaña el resultado. Default e info comparten la superficie oscura y solo cambian el ícono.

Hora agendada

Sábado 18 de octubre, 10:00

Default e infoConfirmaciones y novedades. El tono oscuro es el más usado.

Pago confirmado

$89.990 con tarjeta terminada en 4821

SuccessCuando algo importante terminó bien, como un pago.

No pudimos guardar

Revisa tu conexión e intenta de nuevo

ErrorFallas que el usuario puede reintentar.

Quedan pocas horas

Solo 2 horas disponibles el sábado

WarningAvisos que no bloquean pero conviene leer.

En vivo

Monta un solo Toaster en la app y llama a toast desde cualquier parte. Cada toast se va solo después de unos segundos.

Prueba cada tonoEn desktop aparece arriba a la derecha; en mobile, abajo y al centro.

Uso

Pago confirmado

Sí
Confirma en pocas palabras algo que ya pasó.

No pudimos procesar tu pago

Revisa los datos de tu tarjeta, elige otro medio de pago o contacta a tu banco.

No
Errores que exigen una decisión. Usa un sheet o un mensaje en la pantalla.

Datos guardados

Sí
Un toast a la vez, con el resultado más reciente.

Datos guardados

Pago confirmado

Hora agendada

No
Varios toasts apilados. Se tapan entre sí y nadie alcanza a leerlos.

Código

import { Toaster, toast } from '@carvuk/design-system/components/toast';

<Toaster />

toast('Hora agendada', { description: 'Sábado 18 de octubre, 10:00' });
toast.success('Pago confirmado');
toast.error('No pudimos guardar');