Buttons
Buttons are one of the most important components. It calls the user to make an action or choice with one tap. Buttons might be in different conditions and states, that is also important in the process of communication between the user and the system.
Type says about the priority of the action. Set up a hierarchy of actions that will set up the user where there are many options. Usually, you might have one prominent button (often referred to as the "primary" type), several medium "secondary" and subtle "tertiary" action.
FAB (Floating Action Button)
Buttons with icons are usually found on application bars and toolbars. Icons are also suitable for toggle buttons that allow you to select or deselect a single option, such as adding or removing an asterisk to an item. FAB performs the primary, or most common, action on a screen. It appears in front of all screen content. The icon’s colour can be settled separately.
Supported:
Primary
Secondary
The style option for secondary components. They have less priority than the primary accent and can be used for buttons that we do not want to highlight a lot.
Outline
Outline buttons are medium accented. They contain important, but not the main actions in the application. Outlined buttons are also a lower accented alternative for contained buttons, or a higher accented alternative for text buttons.
Ghost
The borders of ghost buttons are usually indicated by a thin line, and there is simple text inside. It is an easy-to-implement style that, when applied correctly, will fit into any design concept.
Tertiary
The least accented style without any borders but with text and/or icon will be great solution for minimalistic styled websites or for the less accented buttons that won't distrub the user from your main offer.
Customize
The buttons can be fixed width or stretch based on the content inside. This applies to all buttons. A shadow and various animations can also be added.