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

Sizes

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 Button</button>
<button type="button" class="btn btn--huge btn--primary-border" aria-label="Huge Button">Huge Button</button>
<button type="button" class="btn btn--huge btn--secondary" aria-label="Huge Button">Huge Button</button>
<button type="button" class="btn btn--huge btn--secondary-border" aria-label="Huge Button">Huge Button</button>
<button type="button" class="btn btn--huge btn--reverse" aria-label="Huge Button">Huge Button</button>
<button type="button" class="btn btn--huge btn--reverse-border" aria-label="Huge Button">Huge Button</button>

<button type="button" class="btn btn--large btn--primary" aria-label="Large Button">Large Button</button>
<button type="button" class="btn btn--large btn--primary-border" aria-label="Large Button">Large Button</button>
<button type="button" class="btn btn--large btn--secondary" aria-label="Large Button">Large Button</button>
<button type="button" class="btn btn--large btn--secondary-border" aria-label="Large Button">Large Button</button>
<button type="button" class="btn btn--large btn--reverse" aria-label="Huge Button">Huge Button</button>
<button type="button" class="btn btn--large btn--reverse-border" aria-label="Huge Button">Huge Button</button>

<button type="button" class="btn btn--mid btn--primary" aria-label="Medium Button">Medium Button</button>
<button type="button" class="btn btn--mid btn--primary-border" aria-label="Medium Button">Medium Button</button>
<button type="button" class="btn btn--mid btn--secondary" aria-label="Medium Button">Medium Button</button>
<button type="button" class="btn btn--mid btn--secondary-border" aria-label="Medium Button">Medium Button</button>
<button type="button" class="btn btn--mid btn--reverse" aria-label="Medium Button">Medium Button</button>
<button type="button" class="btn btn--mid btn--reverse-border" aria-label="Medium Button">Medium Button</button>

<button type="button" class="btn btn--small btn--primary" aria-label="Small Button">Small Button</button>
<button type="button" class="btn btn--small btn--primary-border" aria-label="Small Button">Small Button</button>
<button type="button" class="btn btn--small btn--secondary" aria-label="Small Button">Small Button</button>
<button type="button" class="btn btn--small btn--secondary-border" aria-label="Small Button">Small Button</button>
<button type="button" class="btn btn--small btn--reverse" aria-label="Small Button">Small Button</button>
<button type="button" class="btn btn--small btn--reverse-border" aria-label="Small Button">Small Button</button>

Fluid buttons

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

<button type="button" class="btn btn--huge btn--fluid btn--primary" aria-label="Fluid Button">Fluid Button</button>
<button type="button" class="btn btn--huge btn--fluid btn--primary-border" aria-label="Fluid Button">Fluid Button</button>
<button type="button" class="btn btn--large btn--fluid btn--secondary" aria-label="Fluid Button">Fluid Button</button>
<button type="button" class="btn btn--large btn--fluid btn--secondary-border" aria-label="Fluid Button">Fluid Button</button>
<button type="button" class="btn btn--small btn--fluid btn--reverse" aria-label="Fluid Button">Fluid Button</button>
<button type="button" class="btn btn--fluid btn--reverse-border" aria-label="Fluid Button">Fluid Button</button>