InfoCallout

El InfoCallout aclara un detalle justo donde importa: una renovación automática, un plazo por vencer o un beneficio del plan.

Plan TAG mensual

$4.990

JTRX-12

El plan se renueva automáticamente cada mes, salvo que lo canceles.

Anatomía

Una superficie suave con ícono y texto. La acción al final es opcional y sirve para resolver el aviso sin salir de la pantalla.

Tu SOAP vence en 12 días.
  1. Superficie
  2. Ícono
  3. Texto
  4. Acción opcional

Variantes

El tono dice qué tan importante es la nota. warning cambia también el ícono a una alerta.

El técnico llega en un bloque de 2 horas.
InfoAclaraciones neutras que conviene saber antes de seguir.
Tu revisión técnica vence en 12 días.
WarningAlgo que requiere atención o una acción pronto.
Tu plan incluye retiro y entrega gratis.
SecondaryBeneficios y detalles positivos del plan o servicio.

Opciones

Tu SOAP vence en 12 días.
Con acciónUn Button ghost pequeño en trailing para resolver el aviso ahí mismo.
Tu primera mantención tiene 15% de descuento.
Ícono propioReemplaza el ícono por defecto cuando otro explica mejor el mensaje.

Uso

El técnico llega en un bloque de 2 horas.
Sí
Una idea por callout, cerca de lo que explica.
El técnico llega en un bloque de 2 horas.
Ten a mano el padrón del auto.
Puedes reagendar sin costo.
No
Varios callouts seguidos. Junta lo importante o muévelo a otra pantalla.
Tu revisión técnica vence en 12 días.
Sí
warning solo cuando hay algo que hacer o un plazo que cuidar.
Atendemos de lunes a sábado.
No
warning para información neutra. Asusta sin motivo.

Código

import { InfoCallout } from '@carvuk/design-system/components/info-callout';

<InfoCallout>Tu plan TAG se renueva cada mes.</InfoCallout>
<InfoCallout tone='warning'>Tu SOAP vence en 12 días.</InfoCallout>