Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
Use the .button for form actions and primary page actions. These are used extensively around the site.
When using a <button> element, always specify a type. When using a <a> element, always add role="button" for accessibility.
<button class="button primary-action" type="button">Button button</button>
<a class="button primary-action" href="#" role="button">Link button</a>You can find them in four sizes: .size-xs, the default .button, .size-md, and .size-lg.
<button class="button primary-action size-xs" type="button">.button .size-xs</button>
<button class="button primary-action" type="button">.button</button>
<button class="button primary-action size-md" type="button">.button .size-md</button>
<button class="button primary-action size-lg" type="button">.button .size-lg</button>Buttons come in two colors. .primary-action is yellow, and .secondary-action is white.
.primary-action should be used for actions such form submission and “Next”..secondary-action should be used for actions such as “Cancel” and “Back”.<button class="button primary-action" type="button">.button.primary-action</button>
<button class="button secondary-action" type="button">.button.secondary-action</button>In rare cases where the container’s background color is not white, you can manually override the color in SCSS by using @include solid-white-button for the primary action and @include bordered-white-button for the secondary action.
<button class="button primary-action" type="button" disabled>Disabled</button>
<button class="button secondary-action" type="button" disabled>Disabled</button>
<a class="button disabled primary-action" href="https://wealthsimple.com/">Disabled link</a>
<a class="button disabled secondary-action" href="https://wealthsimple.com/">Disabled link</a>Unimplemented (TODO). Are these needed?