Buttons


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

Reverse 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--reverse" aria-label="Huge Button">Huge Reverse Button</button>
<button type="button" class="btn btn--large btn--reverse" aria-label="Large Button">Large Reverse Button</button>
<button type="button" class="btn btn--mid btn--reverse" aria-label="Mid Button">Medium Reverse Button</button>
<button type="button" class="btn btn--small btn--reverse" aria-label="Small Button">Small Reverse Button</button>
<button type="button" class="btn btn--small btn--reverse" aria-label="Disabled Button" disabled>Disabled Reverse Button</button>
<button type="button" class="btn btn--mid btn--fluid btn--reverse" aria-label="Fluid Button">Fluid
Reverse Button</button>

Border Reverse Button











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