> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Element Reference: Button

> Everything you need to know about the mj-button component

Buttons are your primary conversion tool. A well-designed button draws the eye and makes the next step obvious. The Email Love plugin uses MJML's button component, which renders as a bulletproof button across all email clients, including the notoriously difficult Outlook.

## Adding Buttons

Select a column in your design, then open the **Build Your Own** tab in the Email Love plugin. Click **Button** to add a button component into the selected column. The component includes the button text, background color, and link properties.

## Button Properties

Configure your button using the Email Love plugin's properties panel:

| Property         | Description                              | Example                                              |
| ---------------- | ---------------------------------------- | ---------------------------------------------------- |
| Button text      | The label displayed on the button        | Shop Now                                             |
| Link URL         | Where the button links to                | [https://example.com/shop](https://example.com/shop) |
| Background color | Set via Figma's fill on the button frame | #E94560                                              |
| Text color       | Set via Figma's text fill                | #FFFFFF                                              |
| Border radius    | Set via Figma's corner radius            | 4px                                                  |
| Padding          | Set via Figma's auto layout padding      | 12px 24px                                            |
| Font size        | Set via Figma's text settings            | 16px                                                 |
| Width            | Full width or auto (content-fit)         | auto                                                 |

## Design Best Practices

* **Make it obvious:** Use a contrasting color that stands out from surrounding content. If your email is mostly white and blue, an orange or red button pops.
* **Action-oriented text:** Use verbs: "Shop Now," "Get Started," "Download Free Guide." Avoid vague labels like "Click Here" or "Learn More" (unless your audience knows exactly what they're learning about).
* **Size for tapping:** Minimum height of 44px with at least 16px padding on all sides. Fingers are imprecise. Make the target generous.
* **One primary CTA per email:** You can have multiple buttons, but make one clearly dominant with size, color, or placement.
* **Limit to 2-3 buttons total:** Too many CTAs dilute the impact of each one.

## Outlook Rendering

Outlook on Windows doesn't support CSS-based buttons reliably. The Email Love plugin generates VML (Vector Markup Language) fallback code that renders bulletproof buttons in Outlook. A few things to know:

* Border radius is ignored in Outlook on Windows. Buttons render as rectangles
* Gradients on buttons won't render in Outlook. Use solid background colors
* The VML button matches your solid background color and text styling exactly

## Mobile Overrides

The plugin automatically syncs button mobile width based on how you've sized the button in Figma:

* **Fill** (button stretches to fill the column) → The plugin automatically enables **full-width on mobile** (width: 100%). This means your button will span the full column width on both desktop and mobile.
* **Hug** or **Fixed** width → The plugin automatically keeps the button at its fixed width on mobile.

You can always override this manually in the **Mobile Styles** tab if you want different behavior.

Additional mobile tips:

* **Font size:** Keep button text at 16px minimum on mobile
* **Padding:** Increase vertical padding for a larger tap target

## Common Issues

* **Button text wraps unexpectedly:** Your button text is too long or padding is too large. Shorten the text or reduce horizontal padding.
* **Button isn't clickable:** Check that the link URL is set in the plugin's properties panel, not in Figma's prototype settings.
* **Button color looks wrong in dark mode:** Dark mode may invert your button colors. Test in dark mode preview and consider setting custom dark mode colors for iOS.