Buttons

  1. Home
  2. Material-Components
  3. Buttons
Alerts Cards Progress
Register

Flat Buttons

Flat buttons are text-only buttons. They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press.
Use .btn-outline-* class with any colored button to add button flat.

Raised Buttons

Raised buttons are rectangular-shaped buttons. They may be used inline. They lift and display ink reactions on press.
Use .btn class with any colored button to add button raised.

Floating Action Buttons

A floating action button represents the primary action in an application, it is used for a promoted action.
Use .btn-float class with any colored button to add floating action button.

Sizes

A smaller sized, i.e. mini floating action button, is also available. Use .btn-sm class to maintain size of button.

Toggle Buttons

Toggle buttons may be used to group related options, similar to Components/Button group.

Use flat buttons .btn-outline or .btn-outline-* instead of raised buttons to achieve a look that is more in line with the specifications.

Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to be selected.

Colour 1 Colour 2 Colour 3
Colour 1 Colour 2 Colour 3

Purely flat toggle buttons can be achieved by adding .btn-group-fluid class.

Vertical variation is also supported. For that add .btn-group-vertical class.

Colour 1 Colour 2 Colour 3
Colour 1 Colour 2 Colour 3