#### Components - Buttons

Statistics Invoices Schedule

###### Default button layouts

Basic button layout options

###### Default button

Default light button example

###### Default with icon

Available in both directions

###### Default with menu

Default button with dropdown

###### Colored button

Default 8 contextual colors

###### Colored with icon

Available in both directions

###### Colored with menu

Colored button with dropdown

###### Rounded button

Works with all button types

###### Rounded with icon

Available in both directions

###### Rounded with menu

Rounded button with dropdown

###### Labeled button

Works with all button colors

###### Rounded with label

Available in both directions

###### Labeled with menu

Labeled button with dropdown

###### Linked button

Transparent button example

###### Linked with icon

Available in both directions

###### Linked with menu

Linked button with dropdown

###### Outline buttons

Outline button layout and options

###### Default colors

Default 8 contextual colors

###### Default colors with icon

Available in both directions

###### Default colors with menu

Outline button with dropdown

Custom colors

###### Custom colors

Available in all custom colors

###### Custom colors with icon

Available in both directions

###### Custom colors with menu

Outline button with dropdown

Border options

###### Transparent border

Using `.border-transparent` class

###### Thin border

Default `1px` border width

###### Thick border

Using `.border-2` class

Alpha backgrounds

###### Transparent border

Default option without border color

###### Alpha with border

Both `thin` and `thick` borders

###### Alpha static

No hover/active state changes

###### Icon buttons

Buttons with icon only

###### Single icon button

Button with a single icon only

###### Rounded icon button

Works with `all` button types

###### Icon with menu

Icon button with dropdown

###### Single icon button

Button with a single icon only

###### Rounded icon button

Works with `all` button types

###### Icon with menu

Icon button with dropdown

###### Floating button

Floating action button example

###### Floating with text

Float buttons with text and icons

###### Rounded floating buttons

Rounded floating buttons with icons

###### Button styling

Predefined button colors and sizing

###### Default button sizes

Available sizes of `default` buttons

###### Labeled button sizes

Available sizes of `labeled` buttons

###### Outline button sizes

Available sizes of `outline` buttons

Icon positions

###### Left icon position

Display icon on the left side

###### Right icon position

Display icon on the right side

###### Right in dropdown

Additional option for right icon

###### Left label position

Display label on the left side

###### Right label position

Display label on the right side

###### Right in dropdown

Additional option for right label

Custom colors

###### Custom brown color

Custom color from brown palette

###### Custom pink color

Custom color from pink palette

###### Custom teal color

Custom color from teal palette

###### Button dropdowns

Dropdown menus attached to buttons

###### Button dropdown

Basic button dropdown example

###### Menu with icon

Dropdown button with icon

###### Segmented button

Segmented button dropdown

###### Button dropup

Basic button dropup example

###### Drop right

Right aligned dropdown menu

###### Drop left

Left aligned dropdown menu

###### Rounded button dropup

Dropup attached to `rounded` button

###### Rounded button menu

Rouned button menu with icon

###### Rounded segmented

Rounded button with segments

###### Labeled button dropup

Dropup attached to `labeled` button

###### Labeled segment

Segmented labeled button

###### Segmented dropup

Labeled button dropup

###### Icon button dropup

Dropup attached to `icon` button

###### Segmented dropdown icon

Dropdown in segmented icon button

###### Segmented dropup button

Dropup in segmented icon button

###### Additional options

Button toolbars, groups and controls

###### Loading button

Custom loading state

###### Radio button group

Bootstrap `radio` button group

Option 1 Option 2 Option 3

###### Justified link group

Justified `links` in button group

Left Middle Right

###### Button group

Group of buttons in `btn-group`

###### Single toggle button

Using `data-toggle="button"`

###### Button group nesting

Example of nested button groups

###### Button toolbar

Complex `btn-group` components

###### Checkbox button group

Bootstrap `checkbox` button group

Option 1 Option 2 Option 3

###### Justified button group

Justified `buttons` in button group

###### Progress animation

Button loading spinner with progress

###### Expand Left

Spinner appears on left

###### Expand Right

Spinner appears on right

###### Expand Up

Spinner appears on top

###### Expand Down

Spinner appears on bottom

###### Slide Left

Spinner slides from right

###### Slide Right

Spinner slides from left

###### Slide Up

Spinner slides from bottom

###### Slide Down

Spinner slides from top

###### Zoom In

Spinner appears after zoom in

###### Zoom Out

Spinner appears after zoom out

###### Fixed Position

Spinner appears instead of text

###### Border radius

Border radius animation