Button

AHA UI framwork includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Button Types

Large

Small

Primary

Secondary

Black Primary

Link Styled

Button Text Styled

General Text Link

Loader

HTML

<button type="button" class="btn btn-round btn-primary">Primary Button</button>
<button type="button" class="btn btn-sm btn-round btn-primary">Small Primary Button</button>
<button type="button" class="btn btn-round btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-sm btn-round btn-secondary">Small Secondary Button</button>
<button type="button" class="btn btn-round btn-black-primary">Black Primary Button</button>
<button type="button" class="btn btn-sm btn-round btn-black-primary">Black Primary Button</button>
<button type="button" class="btn btn-link">Link Style</button>
<button type="button" class="btn btn-sm btn-link-uline">Small Link Style</button>
<button type="button" class="btn btn-text">Text Style</button>
<button type="button" class="btn btn-sm btn-text">Small Text Style</button>
<button type="button" class="btn-text-link">General Text Link</button>
<button type="button" class="btn btn-round btn-primary aui-btn-spinner" disabled>Button</button>