Buttons

Add call-to-action buttons to your emails.

Add call-to-action buttons using the {button} attribute:

[Get Started](https://example.com){button}

[Learn More](https://example.com){button.secondary}

[Shop Sale](https://example.com){button color="#dc2626"}

Semantic Colors

Use preset color names for common actions:

[Confirm Account](https://example.com/confirm){button.success}

[Delete Account](https://example.com/delete){button.danger}

[Review Changes](https://example.com/review){button.warning}

These default to standard semantic colors (green, red, amber). You can customize them with success_color, danger_color, and warning_color in frontmatter or via the theme API. The secondary button color can be changed with secondary_color.

Side-by-Side Buttons

Place multiple buttons on the same line to render them side-by-side:

[Get Started](https://example.com){button} [Learn More](https://example.com/more){button.secondary}

Buttons on separate lines (separated by a blank line) stack vertically as usual. MJML handles responsive stacking automatically — side-by-side on desktop, stacked on mobile.

Full-Width Buttons

Make a button span the full width of the email content area with width="full":

[Get Started](https://example.com){button width="full"}

This works with any variant or custom color:

[Learn More](https://example.com){button.secondary width="full"}

[Shop Sale](https://example.com){button color="#dc2626" width="full"}

Border Radius

Override the default border radius (8px) on individual buttons with border-radius="...":

[Get Started](https://example.com){button border-radius="24px"}

[Sharp](https://example.com){button border-radius="0"}

To change the default border radius for all buttons (and callouts/highlights), set border_radius in frontmatter or via the theme API.

Button Fallback

Add a fallback URL below a button for accessibility. Some email clients block or strip buttons, so providing the raw URL ensures recipients can still take action:

[Reset Password](https://example.com/reset){button fallback}

This renders a small muted text below the button: "If you're having trouble clicking the button, copy and paste this URL into your browser."

Works with button groups too — only buttons with fallback show their URL:

[Accept](https://example.com/accept){button fallback} [Decline](https://example.com/decline){button.secondary}

Custom Fallback Text

Override the default fallback message with fallback="custom text" to support different languages or custom wording:

[Réinitialiser](https://example.com/reset){button fallback="Si vous avez des difficultés, copiez cette URL :"}

The custom text is rendered before the URL link. When no value is provided (fallback without ="..."), the default English message is used.