> For the complete documentation index, see [llms.txt](https://lorvent.gitbook.io/rare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lorvent.gitbook.io/rare/html/main-content/buttons.md).

# Buttons

There are 13 variants of buttons based on the colors used in this template, we can change the color of the button just by replacing `btn-primary`with `btn-secondary , btn-info, btn-success, btn-warning, btn-danger,btn-purple,btn-mint`.

Since this template is based on Bootstrap4`btn-default`is depricated and `btn-secondary`is brought into act.

These buttons are implemented in the page [buttons.html](http://new-admin.lorvent.in/buttons.html) of this template.

**1) Basic Buttons:**

![](/files/-M4TuVJ9B_sASvD2eqQ1)

It has the following Structure:

```
<button type="button" class="btn btn-primary btn_width m-t-10 m-r-10">Primary</button>
```

**2) Squared Buttons:**

![](/files/-M4TuVJBQ7x0ph_cvQnq)

It has the following Structure

```
<button type="button" class="btn btn-primary btn_width m-t-10 m-r-10 rounded-0">Primary</button>
```

**3) Rounded Buttons:**

![](/files/-M4TuVJDWJmuqtj6cgtl)

It has the following Structure

```
<button type="button" class="btn btn-primary btn_width m-t-10 m-r-10 btn_rounded">Primary</button>
```

**4) Basic outline Buttons:**

![](/files/-M4TuVJFPhGO6yLRAccM)

It has the following Structure

```
<button type="button" class="btn btn-outline-primary btn_width m-t-10 m-r-10">Primary</button>
```

**5) Squared outline Buttons:**

![](/files/-M4TuVJMxr52rte7IL5C)

It has the following Structure

```
<button type="button" class="btn btn-outline-primary btn_width m-t-10 m-r-10 rounded-0">Primary</button>
```

**6) Rounded Outline Buttons:**

![](/files/-M4TuVJQkMKNd_5nnRdg)

It has the following Structure

```
<button type="button" class="btn btn-outline-primary btn_width btn_rounded m-t-10 m-r-10">Primary</button>
```

**7) Dropdown Buttons :**

![](/files/-M4TuVJShYxJVcYWUUpP)

It has the following Structure

```
<div class="btn-group m-t-10 m-r-10">
     <button type="button" class="btn btn-primary dropdown-toggle btn_width" id="about-us1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">......</button>
             <div class="dropdown-menu" aria-labelledby="about-us1">
                  <a class="dropdown-item" href="#">.....</a>
                  <a class="dropdown-item" href="#">.....</a>
                  <a class="dropdown-item" href="#">.....</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">.....</a>
             </div>
</div>
```

**8) Dropup Buttons:**

![](/files/-M4TuVJUn_dYUk-DyHS8)

It has the following Structure

```
<div class="btn-group dropup m-t-10 m-r-10">
    <button type="button" class="btn btn-primary dropdown-toggle btn_width" id="about-us10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">.........</button>
            <div class="dropdown-menu" aria-labelledby="about-us10">
                 <a class="dropdown-item" href="#">.....</a>
                 <a class="dropdown-item" href="#">.....</a>
                 <a class="dropdown-item" href="#">.....</a>
            <div class="dropdown-divider"></div>
                 <a class="dropdown-item" href="#">.....</a>
            </div>
</div>
```

**9) Buttons with Icons:**

![](/files/-M4TuVJW42Pcy9pISj5O)

There are basically four types of buttons with icons implemented .

you can learn more about the Buttons with Icons in the page [buttons.html](http://new-admin.lorvent.in/buttons.html) of this template.

It has the following Structure

```
<button type="button" class="btn btn-primary btn_lg_width m-t-10 m-r-10">
        <i class="ti-user"></i> ......
</button>
```

**10) Split Buttons:**

![](/files/-M4TuVJYbq24GyI5th4v)

It has the following Structure

```
<div class="btn-group m-t-10 m-r-10">
        <button type="button" class="btn btn-outline-primary rounded-0">Primary</button>
                <button type="button" class="btn btn-outline-primary rounded-0">
                                <i class="ti-user"></i>
                </button>
</div>
```

**11) Vertical Buttons:**

![](/files/-M4TuVJ_i2M5shbnE7FK)

It has the following Structure

```
<div class="btn-group-vertical m-t-10">
           <button type="button" class="btn btn-primary">Primary</button>
           <button type="button" class="btn btn-success">Success</button>
           <button type="button" class="btn btn-warning">Warning</button>
           <button type="button" class="btn btn-danger">Danger</button>
           <button type="button" class="btn btn-info">Info</button>
           <button type="button" class="btn btn-purple">Purple</button>
           <button type="button" class="btn btn-mint">Mint</button>
</div>
```

**12) Icons Buttons:**

There are two variants of Icon buttons implemented in this template.

![](/files/-M4TuVJbUj7ktgUOPlGW)

It has the following Structure:

```
 <button type="button" class="btn btn-primary m-t-10 m-r-10
         <i class="ti-user"></i>
 </button>
```

**13) Social Buttons:**

![](/files/-M4TuVJd_eV8b1imPbgy)

It has the following Structure

```
<a class="btn btn-block btn-social btn-vimeo">
         <i class="ti-vimeo"></i>
                Sign in with Vimeo
</a>
```