# Buttons UI

### Buttons

Various types of buttons. Using the base class `.btn`

| Normal | Large `.btn-lg` | Small `.btn-sm` | X-Small `.btn-xs` | Flat `.btn-flat` | Disabled `.disabled`
--- | --- | --- | --- | --- | --- | ---
General Buttons |  |  |  |  |  |
Button with outline |  |  |  |  |  |
Rounded Buttons |  |  |  |  |  |
Rounded Outline Buttons |  |  |  |  |  |
Button with icon |  |  |  |  |  |
Button with Dropdown |  |  |  |  |  |

### Horizontal Button Group

Horizontal button groups are easy to create with bootstrap. Just add your buttons inside `<div class="btn-group"></div>`

Button | Icons | Dropdown
--- | --- | ---

### Vertical Button Group

Vertical button groups are easy to create with bootstrap. Just add your buttons inside `<div class="btn-group-vertical"></div>`

Button | Icons | Dropdown
--- | --- | ---

#### Social buttons Icon with Name

###### Use a classes `btn btn-social btn-bitbucket / < class="fa fa-bitbucket"></i>` to quickly create a General btn.

#### Social buttons Icon

Use a classes `btn btn-social-icon btn-bitbucket` to quickly create a General btn.

#### With Circle buttons

Use a classes `btn btn-social-icon btn-circle` to quickly create a General btn.

#### With rounded buttons

Use a classes `btn btn-social-icon btn-rounded` to quickly create a General btn.

### Different colors

Mix and match with various background colors. Use base class `.btn` and add any available `.bg-*` class

### Application Buttons

Add the classes `.btn.btn-app` to an `<a>` tag to achieve the following:

Edit Play Pause Stop Repeat Save 12 Notifications 41 Users 45 Orders 2 Inbox 48 Products 31 Likes

### Split buttons

Normal split buttons:

Flat split buttons:

### Button Addon

With dropdown

Normal

Flat