[{"data":1,"prerenderedAt":1007},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/components/button":270,"docs-bottom-nav":934},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":272,"body":273,"description":926,"extension":927,"meta":928,"navigation":929,"path":166,"seo":930,"sitemap":931,"stem":932,"__hash__":933},"docs/docs/components/button.md","Button Component",{"type":274,"value":275,"toc":914},"minimark",[276,280,284,289,297,304,362,368,372,375,380,386,392,426,440,444,448,453,490,503,507,510,550,553,627,630,683,688,692,703,713,718,723,729,766,770,775,781,818,822,836,848,852,855,858,895,899,910],[277,278,272],"h1",{"id":279},"button-component",[281,282,283],"p",{},"The Button component makes it easy to add a styled link button to your HTML emails.",[285,286,288],"h2",{"id":287},"usage","Usage",[281,290,291,292,296],{},"The Button component is defined in ",[293,294,295],"code",{},"components/button.html",".",[281,298,299,300,303],{},"This enables the ",[293,301,302],{},"\u003Cx-button>"," tag, which you can use like this:",[305,306,312],"pre",{"className":307,"code":308,"filename":309,"language":310,"meta":311,"style":311},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Cx-button href=\"https://example.com\">\n  Book now\n\u003C/x-button>\n","emails/example.html","html","",[293,313,314,346,352],{"__ignoreMap":311},[315,316,319,323,327,331,334,337,341,343],"span",{"class":317,"line":318},"line",1,[315,320,322],{"class":321},"soJEP","\u003C",[315,324,326],{"class":325},"sizJ4","x-button",[315,328,330],{"class":329},"sQMLp"," href",[315,332,333],{"class":321},"=",[315,335,336],{"class":329},"\"",[315,338,340],{"class":339},"sfCc6","https://example.com",[315,342,336],{"class":329},[315,344,345],{"class":321},">\n",[315,347,349],{"class":317,"line":348},2,[315,350,351],{"class":339},"  Book now\n",[315,353,355,358,360],{"class":317,"line":354},3,[315,356,357],{"class":321},"\u003C/",[315,359,326],{"class":325},[315,361,345],{"class":321},[281,363,364,365,296],{},"You can use it anywhere you'd use a ",[293,366,367],{},"\u003Cdiv>",[285,369,371],{"id":370},"customization","Customization",[281,373,374],{},"You can align the Button to the left, center or right, change its CSS styling, and adjust padding for Outlook on Windows.",[376,377,379],"h3",{"id":378},"href","Href",[281,381,382,383],{},"Default: ",[293,384,385],{},"undefined",[281,387,388,389,391],{},"If you want the Button to link somewhere, you need to pass it the ",[293,390,378],{}," prop:",[305,393,394],{"className":307,"code":308,"filename":309,"language":310,"meta":311,"style":311},[293,395,396,414,418],{"__ignoreMap":311},[315,397,398,400,402,404,406,408,410,412],{"class":317,"line":318},[315,399,322],{"class":321},[315,401,326],{"class":325},[315,403,330],{"class":329},[315,405,333],{"class":321},[315,407,336],{"class":329},[315,409,340],{"class":339},[315,411,336],{"class":329},[315,413,345],{"class":321},[315,415,416],{"class":317,"line":348},[315,417,351],{"class":339},[315,419,420,422,424],{"class":317,"line":354},[315,421,357],{"class":321},[315,423,326],{"class":325},[315,425,345],{"class":321},[427,428,429,430,432,433,435,436,439],"alert",{},"\nThe Button still renders if you don't pass \n",[293,431,378],{},"\n, but it will not include the \n",[293,434,378],{},"\n attribute on the \n",[293,437,438],{},"\u003Ca>","\n tag and might look broken in some email clients because of this.\n",[376,441,443],{"id":442},"align","Align",[281,445,382,446],{},[293,447,385],{},[281,449,450,451,391],{},"You can align the Button to the left, center or right, through the ",[293,452,442],{},[305,454,456],{"className":307,"code":455,"filename":309,"language":310,"meta":311,"style":311},"\u003Cx-button align=\"center\">\n  Book now\n\u003C/x-button>\n",[293,457,458,478,482],{"__ignoreMap":311},[315,459,460,462,464,467,469,471,474,476],{"class":317,"line":318},[315,461,322],{"class":321},[315,463,326],{"class":325},[315,465,466],{"class":329}," align",[315,468,333],{"class":321},[315,470,336],{"class":329},[315,472,473],{"class":339},"center",[315,475,336],{"class":329},[315,477,345],{"class":321},[315,479,480],{"class":317,"line":348},[315,481,351],{"class":339},[315,483,484,486,488],{"class":317,"line":354},[315,485,357],{"class":321},[315,487,326],{"class":325},[315,489,345],{"class":321},[281,491,492,493,496,497,499,500,502],{},"This will add the ",[293,494,495],{},"text-center"," class to the button's wrapper ",[293,498,367],{},", which will align the ",[293,501,438],{}," inside it to the center.",[376,504,506],{"id":505},"styling","Styling",[281,508,509],{},"You may style the Button as needed through props or with Tailwind CSS utilities.",[281,511,512,513,536,537,549],{},"The button includes a ",[315,514,524,532],{"className":515},[516,517,518,519,520,521,522,523],"inline-flex","gap-1","px-2","translate-y-0.5","border","border-slate-200","border-solid","rounded",[315,525],{"className":526,"title":531},[527,528,529,530,523],"w-3","h-3","mt-1.5","bg-indigo-700","#4338ca",[315,533,530],{"className":534},[535],"text-sm/6"," background and ",[315,538,540,545],{"className":539},[516,517,518,519,520,521,522,523],[315,541],{"className":542,"title":544},[527,528,529,520,522,523,543],"bg-slate-50","#f8fafc",[315,546,548],{"className":547},[535],"text-slate-50"," text color by default, which you can change through props.",[281,551,552],{},"For example, let's make the button blue-themed:",[305,554,556],{"className":307,"code":555,"filename":309,"language":310,"meta":311,"style":311},"\u003Cx-button\n  href=\"https://example.com\"\n  color=\"#fffffe\"\n  bg-color=\"#1e65e1\"\n>\n  Book now\n\u003C/x-button>\n",[293,557,558,565,579,593,608,613,618],{"__ignoreMap":311},[315,559,560,562],{"class":317,"line":318},[315,561,322],{"class":321},[315,563,564],{"class":325},"x-button\n",[315,566,567,570,572,574,576],{"class":317,"line":348},[315,568,569],{"class":329},"  href",[315,571,333],{"class":321},[315,573,336],{"class":329},[315,575,340],{"class":339},[315,577,578],{"class":329},"\"\n",[315,580,581,584,586,588,591],{"class":317,"line":354},[315,582,583],{"class":329},"  color",[315,585,333],{"class":321},[315,587,336],{"class":329},[315,589,590],{"class":339},"#fffffe",[315,592,578],{"class":329},[315,594,596,599,601,603,606],{"class":317,"line":595},4,[315,597,598],{"class":329},"  bg-color",[315,600,333],{"class":321},[315,602,336],{"class":329},[315,604,605],{"class":339},"#1e65e1",[315,607,578],{"class":329},[315,609,611],{"class":317,"line":610},5,[315,612,345],{"class":321},[315,614,616],{"class":317,"line":615},6,[315,617,351],{"class":339},[315,619,621,623,625],{"class":317,"line":620},7,[315,622,357],{"class":321},[315,624,326],{"class":325},[315,626,345],{"class":321},[281,628,629],{},"You can also use Tailwind CSS utilities to set the text and background colors:",[305,631,633],{"className":307,"code":632,"filename":309,"language":310,"meta":311,"style":311},"\u003Cx-button\n  href=\"https://example.com\"\n  class=\"bg-blue-500 text-white\"\n>\n  Book now\n\u003C/x-button>\n",[293,634,635,641,653,667,671,675],{"__ignoreMap":311},[315,636,637,639],{"class":317,"line":318},[315,638,322],{"class":321},[315,640,564],{"class":325},[315,642,643,645,647,649,651],{"class":317,"line":348},[315,644,569],{"class":329},[315,646,333],{"class":321},[315,648,336],{"class":329},[315,650,340],{"class":339},[315,652,578],{"class":329},[315,654,655,658,660,662,665],{"class":317,"line":354},[315,656,657],{"class":329},"  class",[315,659,333],{"class":321},[315,661,336],{"class":329},[315,663,664],{"class":339},"bg-blue-500 text-white",[315,666,578],{"class":329},[315,668,669],{"class":317,"line":595},[315,670,345],{"class":321},[315,672,673],{"class":317,"line":610},[315,674,351],{"class":339},[315,676,677,679,681],{"class":317,"line":615},[315,678,357],{"class":321},[315,680,326],{"class":325},[315,682,345],{"class":321},[281,684,685,686,296],{},"Of course, you may also change the colors directly in ",[293,687,295],{},[376,689,691],{"id":690},"mso-padding","MSO Padding",[281,693,694,695,698,699,702],{},"Top and bottom padding for Outlook on Windows is controlled through ",[293,696,697],{},"letter-spacing"," and ",[293,700,701],{},"mso-text-raise",", a proprietary Outlook CSS property.",[281,704,705,706,296],{},"This technique is based on the Link Button from ",[707,708,712],"a",{"href":709,"rel":710},"https://www.goodemailcode.com/email-code/link-button",[711],"nofollow","goodemailcode.com",[714,715,717],"h4",{"id":716},"mso-top-padding","MSO top padding",[281,719,382,720],{},[293,721,722],{},"16px",[281,724,725,726,391],{},"Adjust the top padding for Outlook on Windows with the ",[293,727,728],{},"mso-pt",[305,730,732],{"className":307,"code":731,"filename":309,"language":310,"meta":311,"style":311},"\u003Cx-button mso-pt=\"12px\">\n  Book now\n\u003C/x-button>\n",[293,733,734,754,758],{"__ignoreMap":311},[315,735,736,738,740,743,745,747,750,752],{"class":317,"line":318},[315,737,322],{"class":321},[315,739,326],{"class":325},[315,741,742],{"class":329}," mso-pt",[315,744,333],{"class":321},[315,746,336],{"class":329},[315,748,749],{"class":339},"12px",[315,751,336],{"class":329},[315,753,345],{"class":321},[315,755,756],{"class":317,"line":348},[315,757,351],{"class":339},[315,759,760,762,764],{"class":317,"line":354},[315,761,357],{"class":321},[315,763,326],{"class":325},[315,765,345],{"class":321},[714,767,769],{"id":768},"mso-bottom-padding","MSO bottom padding",[281,771,382,772],{},[293,773,774],{},"31px",[281,776,777,778,391],{},"Adjust the bottom padding for Outlook on Windows with the ",[293,779,780],{},"mso-pb",[305,782,784],{"className":307,"code":783,"filename":309,"language":310,"meta":311,"style":311},"\u003Cx-button mso-pb=\"24px\">\n  Book now\n\u003C/x-button>\n",[293,785,786,806,810],{"__ignoreMap":311},[315,787,788,790,792,795,797,799,802,804],{"class":317,"line":318},[315,789,322],{"class":321},[315,791,326],{"class":325},[315,793,794],{"class":329}," mso-pb",[315,796,333],{"class":321},[315,798,336],{"class":329},[315,800,801],{"class":339},"24px",[315,803,336],{"class":329},[315,805,345],{"class":321},[315,807,808],{"class":317,"line":348},[315,809,351],{"class":339},[315,811,812,814,816],{"class":317,"line":354},[315,813,357],{"class":321},[315,815,326],{"class":325},[315,817,345],{"class":321},[376,819,821],{"id":820},"other-attributes","Other attributes",[281,823,824,825,828,829,832,833,835],{},"You may pass any other HTML attributes to the component, such as ",[293,826,827],{},"data-*"," or ",[293,830,831],{},"id"," - they will all be added to the ",[293,834,438],{}," tag.",[281,837,838,839,843,844,847],{},"Note that non-standard attributes will be ignored by default - you'll need to define them as props in the component if you need them preserved. Alternatively, you can ",[707,840,842],{"href":841},"/docs/configuration/components#safelistattributes","safelist"," them in your ",[293,845,846],{},"build.components"," config.",[285,849,851],{"id":850},"responsive","Responsive",[281,853,854],{},"To override Button styling on small viewports, use Tailwind CSS utilities.",[281,856,857],{},"For example, let's make the button full-width on small viewports:",[305,859,861],{"className":307,"code":860,"filename":309,"language":310,"meta":311,"style":311},"\u003Cx-button class=\"sm:block\">\n  Book now\n\u003C/x-button>\n",[293,862,863,883,887],{"__ignoreMap":311},[315,864,865,867,869,872,874,876,879,881],{"class":317,"line":318},[315,866,322],{"class":321},[315,868,326],{"class":325},[315,870,871],{"class":329}," class",[315,873,333],{"class":321},[315,875,336],{"class":329},[315,877,878],{"class":339},"sm:block",[315,880,336],{"class":329},[315,882,345],{"class":321},[315,884,885],{"class":317,"line":348},[315,886,351],{"class":339},[315,888,889,891,893],{"class":317,"line":354},[315,890,357],{"class":321},[315,892,326],{"class":325},[315,894,345],{"class":321},[285,896,898],{"id":897},"alternatives","Alternatives",[281,900,901,902,905,906,909],{},"There are other ways to create buttons in your HTML emails, such as by using a ",[293,903,904],{},"\u003Ctable>",". Check out our ",[707,907,908],{"href":181},"Button examples"," for more ideas.",[911,912,913],"style",{},"html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":311,"searchDepth":348,"depth":348,"links":915},[916,917,924,925],{"id":287,"depth":348,"text":288},{"id":370,"depth":348,"text":371,"children":918},[919,920,921,922,923],{"id":378,"depth":354,"text":379},{"id":442,"depth":354,"text":443},{"id":505,"depth":354,"text":506},{"id":690,"depth":354,"text":691},{"id":820,"depth":354,"text":821},{"id":850,"depth":348,"text":851},{"id":897,"depth":348,"text":898},"A component for creating styled link buttons to your HTML emails.","md",{},true,{"title":272,"description":926},{"loc":166},"docs/components/button","VRP8KOH4HLs57rMw_36_eG_M7u9dtxeY6ruoiiUlLbg",{"id":4,"extension":5,"items":935,"meta":1006,"stem":195,"__hash__":196},[936,946,951,960,973,991,997],{"name":8,"items":937},[938,939,940,941,942,943,944,945],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":947},[948,949,950],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":952},[953,954,955,956,957,958,959],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":961},[962,963,964,965,966,967,968,969,970,971,972],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":974},[975,976,977,978,979,980,981,982,983,984,985,986,987,988,989,990],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":992},[993,994,995,996],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":998},[999,1000,1001,1002,1003,1004,1005],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318590602]