A button clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
Button Types
There are five standard types of buttons:
- Floating action button: A circular material button that lifts and displays an ink reaction on press.
- Raised button: A typically rectangular material button that lifts and displays ink reactions on press.
- Flat button: A button made of ink that displays ink reactions on press but does not lift.
- Icon toggle button: a circular button with a transparent background that does not lift.
- Default button: a typically rectangular button that does not lift.
All the five button types are available in the four contextual classes (e.g., .btn-success)
, plus the default, accent and primary variants. (e.g., .btn-primary-dark)
Examples:
Floating Action Button
Raised Button
Flat Button
Icon Toggle
Default Button
HTML Code:
Floating Action Button
Raised Button
Flat Button
Icon Toggle
Default Button
Button Sizes
Floating Action Button Examples:
LG
Normal
SM
XS
Raised Button Examples:
LG
Normal
SM
XS
Flat Button Examples:
LG
Normal
SM
XS
Icon Toggle Button Examples:
LG
Normal
SM
XS
Default Button Examples:
LG
Normal
SM
XS
HTML Code:
LG
Normal
SM
XS