# Buttons

### Default Button

Use any of the available `.btn btn-` classes to quickly create a styled button.

Default Primary Secondary Success Info Warning Danger Link

### Disable Default Button

Use any of the available `.btn btn-` classes you must add the `.disabled` class to make it visually appear disabled.

Default Primary Secondary Success Info Warning Danger Link

### Rounded Button

Use any of the available `.btn-pill` classes to quickly create a styled button.

Default Primary Secondary Success Info Warning Danger

### Outline Button

Use any of the available `.btn-outline-` classes to quickly create a styled button.

Default Primary Secondary Success Info Warning Danger

### Light Button

Use any of the available `.btn-light-` classes to quickly create a styled button.

Default Primary Secondary Success Info Warning Danger

### Button with icon

Basic buttons are traditional buttons with borders color opitons.

### Button size

Add `.btn-lg` or `.btn-sm` for additional sizes.

### Block Button

Add `.d-grid` or `.gap-2` for additional sizes.

### Icon buttons

Icon only button. Add `.btn-icon` classes to quickly create a styled button..

### Social buttons

You can use only icons.

### Button Tags

Add `.btn`, `<input>`, `<a>`classes to quickly create a styled button..

Link

### Toggle buttons

Add `data-bs-toggle="button"` to toggle a button `.active` class & required `aria-pressed="true"`.

### Color variations

The classic button, in different colors.

Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan Gray Dark gray

### Social buttons

The classic button, in different social classes.

### Loading button

Add `.btn-loading` to use a loading state on a button. The width of the button depends on the length of the text inside Since the loading spinner is implemented using the element.

### Button dropdown

Wrap the dropdown’s toggle using different colors and icons implemented in different dropdowns styles (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs.

### Basic Button Group

Use any of the available `.btn` in `.btn-group` classes to quickly create a styled button.

### Button Toolbar

Combine sets of button groups into button toolbars for more complex components.

### Outline Button Group

Use any of the available `.btn .btn-outline-` in `.btn-group` classes to quickly create a styled button.

### Min-Width Buttons

Add `.btn`, `.w-xs`, `.w-sm`, `.w-md`, `.w-lg`, classes to quickly create a styled button..

### Checkbox Button Group

Use any of the available `.btn` in `.btn-group` classes to quickly create a styled button.

Checkbox Checkbox Checkbox

### Radio Button Group

Use any of the available `.btn` in `.btn-group` classes to quickly create a styled button.

Radio 1 Radio 2 Radio 3

### Button Group Sizes

Use any of the available `.btn-group-*` in `.btn-group` classes to quickly create a styled button.

### Vertical Button Group

Use any of the available `.btn-group-vertical` classes to quickly create a styled button.

###### Choose Country

- USA
- Italy
- Spain
- India
- French
- Russia
- Germany
- Argentina
- Malaysia
- Turkey