A button with an icon enhances the UI by adding visual context, such as a submit, delete, or download button.

Variation Buttons

Create a of full-width, we have much greater control over spacing, alignment, and responsive behaviors.

<button type="button" class="btn btn--large btn--primary btn--icon-right" aria-label="Learn More">
Learn More
<span class="material-symbols-outlined">upload</span>
</button>
<button type="button" id="button" class="btn btn--large btn--primary btn--icon-left"
  aria-label="Learn More"><span class="material-symbols-outlined">upload</span>Learn More</button>
<button type="button" id="button" class="btn btn--large btn--secondary btn--icon-left"
  aria-label="Upload Resume"><span class="material-symbols-outlined">upload</span>Upload Resume</button>
<button type="button" id="button" class="btn btn--large btn--reverse btn--icon-left"
  aria-label="Upload Resume"><span class="material-symbols-outlined">upload</span>Upload Resume</button>
<button type="button" id="button" class="btn btn--large btn--reverse-border btn--icon-left"
  aria-label="Upload Resume"><span class="material-symbols-outlined">upload</span>Upload Resume</button>
<button type="button" id="button" class="btn btn--large btn--wide btn--secondary">Wide Button</button>

Loader Buttons

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

<button type="button" class="btn btn--huge btn--white" aria-label="loader">
<span class="loader__circle"></span>
</button>
<button type="button" class="btn btn--large btn--white" aria-label="loader">
<span class="loader__circle"></span>
</button>
<button type="button" class="btn btn--mid btn--white" aria-label="loader">
<span class="loader__circle"></span>
</button>
<button type="button" class="btn btn--small btn--white" aria-label="loader">
<span class="loader__circle"></span>
</button>