Buttons

A button consists of text and/or an icon that clearly communicates what action will occur when the user touches it.

There are five types of buttons:

Default button: a typically rectangular button that does not lift.
Raised button: a typically rectangular button that lifts.
Floating action button: a circular button that lifts.
Icon toggle button: a circular button with a transparent background that does not lift.
Flat button: a button with a transparent background that does not lift.

All types of buttons can emit ink reactions on press.

Flat button

Icon toggle button

Floating action button

Raised button

Default button

States

Flat button states

Icon toggle states

Floating action button states

Raised button states

Default button states

Sizes

Flat button sizes

Icon toggle sizes

Floating action button sizes

Raised button sizes

Default button sizes

Button colors

Every button can emit ink ripples when pressed. You only have to add .ink-reaction to activate this behavior.

Button colors

Transparent button colors

Layouts

Regular groups

Group a series of buttons together on a single line with the button group.

Button group

Button toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

Toolbar

Toggle button groups

Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

Male Female

Toggle radio groups

Toggle checkbox groups

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent.

Left Middle Right

Justified

Button blocks

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Button blocks

Behavior

Ink reaction

Every button can emit ink ripples when pressed. You only have to add .ink-reaction to activate this behavior.

Click the buttons to see the ink effect

The ink ripples take the background color into account so that they are always visible on the button.

Ink ripples on a dark background

Buttons with dropdown

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Dropdown with different open/close animations

Dropup with different open/close animations

Dropdowns on different button styles

Loading buttons

Add data-loading-text="Loading..." to use a loading state on a button.

Click the buttons to see the loading states