EmailButton

EmailButton construye una URL mailto: y redirige a ella al hacer clic, abriendo el cliente de correo predeterminado del dispositivo con los campos email, subject y body pre-poblados. Envuelve el componente base Button y usa por defecto un color de advertencia con un ícono de correo. Úsalo en páginas de contacto, confirmaciones de pedidos o vistas de detalles de proveedores.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | email | string | Sí | — | Dirección de correo electrónico del destinatario. | | subject | string | No | "" | Asunto pre-completado para el correo. | | body | string | No | "" | Cuerpo de texto pre-completado para el correo. | | title | string | No | "Enviar correo" | Etiqueta que se muestra en el botón. | | icon | string | No | "email" | Identificador del ícono mostrado antes de la etiqueta. | | color | string | No | "warning" | Clave de color del tema o cualquier color CSS (hex o nombre). | | type | "clear" \| "outline" \| "solid" | No | "solid" | Variante visual del botón. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controla el padding, tamaño de fuente y tamaño del ícono. | | borderRadius | number | No | 4 | Radio del borde en píxeles. | | disabled | boolean | No | false | Deshabilita la interacción y reduce la opacidad. | | style | React.CSSProperties | No | — | Estilos en línea aplicados al botón. |

Uso

Básico

import EmailButton from '@/components/buttons/EmailButton';

export default function Example() {
  return (
    <EmailButton email="soporte@ejemplo.com" />
  );
}

Con asunto y cuerpo

import EmailButton from '@/components/buttons/EmailButton';

export default function Example({ orderId }: { orderId: string }) {
  return (
    <EmailButton
      email="pedidos@ejemplo.com"
      subject={`Consulta sobre pedido #${orderId}`}
      body={`Hola, tengo una pregunta sobre el pedido #${orderId}.`}
      title="Contactar soporte"
      size="sm"
    />
  );
}