<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Header / Introduction --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>BUTTON SYSTEM:</strong> Complete reference for all button variants and states<br> <strong>VARIANTS:</strong> Solid | Outline | Link | Sizes | States | Layout </p> <p class="tw:mb-0 tw:text-sm"> 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.). </p> </div> <!-- Section 1: Solid Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Solid Buttons</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Solid Buttons:</strong> High-emphasis buttons with colored backgrounds. Use for primary actions and important calls-to-action. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary" type="button">Primary</button> <button class="btn btn-secondary" type="button">Secondary</button> <button class="btn btn-success" type="button">Success</button> <button class="btn btn-danger" type="button">Danger</button> <button class="btn btn-warning" type="button">Warning</button> <button class="btn btn-info" type="button">Info</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-primary"&gt;Primary&lt;/button&gt;</code> </div> </div> <!-- Section 1b: A-One CTA Button --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">A-One CTA Button</h2> <div class="callout tw:mb-4"> <p class="tw:mb-1 tw:text-sm"> <strong>A-One (<code>btn-aone</code>):</strong> 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 <code>secondary-600</code> → <code>secondary-700</code>. </p> <p class="tw:mb-1 tw:text-sm"> <strong>Hierarchy:</strong> with primary + secondary present, emphasis order is <code>primary</code> → <code>btn-aone</code> → <code>secondary</code>. With no primary, <code>btn-aone</code> acts as the primary-level action — it encodes an ApplicaaOne action <em>direction</em> (e.g. partner "Quick Apply") vs. a generic primary (e.g. non-partner "Start Application") at the same hierarchy level. </p> <p class="tw:mb-0 tw:text-sm"> <strong>Accessibility note:</strong> white on <code>secondary-500</code> (#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. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3 tw:items-center"> <button class="btn btn-aone" type="button">Quick Apply</button> <button class="btn btn-aone" type="button"><i class="fa-regular fa-paper-plane"></i> Start application</button> <button class="btn btn-aone" type="button" disabled>Quick Apply</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-aone"&gt;Quick Apply&lt;/button&gt;</code> </div> <!-- Action-direction example: partner vs non-partner card CTAs at equal hierarchy --> <p class="tw:text-sm tw:font-semibold tw:mt-6 tw:mb-3">Action direction at equal hierarchy (result cards)</p> <div class="tw:flex tw:flex-wrap tw:gap-6"> <div class="card tw:max-w-xs"> <div class="card-body"> <p class="small text-muted tw:mb-1">AOne partner school</p> <h3 class="h5 tw:mb-3">Northgate Academy</h3> <button class="btn btn-aone btn-block" type="button">Quick Apply</button> </div> </div> <div class="card tw:max-w-xs"> <div class="card-body"> <p class="small text-muted tw:mb-1">Non-partner school</p> <h3 class="h5 tw:mb-3">Riverside College</h3> <button class="btn btn-primary btn-block" type="button">Start Application</button> </div> </div> </div> </div> <!-- Section 2: Outline Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Outline Buttons</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Outline Buttons:</strong> Lower-emphasis buttons with colored borders and transparent backgrounds. Use for secondary actions or when you need lighter visual weight. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-outline-primary" type="button">Primary</button> <button class="btn btn-outline-secondary" type="button">Secondary</button> <button class="btn btn-outline-success" type="button">Success</button> <button class="btn btn-outline-danger" type="button">Danger</button> <button class="btn btn-outline-warning" type="button">Warning</button> <button class="btn btn-outline-info" type="button">Info</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-outline-primary"&gt;Primary&lt;/button&gt;</code> </div> </div> <!-- Section 3: Tertiary Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Tertiary Buttons</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Tertiary Buttons:</strong> Low-emphasis buttons with transparent background. Use for tertiary actions, supplementary options, or when you need minimal visual weight. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-tertiary" type="button">Tertiary Button</button> <button class="btn btn-tertiary" type="button">Another Option</button> <button class="btn btn-tertiary" type="button">Learn More</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-tertiary"&gt;Tertiary Button&lt;/button&gt;</code> </div> </div> <!-- Section 4: Button Sizes --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Button Sizes</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Sizes:</strong> Three size options to match your UI density needs. Default size works for most cases. </p> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="btn btn-primary btn-lg" type="button">Large button</button> <button class="btn btn-primary" type="button">Default button</button> <button class="btn btn-primary btn-sm" type="button">Small button</button> </div> <div class="tw:mt-4"> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="btn btn-outline-secondary btn-lg" type="button">Large outline</button> <button class="btn btn-outline-secondary" type="button">Default outline</button> <button class="btn btn-outline-secondary btn-sm" type="button">Small outline</button> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-primary btn-lg"&gt;Large&lt;/button&gt;</code><br> <code>&lt;button class="btn btn-primary btn-sm"&gt;Small&lt;/button&gt;</code> </div> </div> <!-- Section 5: Icon Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Icon Buttons</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Icon Buttons:</strong> 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. </p> </div> <div class="tw:space-y-6"> <!-- Icon + Text --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Icon + Text (Leading Icon)</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary" type="button"><i class="fa-solid fa-floppy-disk"></i> Save</button> <button class="btn btn-secondary" type="button"><i class="fa-solid fa-xmark"></i> Cancel</button> <button class="btn btn-success" type="button"><i class="fa-solid fa-check"></i> Confirm</button> <button class="btn btn-danger" type="button"><i class="fa-solid fa-trash"></i> Delete</button> </div> </div> <!-- Text + Icon (Trailing) --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Text + Icon (Trailing Icon)</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary" type="button">Next <i class="fa-solid fa-arrow-right"></i></button> <button class="btn btn-secondary" type="button">Download <i class="fa-solid fa-download"></i></button> <button class="btn btn-outline-primary" type="button">View Details <i class="fa-solid fa-chevron-right"></i></button> </div> </div> <!-- Icon-Only Buttons --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Icon-Only Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary btn-icon" type="button" aria-label="Save"><i class="fa-solid fa-floppy-disk"></i></button> <button class="btn btn-secondary btn-icon" type="button" aria-label="Settings"><i class="fa-solid fa-gear"></i></button> <button class="btn btn-success btn-icon" type="button" aria-label="Add"><i class="fa-solid fa-plus"></i></button> <button class="btn btn-danger btn-icon" type="button" aria-label="Delete"><i class="fa-solid fa-trash"></i></button> <button class="btn btn-outline-primary btn-icon" type="button" aria-label="Edit"><i class="fa-solid fa-pen"></i></button> <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="More options"><i class="fa-solid fa-ellipsis-vertical"></i></button> </div> </div> <!-- Icon Button Sizes --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Icon Button Sizes</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="btn btn-primary btn-icon btn-lg" type="button" aria-label="Large edit"><i class="fa-solid fa-pen"></i></button> <button class="btn btn-primary btn-icon" type="button" aria-label="Default edit"><i class="fa-solid fa-pen"></i></button> <button class="btn btn-primary btn-icon btn-sm" type="button" aria-label="Small edit"><i class="fa-solid fa-pen"></i></button> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:mt-3"> <button class="btn btn-outline-secondary btn-icon btn-lg" type="button" aria-label="Large settings"><i class="fa-solid fa-gear"></i></button> <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Default settings"><i class="fa-solid fa-gear"></i></button> <button class="btn btn-outline-secondary btn-icon btn-sm" type="button" aria-label="Small settings"><i class="fa-solid fa-gear"></i></button> </div> </div> <!-- Icon Buttons with Text Sizes --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Icon + Text with Sizes</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="btn btn-primary btn-lg" type="button"><i class="fa-solid fa-floppy-disk"></i> Save Changes</button> <button class="btn btn-primary" type="button"><i class="fa-solid fa-floppy-disk"></i> Save Changes</button> <button class="btn btn-primary btn-sm" type="button"><i class="fa-solid fa-floppy-disk"></i> Save</button> </div> </div> <!-- Common Icon Actions --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Common Icon Patterns</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary" type="button"><i class="fa-solid fa-plus"></i> Add New</button> <button class="btn btn-secondary" type="button"><i class="fa-solid fa-filter"></i> Filter</button> <button class="btn btn-outline-primary" type="button"><i class="fa-solid fa-magnifying-glass"></i> Search</button> <button class="btn btn-outline-secondary" type="button"><i class="fa-solid fa-arrow-up-from-bracket"></i> Export</button> <button class="btn btn-tertiary" type="button"><i class="fa-solid fa-rotate"></i> Refresh</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-primary"&gt;&lt;i class="fa-solid fa-check"&gt;&lt;/i&gt; Save&lt;/button&gt;</code><br> <code>&lt;button class="btn btn-primary btn-icon" aria-label="Save"&gt;&lt;i class="fa-solid fa-floppy-disk"&gt;&lt;/i&gt;&lt;/button&gt;</code> </div> </div> <!-- Section 6: Disabled State --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Disabled State</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Disabled Buttons:</strong> Use the <code>disabled</code> attribute to indicate buttons that cannot be interacted with. Disabled buttons have reduced opacity and no hover effects. </p> </div> <div class="tw:space-y-4"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">Disabled Solid Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary" type="button" disabled>Primary</button> <button class="btn btn-secondary" type="button" disabled>Secondary</button> <button class="btn btn-success" type="button" disabled>Success</button> <button class="btn btn-danger" type="button" disabled>Danger</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">Disabled Outline Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-outline-primary" type="button" disabled>Primary</button> <button class="btn btn-outline-secondary" type="button" disabled>Secondary</button> <button class="btn btn-outline-success" type="button" disabled>Success</button> <button class="btn btn-outline-danger" type="button" disabled>Danger</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">Disabled Tertiary Button</p> <button class="btn btn-tertiary" type="button" disabled>Disabled Tertiary</button> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-primary" disabled&gt;Disabled&lt;/button&gt;</code> </div> </div> <!-- Section 6: Block Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Block Buttons (Full Width)</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Block Buttons:</strong> 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. </p> </div> <div class="tw:space-y-3 tw:max-w-md"> <button class="btn btn-primary btn-block" type="button">Block level button</button> <button class="btn btn-secondary btn-block" type="button">Another block button</button> <button class="btn btn-outline-primary btn-block" type="button">Block outline button</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-primary btn-block"&gt;Block button&lt;/button&gt;</code> </div> </div> <!-- Section: Heavy Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Heavy Buttons (Bold Text)</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Heavy Buttons:</strong> Buttons with bold text for extra emphasis. Add <code>.btn-heavy</code> to any button variant when you need the text to stand out more. </p> </div> <div class="tw:space-y-4"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Solid Heavy Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary btn-heavy" type="button">Primary Heavy</button> <button class="btn btn-secondary btn-heavy" type="button">Secondary Heavy</button> <button class="btn btn-success btn-heavy" type="button">Success Heavy</button> <button class="btn btn-danger btn-heavy" type="button">Danger Heavy</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Outline Heavy Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-outline-primary btn-heavy" type="button">Primary Heavy</button> <button class="btn btn-outline-secondary btn-heavy" type="button">Secondary Heavy</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Comparison: Normal vs Heavy</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="btn btn-primary" type="button">Normal Button</button> <button class="btn btn-primary btn-heavy" type="button">Heavy Button</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-primary btn-heavy"&gt;Heavy Button&lt;/button&gt;</code> </div> </div> <!-- Section: Multiline Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Multiline Buttons (Edge cases)</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Multiline Buttons:</strong> Buttons with multiple text lines (2 lines optimal) to support extra context in constrained space. Add <code>.btn-multiline</code> to any button variant when you need to display in 2 lines. </p> </div> <div class="tw:space-y-4"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Solid Multiline Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary btn-multiline" type="button">Support &<br>Feature Requests</button> <button class="btn btn-secondary btn-multiline" type="button">Support &<br>Feature Requests</button> <button class="btn btn-success btn-multiline" type="button">Support &<br>Feature Requests</button> <button class="btn btn-danger btn-multiline" type="button">Support &<br>Feature Requests</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Outline Multiline Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-outline-primary btn-multiline" type="button">Support &<br>Feature Requests</button> <button class="btn btn-outline-secondary btn-multiline" type="button">Support &<br>Feature Requests</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Comparison: Normal vs Multiline</p> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Comparison: Multiline in different sizes</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:mb-3"> <button class="btn btn-primary btn-multiline btn-sm" type="button">Support &<br>Feature Requests</button> <button class="btn btn-primary btn-sm" type="button">Small Button</button> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:mb-3"> <button class="btn btn-primary btn-multiline" type="button">Support &<br>Feature Requests</button> <button class="btn btn-primary" type="button">Normal Button</button> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="btn btn-primary btn-multiline btn-lg" type="button">Support &<br>Feature Requests</button> <button class="btn btn-primary btn-lg" type="button">Large Button</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-primary btn-multiline"&gt;Multiline&lt;br&gt;Button&lt;/button&gt;</code> </div> </div> <!-- Section 7: Usage Examples --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Common Usage Patterns</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Real-world examples:</strong> Typical button combinations you'll use in forms, dialogs, and interfaces. </p> </div> <div class="tw:space-y-6"> <!-- Form Actions --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Form Actions (Primary + Secondary)</p> <div class="tw:flex tw:gap-2"> <button class="btn btn-primary" type="submit">Save Changes</button> <button class="btn btn-secondary" type="button">Cancel</button> </div> </div> <!-- Destructive Action --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Destructive Action with Confirmation</p> <div class="tw:flex tw:gap-2"> <button class="btn btn-danger" type="button">Delete Account</button> <button class="btn btn-secondary" type="button">Nevermind</button> </div> </div> <!-- Call to Action --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Call to Action (CTA)</p> <div class="tw:flex tw:gap-2"> <button class="btn btn-success btn-lg" type="button">Get Started</button> <button class="btn btn-tertiary" type="button">Learn More</button> </div> </div> <!-- Multiple Actions --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Multiple Actions</p> <div class="tw:flex tw:flex-wrap tw:gap-2"> <button class="btn btn-primary" type="button">Approve</button> <button class="btn btn-warning" type="button">Flag for Review</button> <button class="btn btn-outline-danger" type="button">Reject</button> <button class="btn btn-tertiary" type="button">View Details</button> </div> </div> </div> </div> <!-- Section 8: Button Groups --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Button Groups</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Button Groups:</strong> Group multiple buttons together with shared borders. Use for related actions or toggles like toolbar buttons or view switchers. </p> </div> <div class="tw:space-y-6"> <!-- Horizontal Button Group --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Horizontal Group</p> <div class="btn-group"> <button class="btn btn-secondary" type="button">Left</button> <button class="btn btn-secondary" type="button">Middle</button> <button class="btn btn-secondary" type="button">Right</button> </div> </div> <!-- Solid Color Groups --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Solid Button Groups</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div class="btn-group"> <button class="btn btn-primary" type="button">1</button> <button class="btn btn-primary" type="button">2</button> <button class="btn btn-primary" type="button">3</button> <button class="btn btn-primary" type="button">4</button> </div> <div class="btn-group"> <button class="btn btn-success" type="button">5</button> <button class="btn btn-success" type="button">6</button> <button class="btn btn-success" type="button">7</button> </div> <div class="btn-group"> <button class="btn btn-danger" type="button">8</button> </div> </div> </div> <!-- Outline Groups --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Outline Button Groups</p> <div class="btn-group"> <button class="btn btn-outline-primary" type="button">Left</button> <button class="btn btn-outline-primary" type="button">Middle</button> <button class="btn btn-outline-primary" type="button">Right</button> </div> </div> <!-- Vertical Button Group --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Vertical Group</p> <div class="btn-group-vertical"> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> </div> </div> <!-- Button Group Sizes --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Button Group Sizes</p> <div class="tw:flex tw:flex-col tw:gap-3"> <div class="btn-group-lg"> <button class="btn btn-secondary" type="button">Large</button> <button class="btn btn-secondary" type="button">Group</button> <button class="btn btn-secondary" type="button">Buttons</button> </div> <div class="btn-group"> <button class="btn btn-secondary" type="button">Default</button> <button class="btn btn-secondary" type="button">Group</button> <button class="btn btn-secondary" type="button">Buttons</button> </div> <div class="btn-group-sm"> <button class="btn btn-secondary" type="button">Small</button> <button class="btn btn-secondary" type="button">Group</button> <button class="btn btn-secondary" type="button">Buttons</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="btn-group"&gt;&lt;button class="btn btn-secondary"&gt;Left&lt;/button&gt;...&lt;/div&gt;</code><br> <code>&lt;div class="btn-group-vertical"&gt;...&lt;/div&gt;</code> </div> </div> <!-- Section 9: Dropdown Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Dropdown Buttons</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Dropdown Toggle:</strong> Buttons with dropdown arrows to indicate a menu or additional options. Add the <code>.dropdown-toggle</code> class to automatically display a dropdown arrow. </p> </div> <div class="tw:space-y-4"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Solid Dropdowns</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary dropdown-toggle" type="button">Primary</button> <button class="btn btn-success dropdown-toggle" type="button">Success</button> <button class="btn btn-info dropdown-toggle" type="button">Info</button> <button class="btn btn-danger dropdown-toggle" type="button">Danger</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Outline Dropdowns</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-outline-primary dropdown-toggle" type="button">Primary</button> <button class="btn btn-outline-secondary dropdown-toggle" type="button">Secondary</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Dropdown Sizes</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="btn btn-primary btn-lg dropdown-toggle" type="button">Large</button> <button class="btn btn-primary dropdown-toggle" type="button">Default</button> <button class="btn btn-primary btn-sm dropdown-toggle" type="button">Small</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-primary dropdown-toggle"&gt;Dropdown&lt;/button&gt;</code> </div> </div> <!-- Section 10: Checkbox & Radio Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Checkbox & Radio Button Groups</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Button-style Checkboxes/Radios:</strong> Form controls styled as buttons. Use hidden <code>.btn-check</code> inputs with <code>&lt;label&gt;</code> elements styled as buttons for accessible toggle controls. </p> </div> <div class="tw:space-y-6"> <!-- Checkbox Buttons --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Checkbox Buttons (Multiple Select)</p> <div class="btn-group"> <input type="checkbox" class="btn-check" id="checkbox1" autocomplete="off"> <label class="btn btn-primary" for="checkbox1">Checkbox 1</label> <input type="checkbox" class="btn-check" id="checkbox2" autocomplete="off" checked> <label class="btn btn-primary" for="checkbox2">Checkbox 2</label> <input type="checkbox" class="btn-check" id="checkbox3" autocomplete="off"> <label class="btn btn-primary" for="checkbox3">Checkbox 3</label> </div> </div> <!-- Radio Buttons --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Radio Buttons (Single Select)</p> <div class="btn-group"> <input type="radio" class="btn-check" name="options" id="radio1" autocomplete="off" checked> <label class="btn btn-secondary" for="radio1">Radio 1</label> <input type="radio" class="btn-check" name="options" id="radio2" autocomplete="off"> <label class="btn btn-secondary" for="radio2">Radio 2</label> <input type="radio" class="btn-check" name="options" id="radio3" autocomplete="off"> <label class="btn btn-secondary" for="radio3">Radio 3</label> </div> </div> <!-- Color Variants --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Different Color Variants</p> <div class="tw:space-y-3"> <div class="btn-group"> <input type="checkbox" class="btn-check" id="check-success1" autocomplete="off" checked> <label class="btn btn-success" for="check-success1">Success 1</label> <input type="checkbox" class="btn-check" id="check-success2" autocomplete="off"> <label class="btn btn-success" for="check-success2">Success 2</label> </div> <div class="btn-group"> <input type="checkbox" class="btn-check" id="check-danger1" autocomplete="off"> <label class="btn btn-danger" for="check-danger1">Danger 1</label> <input type="checkbox" class="btn-check" id="check-danger2" autocomplete="off" checked> <label class="btn btn-danger" for="check-danger2">Danger 2</label> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;input type="checkbox" class="btn-check" id="check1"&gt;</code><br> <code>&lt;label class="btn btn-primary" for="check1"&gt;Checkbox&lt;/label&gt;</code> </div> </div> <!-- Section 11: Pagination --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Pagination</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Pagination:</strong> Navigation component for paging through content. Use <code>.pagination</code> container with <code>.page-item</code> and <code>.page-link</code> classes. </p> </div> <div class="tw:space-y-6"> <!-- Basic Pagination --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Basic Pagination</p> <nav aria-label="Page navigation"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> </div> <!-- With Disabled States --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">With Disabled States</p> <nav aria-label="Page navigation"> <ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">6</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"><a class="page-link" href="#">8</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> </div> <!-- Pagination Sizes --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Pagination Sizes</p> <div class="tw:space-y-3"> <nav aria-label="Large pagination"> <ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item active"><a class="page-link" href="#">3</a></li> </ul> </nav> <nav aria-label="Default pagination"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item active"><a class="page-link" href="#">3</a></li> </ul> </nav> <nav aria-label="Small pagination"> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item active"><a class="page-link" href="#">3</a></li> </ul> </nav> </div> </div> <!-- Grouped Pagination (like screenshot) --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Grouped Numbers</p> <div class="tw:flex tw:gap-3"> <nav aria-label="Group 1"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item active"><a class="page-link" href="#">4</a></li> </ul> </nav> <nav aria-label="Group 2"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">6</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> </ul> </nav> <nav aria-label="Group 3"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">8</a></li> </ul> </nav> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;ul class="pagination"&gt;&lt;li class="page-item active"&gt;&lt;a class="page-link"&gt;1&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;</code> </div> </div> <!-- Round 2: Link variants --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Link variant (.btn-link)</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Variant:</strong> Softer link-blue treatment for marketing surfaces and secondary CTAs. Existing <code>.btn-primary</code> (navy <code>#263C91</code>) unchanged. Use this when you specifically want the link-blue tone. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3 tw:mb-2"> <button class="btn btn-link" type="button">Default</button> <button class="btn btn-link" type="button" disabled>Disabled</button> </div> <div class="tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-link"&gt;Default&lt;/button&gt;</code> </div> <div class="tw:mt-6"> <h3 class="h6 tw:mb-3">Outline variant</h3> <div class="tw:flex tw:flex-wrap tw:gap-3 tw:mb-2"> <button class="btn btn-outline-link" type="button">Default</button> <button class="btn btn-outline-link" type="button" disabled>Disabled</button> </div> <div class="tw:text-sm tw:text-gray-600"> <code>&lt;button class="btn btn-outline-link"&gt;Default&lt;/button&gt;</code> </div> </div> </div> <!-- Quick Reference Footer --> <div class="tw:border-t tw:pt-6 tw:mt-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p> <p class="tw:mb-0 tw:text-xs tw:font-mono"> <strong>Base:</strong> .btn<br> <strong>Solid:</strong> .btn-{primary|secondary|success|danger|warning|info}<br> <strong>Outline:</strong> .btn-outline-{primary|secondary|success|danger|warning|info}<br> <strong>Tertiary:</strong> .btn-tertiary<br> <strong>Sizes:</strong> .btn-sm (small) | default (no class) | .btn-lg (large)<br> <strong>Icons:</strong> .btn-icon (square icon-only button) | use &lt;i class="fa-*"&gt; for Font Awesome icons<br> <strong>Layout:</strong> .btn-block (full width) | .btn-heavy (bold text)<br> <strong>Groups:</strong> .btn-group (horizontal) | .btn-group-vertical | .btn-group-{sm|lg}<br> <strong>Dropdown:</strong> .dropdown-toggle (adds arrow indicator)<br> <strong>Checkbox/Radio:</strong> .btn-check (input) + .btn (label)<br> <strong>Pagination:</strong> .pagination > .page-item > .page-link | .page-item.active | .page-item.disabled<br> <strong>Pagination Sizes:</strong> .pagination-sm | .pagination-lg<br> <strong>State:</strong> disabled attribute (reduces opacity, disables interaction)<br> <strong>Usage:</strong> Combine classes like .btn.btn-primary.btn-lg or .btn.btn-outline-danger.btn-sm </p> </div> </div> </div>