mzp-c-button-container class can be used around a group of buttons. It applies a flexbox context and the default form spacing. Modifier classes can then be added to change the layout.
mzp-l-align-endaligns buttons opposite to the text (right in LTR languages, left in RTL languages).
mzp-l-align-centeraligns buttons in the center.
mzp-l-stretchmakes buttons fill the width of the container. Multiple buttons will be stacked and full-width in smaller viewports, and appear inline and stretched in larger viewports. This option is best suited to narrow forms.
mzp-c-button-infoto add a brief note in small text, typically for some kind of disclaimer or contextual information about the form being submitted. It usually appears below/after the buttons but in some cases could appear above/before.
<div class="mzp-c-button-container"> <button class="mzp-c-button" type="button">Primary</button> <button class="mzp-c-button mzp-t-secondary" type="button">Secondary</button> <p class="mzp-c-button-info">More information.</p> </div>