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 use hardcoded colors (green, red, amber) that always look semantically correct regardless of theme.

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"}

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}