Add p-button-plain add-on for text button

pull/411/head
cagataycivici 2020-07-18 15:40:00 +03:00
parent 783883dc33
commit 3bb551eb1e
35 changed files with 475 additions and 105 deletions

View File

@ -1261,6 +1261,17 @@
color: #64B5F6;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #81C784;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #FFD54F;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #BA68C8;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #8dd0ff;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #c298d8;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #007bff;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #883cae;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #FFE082;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #4c4c4c;
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #3c3c3c;
color: #888888;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #81D4FA;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #4c4c4c;
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #3c3c3c;
color: #888888;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #C5E1A5;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #4c4c4c;
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #3c3c3c;
color: #888888;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #F48FB1;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #4c4c4c;
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #3c3c3c;
color: #888888;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1273,6 +1273,17 @@
color: #CE93D8;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1273,6 +1273,17 @@
color: #9FA8DA;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1273,6 +1273,17 @@
color: #673AB7;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(0, 0, 0, 0.16);
color: rgba(0, 0, 0, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1273,6 +1273,17 @@
color: #3F51B5;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(0, 0, 0, 0.16);
color: rgba(0, 0, 0, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1273,6 +1273,17 @@
color: #673AB7;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1273,6 +1273,17 @@
color: #3F51B5;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1273,6 +1273,17 @@
color: #673AB7;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(0, 0, 0, 0.16);
color: rgba(0, 0, 0, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1273,6 +1273,17 @@
color: #3F51B5;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(0, 0, 0, 0.16);
color: rgba(0, 0, 0, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1249,6 +1249,17 @@
color: #007ad9;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #eaeaea;
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #d2d2d2;
color: #848484;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #007ad9;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #eaeaea;
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #d2d2d2;
color: #848484;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #41b883;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #eaeaea;
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #d2d2d2;
color: #848484;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #007ad9;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #eaeaea;
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #d2d2d2;
color: #848484;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1249,6 +1249,17 @@
color: #7B95A3;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #a6a6a6;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #f4f4f4;
color: #a6a6a6;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dbdbdb;
color: #a6a6a6;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #2196F3;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #4CAF50;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #FFC107;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #9C27B0;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #64B5F6;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #81C784;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #FFD54F;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -1261,6 +1261,17 @@
color: #BA68C8;
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus {
outline: 0 none;
outline-offset: 0;

View File

@ -54,6 +54,7 @@
<Button label="Warning" class="p-button-warning p-button-text" />
<Button label="Help" class="p-button-help p-button-text" />
<Button label="Danger" class="p-button-danger p-button-text" />
<Button label="Plain" class="p-button-text p-button-plain" />
<h5>Raised Text Buttons</h5>
<Button label="Primary" class="p-button-raised p-button-text" />
@ -63,6 +64,7 @@
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
<h5>Outlined Buttons</h5>
<Button label="Primary" class="p-button-outlined" />
@ -74,13 +76,13 @@
<Button label="Danger" class="p-button-outlined p-button-danger" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<Button icon="pi pi-check" class="p-button-rounded" />
<h5>Rounded Text Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
@ -90,6 +92,7 @@
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
<h5>Rounded and Outlined Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />

View File

@ -29,15 +29,6 @@ import Button from 'primevue/button';
<p>Events are defined with the standard notation.</p>
<CodeHighlight>
&lt;Button label="Submit" @click="handleClick($event)"/&gt;
</CodeHighlight>
<h5>Text Buttons</h5>
<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling.</p>
<CodeHighlight>
&lt;Button label="Submit" class="p-button-text" /&gt;
&lt;Button icon="pi pi-check" class="p-button-text" /&gt;
&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
&lt;Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text" /&gt;
</CodeHighlight>
<h5>Severity</h5>
@ -60,6 +51,16 @@ import Button from 'primevue/button';
&lt;Button label="Warning" class="p-button-warning" /&gt;
&lt;Button label="Warning" class="p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-danger" /&gt;
</CodeHighlight>
<h5>Text Buttons</h5>
<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i>
text buttons ignore severity levels and displayed as a regular text.</p>
<CodeHighlight>
&lt;Button label="Submit" class="p-button-text" /&gt;
&lt;Button icon="pi pi-check" class="p-button-text" /&gt;
&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
&lt;Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text p-button-text" /&gt;
</CodeHighlight>
<h5>Raised and Rounded Buttons</h5>
@ -207,114 +208,117 @@ import Button from 'primevue/button';
</a>
<CodeHighlight>
<template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;Button label="Submit" /&gt;
&lt;Button label="Submit" disabled="disabled" /&gt;
&lt;Button label="Link" class="p-button-link" /&gt;
&gt;h5&lt;Basic&gt;/h5&lt;
&gt;Button label="Submit" /&lt;
&gt;Button label="Disabled" disabled="disabled" /&lt;
&gt;Button label="Link" class="p-button-link" /&lt;
&lt;h5&gt;Icons&lt;/h5&gt;
&lt;Button icon="pi pi-check" /&gt;
&lt;Button label="Submit" icon="pi pi-check" /&gt;
&lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
&gt;h5&lt;Icons&gt;/h5&lt;
&gt;Button icon="pi pi-check" /&lt;
&gt;Button label="Submit" icon="pi pi-check" /&lt;
&gt;Button label="Submit" icon="pi pi-check" iconPos="right" /&lt;
&lt;h5&gt;Severities&lt;/h5&gt;
&lt;Button label="Primary" /&gt;
&lt;Button label="Secondary" class="p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-success" /&gt;
&lt;Button label="Info" class="p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-warning" /&gt;
&lt;Button label="Help" class="p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-danger" /&gt;
&gt;h5&lt;Severities&gt;/h5&lt;
&gt;Button label="Primary" /&lt;
&gt;Button label="Secondary" class="p-button-secondary" /&lt;
&gt;Button label="Success" class="p-button-success" /&lt;
&gt;Button label="Info" class="p-button-info" /&lt;
&gt;Button label="Warning" class="p-button-warning" /&lt;
&gt;Button label="Help" class="p-button-help" /&lt;
&gt;Button label="Danger" class="p-button-danger" /&lt;
&lt;h5&gt;Raised Buttons&lt;/h5&gt;
&lt;Button label="Primary" class="p-button-raised" /&gt;
&lt;Button label="Secondary" class="p-button-raised p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-raised p-button-success" /&gt;
&lt;Button label="Info" class="p-button-raised p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-raised p-button-warning" /&gt;
&lt;Button label="Help" class="p-button-raised p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-raised p-button-danger" /&gt;
&gt;h5&lt;Raised Buttons&gt;/h5&lt;
&gt;Button label="Primary" class="p-button-raised" /&lt;
&gt;Button label="Secondary" class="p-button-raised p-button-secondary" /&lt;
&gt;Button label="Success" class="p-button-raised p-button-success" /&lt;
&gt;Button label="Info" class="p-button-raised p-button-info" /&lt;
&gt;Button label="Warning" class="p-button-raised p-button-warning" /&lt;
&gt;Button label="Help" class="p-button-raised p-button-help" /&lt;
&gt;Button label="Danger" class="p-button-raised p-button-danger" /&lt;
&lt;h5&gt;Rounded Buttons&lt;/h5&gt;
&lt;Button label="Primary" class="p-button-rounded" /&gt;
&lt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-rounded p-button-success" /&gt;
&lt;Button label="Info" class="p-button-rounded p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-rounded p-button-warning" /&gt;
&lt;Button label="Help" class="p-button-rounded p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-rounded p-button-danger" /&gt;
&gt;h5&lt;Rounded Buttons&gt;/h5&lt;
&gt;Button label="Primary" class="p-button-rounded" /&lt;
&gt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&lt;
&gt;Button label="Success" class="p-button-rounded p-button-success" /&lt;
&gt;Button label="Info" class="p-button-rounded p-button-info" /&lt;
&gt;Button label="Warning" class="p-button-rounded p-button-warning" /&lt;
&gt;Button label="Help" class="p-button-rounded p-button-help" /&lt;
&gt;Button label="Danger" class="p-button-rounded p-button-danger" /&lt;
&lt;h5&gt;Text Buttons&lt;/h5&gt;
&lt;Button label="Primary" class="p-button-text" /&gt;
&lt;Button label="Secondary" class="p-button-secondary p-button-text" /&gt;
&lt;Button label="Success" class="p-button-success p-button-text" /&gt;
&lt;Button label="Info" class="p-button-info p-button-text" /&gt;
&lt;Button label="Warning" class="p-button-warning p-button-text" /&gt;
&lt;Button label="Help" class="p-button-help p-button-text" /&gt;
&lt;Button label="Danger" class="p-button-danger p-button-text" /&gt;
&gt;h5&lt;Text Buttons&gt;/h5&lt;
&gt;Button label="Primary" class="p-button-text" /&lt;
&gt;Button label="Secondary" class="p-button-secondary p-button-text" /&lt;
&gt;Button label="Success" class="p-button-success p-button-text" /&lt;
&gt;Button label="Info" class="p-button-info p-button-text" /&lt;
&gt;Button label="Warning" class="p-button-warning p-button-text" /&lt;
&gt;Button label="Help" class="p-button-help p-button-text" /&lt;
&gt;Button label="Danger" class="p-button-danger p-button-text" /&lt;
&gt;Button label="Plain" class="p-button-text p-button-plain" /&lt;
&lt;h5&gt;Raised Text Buttons&lt;/h5&gt;
&lt;Button label="Primary" class="p-button-raised p-button-text" /&gt;
&lt;Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" /&gt;
&lt;Button label="Success" class="p-button-raised p-button-success p-button-text" /&gt;
&lt;Button label="Info" class="p-button-raised p-button-info p-button-text" /&gt;
&lt;Button label="Warning" class="p-button-raised p-button-warning p-button-text" /&gt;
&lt;Button label="Help" class="p-button-raised p-button-help p-button-text" /&gt;
&lt;Button label="Danger" class="p-button-raised p-button-danger p-button-text" /&gt;
&gt;h5&lt;Raised Text Buttons&gt;/h5&lt;
&gt;Button label="Primary" class="p-button-raised p-button-text" /&lt;
&gt;Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" /&lt;
&gt;Button label="Success" class="p-button-raised p-button-success p-button-text" /&lt;
&gt;Button label="Info" class="p-button-raised p-button-info p-button-text" /&lt;
&gt;Button label="Warning" class="p-button-raised p-button-warning p-button-text" /&lt;
&gt;Button label="Help" class="p-button-raised p-button-help p-button-text" /&lt;
&gt;Button label="Danger" class="p-button-raised p-button-danger p-button-text" /&lt;
&gt;Button label="Plain" class="p-button-raised p-button-text p-button-plain" /&lt;
&lt;h5&gt;Outlined Buttons&lt;/h5&gt;
&lt;Button label="Primary" class="p-button-outlined" /&gt;
&lt;Button label="Secondary" class="p-button-outlined p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-outlined p-button-success" /&gt;
&lt;Button label="Info" class="p-button-outlined p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-outlined p-button-warning" /&gt;
&lt;Button label="Help" class="p-button-outlined p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-outlined p-button-danger" /&gt;
&gt;h5&lt;Outlined Buttons&gt;/h5&lt;
&gt;Button label="Primary" class="p-button-outlined" /&lt;
&gt;Button label="Secondary" class="p-button-outlined p-button-secondary" /&lt;
&gt;Button label="Success" class="p-button-outlined p-button-success" /&lt;
&gt;Button label="Info" class="p-button-outlined p-button-info" /&lt;
&gt;Button label="Warning" class="p-button-outlined p-button-warning" /&lt;
&gt;Button label="Help" class="p-button-outlined p-button-help" /&lt;
&gt;Button label="Danger" class="p-button-outlined p-button-danger" /&lt;
&lt;h5&gt;Rounded Icon Buttons&lt;/h5&gt;
&lt;Button icon="pi pi-check" class="p-button-rounded" /&gt;
&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" /&gt;
&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success" /&gt;
&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info" /&gt;
&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning" /&gt;
&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help" /&gt;
&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger" /&gt;
&gt;h5&lt;Rounded Icon Buttons&gt;/h5&lt;
&gt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" /&lt;
&gt;Button icon="pi pi-search" class="p-button-rounded p-button-success" /&lt;
&gt;Button icon="pi pi-user" class="p-button-rounded p-button-info" /&lt;
&gt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning" /&lt;
&gt;Button icon="pi pi-heart" class="p-button-rounded p-button-help" /&lt;
&gt;Button icon="pi pi-times" class="p-button-rounded p-button-danger" /&lt;
&gt;Button icon="pi pi-check" class="p-button-rounded" /&lt;
&lt;h5&gt;Rounded Text Icon Buttons&lt;/h5&gt;
&lt;Button icon="pi pi-check" class="p-button-rounded p-button-text" /&gt;
&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" /&gt;
&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" /&gt;
&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" /&gt;
&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" /&gt;
&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" /&gt;
&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" /&gt;
&gt;h5&lt;Rounded Text Icon Buttons&gt;/h5&lt;
&gt;Button icon="pi pi-check" class="p-button-rounded p-button-text" /&lt;
&gt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" /&lt;
&gt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" /&lt;
&gt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" /&lt;
&gt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" /&lt;
&gt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" /&lt;
&gt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" /&lt;
&gt;Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" /&lt;
&lt;h5&gt;Rounded and Outlined Icon Buttons&lt;/h5&gt;
&lt;Button icon="pi pi-check" class="p-button-rounded p-button-outlined" /&gt;
&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" /&gt;
&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" /&gt;
&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" /&gt;
&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" /&gt;
&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" /&gt;
&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" /&gt;
&gt;h5&lt;Rounded and Outlined Icon Buttons&gt;/h5&lt;
&gt;Button icon="pi pi-check" class="p-button-rounded p-button-outlined" /&lt;
&gt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" /&lt;
&gt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" /&lt;
&gt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" /&lt;
&gt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" /&lt;
&gt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" /&lt;
&gt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" /&lt;
&lt;h5&gt;Badges&lt;/h5&gt;
&lt;Button type="button" label="Emails" badge="8" /&gt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
&gt;h5&lt;Badges&gt;/h5&lt;
&gt;Button type="button" label="Emails" badge="8" /&lt;
&gt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&lt;
&lt;h5&gt;Button Set&lt;/h5&gt;
&lt;span class="p-buttonset"&gt;
&lt;Button label="Save" icon="pi pi-check" /&gt;
&lt;Button label="Delete" icon="pi pi-trash" /&gt;
&lt;Button label="Cancel" icon="pi pi-times" /&gt;
&lt;/span&gt;
&gt;h5&lt;Button Set&gt;/h5&lt;
&gt;span class="p-buttonset"&lt;
&gt;Button label="Save" icon="pi pi-check" /&lt;
&gt;Button label="Delete" icon="pi pi-trash" /&lt;
&gt;Button label="Cancel" icon="pi pi-times" /&lt;
&gt;/span&lt;
&lt;h5&gt;Sizes&lt;/h5&gt;
&lt;div class="sizes"&gt;
&lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt;
&lt;Button label="Normal" icon="pi pi-check" class="p-button" /&gt;
&lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
&lt;/div&gt;
&gt;h5&lt;Sizes&gt;/h5&lt;
&gt;div class="sizes"&lt;
&gt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&lt;
&gt;Button label="Normal" icon="pi pi-check" class="p-button" /&lt;
&gt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&lt;
&gt;/div&lt;
</template>
</CodeHighlight>