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="tw-btn tw-btn-primary">Primary</button>
Outline Buttons: Lower-emphasis buttons with colored borders and transparent backgrounds. Use for secondary actions or when you need lighter visual weight.
<button class="tw-btn tw-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="tw-btn tw-btn-tertiary">Tertiary Button</button>
Sizes: Three size options to match your UI density needs. Default size works for most cases.
<button class="tw-btn tw-btn-primary tw-btn-lg">Large</button><button class="tw-btn tw-btn-primary tw-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="tw-btn tw-btn-primary"><i class="fa-solid fa-check"></i> Save</button><button class="tw-btn tw-btn-primary tw-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="tw-btn tw-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="tw-btn tw-btn-primary tw-btn-block">Block button</button>
Heavy Buttons: Buttons with bold text for extra emphasis. Add .tw-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="tw-btn tw-btn-primary tw-btn-heavy">Heavy Button</button>
Multiline Buttons: Buttons with multiple text lines (2 lines optimal) to support extra context in constrained space. Add .tw-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="tw-btn tw-btn-primary tw-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="tw-btn-group"><button class="tw-btn tw-btn-secondary">Left</button>...</div><div class="tw-btn-group-vertical">...</div>
Dropdown Toggle: Buttons with dropdown arrows to indicate a menu or additional options. Add the .tw-dropdown-toggle class to automatically display a dropdown arrow.
Solid Dropdowns
Outline Dropdowns
Dropdown Sizes
<button class="tw-btn tw-btn-primary tw-dropdown-toggle">Dropdown</button>
Button-style Checkboxes/Radios: Form controls styled as buttons. Use hidden .tw-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="tw-btn-check" id="check1"><label class="tw-btn tw-btn-primary" for="check1">Checkbox</label>
Pagination: Navigation component for paging through content. Use .tw-pagination container with .tw-page-item and .tw-page-link classes.
Basic Pagination
With Disabled States
Pagination Sizes
Grouped Numbers
<ul class="tw-pagination"><li class="tw-page-item tw-active"><a class="tw-page-link">1</a></li></ul>
Quick Reference
Base: .tw-btn
Solid: .tw-btn-{primary|secondary|success|danger|warning|info}
Outline: .tw-btn-outline-{primary|secondary|success|danger|warning|info}
Tertiary: .tw-btn-tertiary
Sizes: .tw-btn-sm (small) | default (no class) | .tw-btn-lg (large)
Icons: .tw-btn-icon (square icon-only button) | use <i class="fa-*"> for Font Awesome icons
Layout: .tw-btn-block (full width) | .tw-btn-heavy (bold text)
Groups: .tw-btn-group (horizontal) | .tw-btn-group-vertical | .tw-btn-group-{sm|lg}
Dropdown: .tw-dropdown-toggle (adds arrow indicator)
Checkbox/Radio: .tw-btn-check (input) + .tw-btn (label)
Pagination: .tw-pagination > .tw-page-item > .tw-page-link | .tw-page-item.tw-active | .tw-page-item.tw-disabled
Pagination Sizes: .tw-pagination-sm | .tw-pagination-lg
State: disabled attribute (reduces opacity, disables interaction)
Usage: Combine classes like .tw-btn.tw-btn-primary.tw-btn-lg or .tw-btn.tw-btn-outline-danger.tw-btn-sm