For secondary actions on each page. Secondary buttons can only be used in conjunction with a primary button. As part of a pair, the function of the secondary button is to perform the negative action of the set, such as "Cancel" or "Back".
Buttons support an icon before or after the label. Avoid using both icons on a button at the same time.
In the case of using icon and unlabeled buttons, make sure the icon is explicit about the action it is displaying.
Panelita also supports icon-only buttons for a lighter-weight toolbar-like treatment.
Disabled state buttons
Buttons support disabled states to indicate that a user can not take an action on a particular situation.
A button's text label is the most important element of a button, as it communicates the action that will be performed when the user interacts with it. In a contained button, the text is always center-aligned.
If a text label is not used, there must be an icon to indicate what the button does.
Button with content
Left Icon: Shown optionally, it reinforces the understanding of the action.
Label: Describes the main action. It works best when it's short.
Right Icon: Shown optionally, it reinforces the understanding of the action.
Container: Optional 32px.
Specific icon button without container used in Tables for row controls, for example: delete, edit, comments, etc.