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

Default colors

Default 6 contextual colors

Default colors with icon

Available in both directions

Default colors with menu

Outline button with dropdown

Custom colors

Available in all custom colors

Custom colors with icon

Available in both directions

Custom colors with menu

Outline button with dropdown

Transparent border

Using .border-transparent class

Thin border

Default 1px border width

Thick border

Using .border-2 class

Light with default text

Default button text color

Light with color match

Text color matches button color theme

Light with border

Both thin and thick borders

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

Default button sizes

Available sizes of default buttons

Large size

Default size

Small size

Labeled button sizes

Available sizes of labeled buttons

Large size

Default size

Small size

Outline button sizes

Available sizes of outline buttons

Large size

Default size

Small size

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

Light button

Default button in light color

Dark button

Default button in dark color

Primary button

Contextual button in blue color

Secondary button

Contextual button in slate color

Danger button

Contextual button in red color

Success button

Contextual button in green color

Warning button

Contextual button in orange color

Info button

Contextual button in cyan color

Indigo button

Custom button in indigo color

Pink button

Custom button in pink color

Purple button

Custom button in purple color

Yellow button

Custom button in yellow color

Teal button

Custom button in teal color

White button

Custom button in white color

Link button

Button with transparent background

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

Loading button

Custom loading state

Radio button group

Bootstrap radio button group

Justified link group

Justified links in button group

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

Justified button group

Justified buttons in button group

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