Skip to content

Latest commit

 

History

History
75 lines (67 loc) · 4.65 KB

README.md

File metadata and controls

75 lines (67 loc) · 4.65 KB
Raw

mj-button

desktop

Displays a customizable button.

The `mj-button` won't be fully clickable because of client support. See discussion at Issue #359. 
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-button font-family="Helvetica" background-color="#f45e43" color="white">
          Don't click me!
         </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

try it live

`mj-button` is an "ending tag", which means it can contain HTML code which will be left as it is, so it can contain HTML tags with attributes, but it cannot contain other MJML components. More information about ending tags in this section.
attribute unit description default value
align string horizontal alignment center
background-color color button background-color #414141
border string css border format none
border-bottom string css border format n/a
border-left string css border format n/a
border-radius px border radius 3px
border-right string css border format n/a
border-top string css border format n/a
color color text color #ffffff
container-background-color color button container background color n/a
css-class string class name, added to the root HTML element created n/a
font-family string font name Ubuntu, Helvetica, Arial, sans-serif
font-size px text size 13px
font-style string normal/italic/oblique n/a
font-weight number text thickness normal
height px button height n/a
href link link to be triggered when the button is clicked n/a
inner-padding px inner button padding 10px 25px
letter-spacing px,em letter-spacing n/a
line-height px/%/none line-height on link 120%
padding px supports up to 4 parameters 10px 25px
padding-bottom px bottom offset n/a
padding-left px left offset n/a
padding-right px right offset n/a
padding-top px top offset n/a
rel string specify the rel attribute for the button link n/a
target string specify the target attribute for the button link _blank
text-align string text-align button content none
text-decoration string underline/overline/none none
text-transform string capitalize/uppercase/lowercase none
title string tooltip & accessibility n/a
vertical-align string vertical alignment middle
width px button width n/a