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.
Grouped Button
Grouped buttons give people access to related actions. Use grouped buttons when there is a close relationship between a number of buttons. Common placements of grouped buttons can be found in Invite module in co8. This pattern is normally used at the top of the page.
Drop-down Button
A button with an attached dropdown menu of related actions. The labeled section display as “More”, while the drop menu shows a list of related actions.
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.
- For single page forms and focused tasks, always position the primary button on the right, secondary button on the left.
Design Guidelines 