Button

A clickable button component that renders as a styled link optimized for email client compatibility. The button automatically handles padding, styling, and Outlook-specific rendering quirks.

Installation

The EButton component is automatically available when you install nuxt-email-renderer. No additional imports needed.

Getting Started

Add the component to your email template:

<template>
  <EHtml>
    <EBody>
      <EContainer>
        <EButton href="https://example.com"> Click me </EButton>
      </EContainer>
    </EBody>
  </EHtml>
</template>

Props

The EButton component accepts all standard HTML anchor attributes, plus custom styling:

Style Properties

The button supports all CSS properties, with special handling for padding:

• padding - Overall padding (supports px, em, rem, %)
• paddingTop, paddingRight, paddingBottom, paddingLeft - Individual padding values
• backgroundColor - Button background color
• color - Text color
• borderRadius - Button border radius
• fontSize, fontWeight, fontFamily - Text styling
• textDecoration - Text decoration (usually set to "none")

Best Practices

Recommended Button Styles

<template>
  <!-- Good: Simple, compatible styling -->
  <EButton
    href="https://example.com"
    style="
      background-color: #007bff;
      color: #ffffff;
      padding: 12px 24px;
      text-decoration: none;
      border-radius: 6px;
      display: inline-block;
    "
  >
    Action Button
  </EButton>

  <!-- Avoid: Complex gradients, shadows -->
  <EButton
    href="https://example.com"
    style="
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      transform: translateY(-2px);
    "
  >
    Avoid This
  </EButton>
</template>

Email Client Support

The button component is thoroughly tested and optimized for:

• ✅ Gmail (Desktop & Mobile)
• ✅ Apple Mail
• ✅ Outlook 2016+ (with MSO-specific fixes)
• ✅ Yahoo Mail
• ✅ Thunderbird
• ✅ Samsung Email
• ✅ HEY

Outlook Compatibility

The component automatically includes Outlook-specific fixes for proper padding and rendering:

• MSO conditional comments for padding
• Text raise adjustments
• Proper button rendering in Outlook

Related Components

• ELink - For simple text links
• EContainer - For button layouts
• ERow and EColumn - For button groups