Use buttons to trigger actions and links. Buttons can either contain a text, an icon or a combination of a text and an icon, while links are always text.
1 – Icon: Use an icon to expressing objects, actions and ideas.
2 – Text: Text that indicated the results of selecting the button.
Types
1 – Text button (low)
Text buttons are typically used for less important actions.
2 – Outlined button (medium)
Outlined buttons are used for more emphasis than text button.
3 – Contained button (high)
Contained buttons are used for more emphasis than outlined button.
4 – Outlined button with Icon
To avoid the ambiguity, use icons before the text in any button type to clarify an icon’s meaning.
5 – Full width contained button
Button can also be expanded to full width to fill the parent container.
6 – Floating action button (FAB)
A floating action button represents the primary action of a screen. Only use a FAB if it is the most suitable way to present a screen’s primary action.
System buttons
We recommend to use system predefined button styles for some use cases. System buttons often appear in navigation bars and toolbars.
Button placement
- When using buttons to prompt a user to move through a sequence of screens, right-align the primary button to visually support navigation.
- On any dialogs / modal windows, always position the primary button on the right, secondary button on the left.
Design Guidelines 