# Buttons

Bootstrap button styles, sizes, and states

##### Basic Button Styles

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>

##### Outline Buttons

    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>

##### Button Sizes

    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-primary">Default button</button>
    <button type="button" class="btn btn-primary btn-sm">Small button</button>

##### Button States

    <button type="button" class="btn btn-primary">Normal</button>
    <button type="button" class="btn btn-primary active">Active</button>
    <button type="button" class="btn btn-primary" disabled>Disabled</button>

    <!-- Loading button -->
    <button type="button" class="btn btn-primary">
        <span class="spinner-border spinner-border-sm me-2"></span>
        Loading...
    </button>

##### Button Groups

    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>

##### Icon Buttons

    <button type="button" class="btn btn-primary">
        <i class="bi bi-plus-lg me-2"></i>Add New
    </button>

    <!-- Icon only buttons -->
    <button type="button" class="btn btn-outline-primary">
        <i class="bi bi-download"></i>
    </button>