`. ## Customization You can align the Button to the left, center or right, change its CSS styling, and adjust padding for Outlook on Windows. ### Href Default: `undefined` If you want the Button to link somewhere, you need to pass it the `href` prop: ```html [emails/example.html] Book now ``` The Button still renders if you don't pass `href` , but it will not include the `href` attribute on the `` tag and might look broken in some email clients because of this. ### Align Default: `undefined` You can align the Button to the left, center or right, through the `align` prop: ```html [emails/example.html] Book now ``` This will add the `text-center` class to the button's wrapper `

`, which will align the `` inside it to the center. ### Styling You may style the Button as needed through props or with Tailwind CSS utilities. The button includes a bg-indigo-700 background and text-slate-50 text color by default, which you can change through props. For example, let's make the button blue-themed: ```html [emails/example.html] Book now ``` You can also use Tailwind CSS utilities to set the text and background colors: ```html [emails/example.html] Book now ``` Of course, you may also change the colors directly in `components/button.html`. ### MSO Padding Top and bottom padding for Outlook on Windows is controlled through `letter-spacing` and `mso-text-raise`, a proprietary Outlook CSS property. This technique is based on the Link Button from [goodemailcode.com](https://www.goodemailcode.com/email-code/link-button). #### MSO top padding Default: `16px` Adjust the top padding for Outlook on Windows with the `mso-pt` prop: ```html [emails/example.html] Book now ``` #### MSO bottom padding Default: `31px` Adjust the bottom padding for Outlook on Windows with the `mso-pb` prop: ```html [emails/example.html] Book now ``` ### Other attributes You may pass any other HTML attributes to the component, such as `data-*` or `id` - they will all be added to the `` tag. 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 [safelist](/docs/configuration/components#safelistattributes) them in your `build.components` config. ## Responsive To override Button styling on small viewports, use Tailwind CSS utilities. For example, let's make the button full-width on small viewports: ```html [emails/example.html] Book now ``` ## Alternatives There are other ways to create buttons in your HTML emails, such as by using a ``. Check out our [Button examples](/docs/examples/buttons) for more ideas.