Buttons are essential UI elements used for user interactions like submitting forms, triggering actions, or navigating between pages.

Primary Button

Huge, larger, medium or smaller buttons? Add .btn-huge, .btn-large, .btn-mid or .btn-small for additional sizes.

<button type="button" class="btn btn--huge btn--primary" aria-label="Huge Button">Huge Primary Button</button>
<button type="button" class="btn btn--large btn--primary" aria-label="Large Button">Large Primary Button</button>
<button type="button" class="btn btn--mid btn--primary" aria-label="Mid Button">Medium Primary Button</button>
<button type="button" class="btn btn--small btn--primary" aria-label="Small Button">Small Primary Button</button>
<button type="button" class="btn btn--small btn--primary" aria-label="Disabled Button" disabled>Disabled Primary Button</button>
<button type="button" class="btn btn--mid btn--fluid btn--primary" aria-label="Fluid Primary Button">Fluid
Button</button>

Border Primary Button

<button type="button" class="btn btn--huge btn--primary-border" aria-label="Huge Button">Huge Primary Button</button>
<button type="button" class="btn btn--large btn--primary-border" aria-label="Large Button">Large Primary Button</button>
<button type="button" class="btn btn--mid btn--primary-border" aria-label="Mid Button">Medium Primary Button</button>
<button type="button" class="btn btn--small btn--primary-border" aria-label="Small Button">Small Primary Button</button>
<button type="button" class="btn btn--small btn--primary-border" aria-label="Disabled Button" disabled>Disabled Primary Button</button>
<button type="button" class="btn btn--mid btn--fluid btn--primary-border" aria-label="Fluid Primary Button">Fluid
Button</button>