#### Default Buttons

`

    <button type="button" class="btn btn-primary mt-2">Primary</button>

`

#### Default Buttons Rounded Shape

`

    <button type="button" class="btn btn-primary rounded-pill mt-2">Primary</button>

`

#### Outline Buttons

`

    <button type="button" class="btn btn-outline-primary mt-2">Primary</button>

`

#### Rounded Outline Buttons

`

    <button type="button" class="btn btn-outline-primary rounded-pill mt-2">Primary</button>

`

#### Default Buttons

`

    <button type="button" class="mt-2 btn btn-primary btn-with-icon"><i class="ri-bill-fill"></i>Primary</button>

`

#### Default Buttons Rounded Shape

`

    <button type="button" class="mt-2 btn btn-primary rounded-pill btn-with-icon"><i class="ri-bill-fill"></i>Primary</button>

`

#### Outline Buttons

`

    <button type="button" class="btn btn-outline-primary mt-2 btn-with-icon"><i class="ri-heart-line"></i>Primary</button>

`

#### Rounded Outline Buttons

`

    <button type="button" class="btn btn-outline-primary rounded-pill mt-2 btn-with-icon"><i class="ri-heart-line"></i>Primary</button>

`

#### Button Tags

`

    <a class="mt-2 btn btn-primary" href="#" role="button">Link</a>
    <button class="mt-2 btn btn-success" type="submit">Button</button>
    <input class="mt-2 btn btn-danger" type="button" value="Input">
    <input class="mt-2 btn btn-warning" type="submit" value="Submit">
    <input class="mt-2 btn btn-info" type="reset" value="Reset">

`
Link

#### Buttons Sizes

`

    <button type="button" class="btn btn-primary btn-sm mr-2">Small Button</button>
    <button type="button" class="btn btn-success mr-2">Button</button>
    <button type="button" class="btn btn-info btn-lg">Large Button</button>

`

#### Block Buttons

`

    <button type="button" class="btn btn-primary btn-block">Block level button</button>

`

#### Icons Buttons

`

    <button type="button" class="btn btn-primary mt-2"><i class="ri-heart-fill pr-0"></i></button>
    <button type="button" class="btn btn-primary mt-2 btn-with-icon"><i class="ri-heart-fill"></i>Buttons</button>

`

#### Social Disabled State

`

    <button type="button" class="mt-2 btn btn-primary" disabled>Primary button</button>

`

#### Buttons Toggle States

`

    <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" >
    Single toggle
    </button>

`

#### Default Buttons Active

`

    <button type="button" class="btn btn-primary active mt-2">Active</button>
    <button type="button" class="btn btn-secondary active mt-2">Active</button>
    <button type="button" class="btn btn-warning active mt-2">Active</button>
    <button type="button" class="btn btn-accent disabled mt-2" disabled="">Disabled</button>
    <button type="button" class="btn btn-primary disabled mt-2" disabled="">Disabled</button>
    <button type="button" class="btn btn-outline-primary disabled mt-2" disabled="">Disabled</button>

`

#### Button Group Sizing

`

    <button type="button" class="btn btn-primary mt-2">Left</button>

`

#### Button Group

`

    <div class="btn-group" role="group" aria-label="Basic example">
       <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>

`

#### Button Dropdown

`

    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
       <button type="button" class="btn btn-primary">1</button>
       <button type="button" class="btn btn-primary">2</button>
       <div class="btn-group" role="group">
          <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
             aria-haspopup="true" aria-expanded="false">
             Dropdown
          </button>
          <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
             <a class="dropdown-item" href="#">Dropdown link</a>
             <a class="dropdown-item" href="#">Dropdown link</a>
          </div>
       </div>
    </div>

`