BUTTON SYSTEM: Complete reference for all button variants and states
VARIANTS: Solid | Outline | Link | Sizes | States | Layout
Buttons are the primary way users take actions in your application. Use semantic colors to convey intent (primary for main actions, danger for destructive actions, etc.).
Solid Buttons: High-emphasis buttons with colored backgrounds. Use for primary actions and important calls-to-action.
<button class="btn btn-primary">Primary</button>
A-One (btn-aone): Sky-blue brand CTA for ApplicaaOne consumer surfaces (e.g. "Quick Apply"). Uses the brand secondary (sky) ramp with white text; hover/active darken through secondary-600 → secondary-700.
Hierarchy: with primary + secondary present, emphasis order is primary → btn-aone → secondary. With no primary, btn-aone acts as the primary-level action — it encodes an ApplicaaOne action direction (e.g. partner "Quick Apply") vs. a generic primary (e.g. non-partner "Start Application") at the same hierarchy level.
Accessibility note: white on secondary-500 (#35A7E7) is 2.7:1, below the WCAG AA 4.5:1 minimum for normal text — an intentional brand exception. Contrast improves to ~3.9:1 → 5.6:1 on hover/active.
<button class="btn btn-aone">Quick Apply</button>
Action direction at equal hierarchy (result cards)
AOne partner school
Non-partner school
Outline Buttons: Lower-emphasis buttons with colored borders and transparent backgrounds. Use for secondary actions or when you need lighter visual weight.
<button class="btn btn-outline-primary">Primary</button>
Tertiary Buttons: Low-emphasis buttons with transparent background. Use for tertiary actions, supplementary options, or when you need minimal visual weight.
<button class="btn btn-tertiary">Tertiary Button</button>
Sizes: Three size options to match your UI density needs. Default size works for most cases.
<button class="btn btn-primary btn-lg">Large</button><button class="btn btn-primary btn-sm">Small</button>
Icon Buttons: Buttons with Font Awesome Pro v6 icons. Use icons to reinforce meaning and improve scannability. Icons inherit the button's text size and color automatically.
Icon + Text (Leading Icon)
Text + Icon (Trailing Icon)
Icon-Only Buttons
Icon Button Sizes
Icon + Text with Sizes
Common Icon Patterns
<button class="btn btn-primary"><i class="fa-solid fa-check"></i> Save</button><button class="btn btn-primary btn-icon" aria-label="Save"><i class="fa-solid fa-floppy-disk"></i></button>
Disabled Buttons: Use the disabled attribute to indicate buttons that cannot be interacted with. Disabled buttons have reduced opacity and no hover effects.
Disabled Solid Buttons
Disabled Outline Buttons
Disabled Tertiary Button
<button class="btn btn-primary" disabled>Disabled</button>
Block Buttons: Full-width buttons that span their container. Use for mobile interfaces, forms, or when you need a button to take up the entire available width.
<button class="btn btn-primary btn-block">Block button</button>
Heavy Buttons: Buttons with bold text for extra emphasis. Add .btn-heavy to any button variant when you need the text to stand out more.
Solid Heavy Buttons
Outline Heavy Buttons
Comparison: Normal vs Heavy
<button class="btn btn-primary btn-heavy">Heavy Button</button>
Multiline Buttons: Buttons with multiple text lines (2 lines optimal) to support extra context in constrained space. Add .btn-multiline to any button variant when you need to display in 2 lines.
Solid Multiline Buttons
Outline Multiline Buttons
Comparison: Normal vs Multiline
Comparison: Multiline in different sizes
<button class="btn btn-primary btn-multiline">Multiline<br>Button</button>
Real-world examples: Typical button combinations you'll use in forms, dialogs, and interfaces.
Form Actions (Primary + Secondary)
Destructive Action with Confirmation
Call to Action (CTA)
Multiple Actions
Button Groups: Group multiple buttons together with shared borders. Use for related actions or toggles like toolbar buttons or view switchers.
Horizontal Group
Solid Button Groups
Outline Button Groups
Vertical Group
Button Group Sizes
<div class="btn-group"><button class="btn btn-secondary">Left</button>...</div><div class="btn-group-vertical">...</div>
Dropdown Toggle: Buttons with dropdown arrows to indicate a menu or additional options. Add the .dropdown-toggle class to automatically display a dropdown arrow.
Solid Dropdowns
Outline Dropdowns
Dropdown Sizes
<button class="btn btn-primary dropdown-toggle">Dropdown</button>
Button-style Checkboxes/Radios: Form controls styled as buttons. Use hidden .btn-check inputs with <label> elements styled as buttons for accessible toggle controls.
Checkbox Buttons (Multiple Select)
Radio Buttons (Single Select)
Different Color Variants
<input type="checkbox" class="btn-check" id="check1"><label class="btn btn-primary" for="check1">Checkbox</label>
Pagination: Navigation component for paging through content. Use .pagination container with .page-item and .page-link classes.
Basic Pagination
With Disabled States
Pagination Sizes
Grouped Numbers
<ul class="pagination"><li class="page-item active"><a class="page-link">1</a></li></ul>
Variant: Softer link-blue treatment for marketing surfaces and secondary CTAs. Existing .btn-primary (navy #263C91) unchanged. Use this when you specifically want the link-blue tone.
<button class="btn btn-link">Default</button>
<button class="btn btn-outline-link">Default</button>
Quick Reference
Base: .btn
Solid: .btn-{primary|secondary|success|danger|warning|info}
Outline: .btn-outline-{primary|secondary|success|danger|warning|info}
Tertiary: .btn-tertiary
Sizes: .btn-sm (small) | default (no class) | .btn-lg (large)
Icons: .btn-icon (square icon-only button) | use <i class="fa-*"> for Font Awesome icons
Layout: .btn-block (full width) | .btn-heavy (bold text)
Groups: .btn-group (horizontal) | .btn-group-vertical | .btn-group-{sm|lg}
Dropdown: .dropdown-toggle (adds arrow indicator)
Checkbox/Radio: .btn-check (input) + .btn (label)
Pagination: .pagination > .page-item > .page-link | .page-item.active | .page-item.disabled
Pagination Sizes: .pagination-sm | .pagination-lg
State: disabled attribute (reduces opacity, disables interaction)
Usage: Combine classes like .btn.btn-primary.btn-lg or .btn.btn-outline-danger.btn-sm