EmailButton

EmailButton constructs a mailto: URL and redirects to it when clicked, opening the device's default email client with the email, subject, and body fields pre-populated. It wraps the base Button component and defaults to a warning color with an email icon. Use it on contact pages, order confirmations, or supplier detail views.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | email | string | Yes | — | Recipient email address. | | subject | string | No | "" | Pre-filled subject line for the email. | | body | string | No | "" | Pre-filled body text for the email. | | title | string | No | "Enviar correo" | Label displayed on the button. | | icon | string | No | "email" | Icon identifier shown before the label. | | color | string | No | "warning" | Theme color key or any CSS hex/named color. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Visual variant of the button. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls padding, font size, and icon size. | | borderRadius | number | No | 4 | Border radius in pixels. | | disabled | boolean | No | false | Disables interaction and reduces opacity. | | style | React.CSSProperties | No | — | Inline styles applied to the button. |

Usage

Basic

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

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

With subject and body

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

export default function Example({ orderId }: { orderId: string }) {
  return (
    <EmailButton
      email="orders@example.com"
      subject={`Order #${orderId} inquiry`}
      body={`Hi, I have a question about order #${orderId}.`}
      title="Contact Support"
      size="sm"
    />
  );
}