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