Buttons are essential UI elements used for user interactions like submitting forms, triggering actions, or navigating between pages.
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>
<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>