Buttons allow users to perform a single, clearly expressed action.
Primary button
It is used for the main call to action on the page. Primary buttons should only appear once per screen (not including the app header, modal dialog, or side panel). 
<button class="pbtn btn-primary">Label</button>

<button class="pbtn btn-primary">
    <span class="material-symbols-outlined">delete</span>Label
</button>

<button class="pbtn btn-primary btn-icon">
    <span class="material-symbols-outlined">delete</span>
</button>

<button class="pbtn btn-primary btn-disabled">Label</button>

<button class="pbtn btn-primary btn-disabled">
    <span class="material-symbols-outlined">delete</span>Label
</button>

<button class="pbtn btn-primary btn-icon btn-disabled">
    <span class="material-symbols-outlined">delete</span>
</button>
Secondary button
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". 
<button class="pbtn btn-secondary">Label</button>

<button class="pbtn btn-secondary">
    <span class="material-symbols-outlined">arrow_forward</span>Label
</button>

<button class="pbtn btn-secondary btn-icon">
    <span class="material-symbols-outlined">more_horiz</span>
</button>

<button class="pbtn btn-secondary btn-disabled">Label</button>

<button class="pbtn btn-secondary btn-disabled">
    <span class="material-symbols-outlined">arrow_forward</span>Label
</button>

<button class="pbtn btn-secondary btn-icon btn-disabled">
    <span class="material-symbols-outlined">more_horiz</span>
</button>
Error button
For actions that could have destructive effects on user data (for example, deletion). 
<button class="pbtn btn-red">Label</button>

<button class="pbtn btn-red">
    <span class="material-symbols-outlined">arrow_forward</span>Label
</button>

<button class="pbtn btn-red btn-icon">
    <span class="material-symbols-outlined">more_horiz</span>
</button>

<button class="pbtn btn-red btn-disabled">Label</button>

<button class="pbtn btn-red btn-disabled">
    <span class="material-symbols-outlined">arrow_forward</span>Label
</button>

<button class="pbtn btn-red btn-icon btn-disabled">
    <span class="material-symbols-outlined">more_horiz</span>
</button>
Buttons with icon
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.
Icons buttons
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
1
Left Icon: Shown optionally, it reinforces the understanding of the action.
2
Label: Describes the main action. It works best when it's short.
3
Right Icon: Shown optionally, it reinforces the understanding of the action.
Icon button
1
Container: Optional 32px.
2
Icon: 16px.
Action button
Specific icon button without container used in Tables for row controls, for example: delete, edit, comments, etc.