| Primary |
btn btn-primary |
<button class="btn btn-primary" ></button>
<a class="btn btn-primary"></a>
<button class="btn btn-default" ></button>
<a class="btn btn-default"></a>
|
Primary button
Default button |
Main Buttons
([button] Medium)Main buttons, used on top of page |
btn btn-md |
<button class="btn btn-primary btn-md mdi mdi-file-plus-outline">Create new document</button>
<button class="btn btn-ghost-dark-gray mdi mdi-close btn-md" href="">Cancel</button>
|
|
| Secondary |
btn btn-secondary |
<button class="btn btn-secondary" ></button>
<a class="btn btn-secondary"></a>
|
Secondary button |
| Outline-[color] |
btn btn-outline-[color] |
<button class="btn btn-outline-primary" ></button>
<button class="btn btn-outline-secondary" ></button>
<button class="btn btn-outline-info" ></button>
<button class="btn btn-outline-success" ></button>
<button class="btn btn-outline-warning" ></button>
<button class="btn btn-outline-danger" ></button>
<button class="btn btn-outline-dark-gray" ></button>
<button class="btn btn-outline-light-gray" ></button>
|
|
| [color] |
btn btn-[color] |
<button class="btn btn-info" ></button>
<button class="btn btn-success" ></button>
<button class="btn btn-warning" ></button>
<button class="btn btn-danger" ></button>
<button class="btn btn-dark-gray" ></button>
<button class="btn btn-medium-gray" ></button>
<button class="btn btn-light-gray" ></button>
|
|
| Link |
btn btn-link |
<button class="btn btn-link" ></button>
<button class="btn btn-link mdi mdi-database-import" ></button>
|
|
| Ghost Primary |
btn btn-ghost-primary |
<button class="btn btn-ghost-primary" ></button>
<button class="btn btn-ghost-secondary" ></button>
|
|
| Ghost Secondary |
btn btn-ghost-secondary |
<button class="btn btn-ghost-secondary" ></button>
<button class="btn btn-ghost-secondary" ></button>
|
|
| Ghost [color] |
btn btn-ghost-[color] |
<button class="btn btn-ghost-info" ></button>
<button class="btn btn-ghost-success" ></button>
<button class="btn btn-ghost-warning" ></button>
<button class="btn btn-ghost-danger" ></button>
<button class="btn btn-ghost-dark-gray" ></button>
<button class="btn btn-ghost-medium-gray" ></button>
<button class="btn btn-ghost-light-gray" ></button>
|
|
| [button] Small |
btn [button] btn-sm |
<button class="btn btn-primary btn-sm" ></button>
<a class="btn btn-primary btn-sm"></a>
|
Button Small |
| [button] Large |
btn [button] btn-lg |
<button class="btn btn-primary btn-lg" ></button>
<a class="btn btn-primary btn-lg"></a>
|
Button Large |
| [button] Disabled |
btn [button] disabled |
<button class="btn btn-primary" disabled ></button>
<a class="btn btn-primary disabled"></a>
|
Button Icon |
| [button] i-[icon] |
btn [button] mdi mdi-[icon] |
<button class="btn btn-primary mdi mdi-checked" ></button>
<a class="btn btn-primary mdi mdi-content-duplicate"></a>
|
Button Icon |
| Icon-only i-[icon] |
btn btn-icon-only mdi mdi-[icon] |
<button class="btn btn-icon-only mdi mdi-doc-invoice" ></button>
<a class="btn btn-icon mdi mdi-content-duplicate"></a>
|
|
| Icon-only Square i-[icon] |
btn btn-icon-only btn-square mdi mdi-[icon] |
<button class="btn btn-icon-only btn-square mdi mdi-doc-invoice" ></button>
<a class="btn btn-icon-only btn-square mdi mdi-content-duplicate"></a>
|
|