vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #306 - Add link button

pull/310/head
cagataycivici 2020-05-08 23:56:59 +03:00
parent 74c9cbb72b
commit 4ba09bc5cf
26 changed files with 553 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/themes/luna-amber/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #a90000;
}
.p-button.p-button-link {
color: #FFB300;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #FFB300;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #ffe8b3;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #FFB300;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #FFB300;

22
public/themes/luna-green/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #a90000;
}
.p-button.p-button-link {
color: #1ea04c;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #1ea04c;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #88e9aa;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #1ea04c;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #1ea04c;

22
public/themes/luna-pink/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #a90000;
}
.p-button.p-button-link {
color: #cc285c;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #cc285c;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #f1b6c8;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #cc285c;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #cc285c;

22
public/themes/nova-colored/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #a90000;
}
.p-button.p-button-link {
color: #005b9f;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #005b9f;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #8dcdff;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #005b9f;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/nova-dark/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #a90000;
}
.p-button.p-button-link {
color: #005b9f;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #005b9f;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #8dcdff;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #005b9f;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/nova-light/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #a90000;
}
.p-button.p-button-link {
color: #005b9f;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #005b9f;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #8dcdff;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #005b9f;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/nova-vue/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #a90000;
}
.p-button.p-button-link {
color: #246749;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #246749;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #c2e9d8;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #246749;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/rhea/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #B73737;
}
.p-button.p-button-link {
color: #617c8a;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #617c8a;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #e4e9ec;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #617c8a;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #7B95A3;

26
public/themes/saga-blue/theme.css
View File

@ -1130,13 +1130,13 @@
}
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button {
color: #2196F3;
color: #1976D2;
background: #ffffff;
border: 1px solid #2196F3;
}
.p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover {
background: #e9ecef;
color: #1E88E5;
color: #1976D2;
border-color: #1E88E5;
}
.p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus {
@ -1224,6 +1224,28 @@
border-color: #B71C1C;
}
.p-button.p-button-link {
color: #1976D2;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #1976D2;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #BBDEFB;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #1976D2;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

26
public/themes/saga-cyan/theme.css
View File

@ -1130,13 +1130,13 @@
}
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button {
color: #00ACC1;
color: #00838F;
background: #ffffff;
border: 1px solid #00ACC1;
}
.p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover {
background: #e9ecef;
color: #0097A7;
color: #00838F;
border-color: #0097A7;
}
.p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus {
@ -1224,6 +1224,28 @@
border-color: #B71C1C;
}
.p-button.p-button-link {
color: #00838F;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #00838F;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #B2EBF2;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #00838F;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

26
public/themes/saga-deeppurple/theme.css
View File

@ -1130,13 +1130,13 @@
}
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button {
color: #673AB7;
color: #512DA8;
background: #ffffff;
border: 1px solid #673AB7;
}
.p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover {
background: #e9ecef;
color: #5E35B1;
color: #512DA8;
border-color: #5E35B1;
}
.p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus {
@ -1224,6 +1224,28 @@
border-color: #B71C1C;
}
.p-button.p-button-link {
color: #512DA8;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #512DA8;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #D1C4E9;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #512DA8;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

26
public/themes/saga-green/theme.css
View File

@ -1130,13 +1130,13 @@
}
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button {
color: #4CAF50;
color: #388E3C;
background: #ffffff;
border: 1px solid #4CAF50;
}
.p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover {
background: #e9ecef;
color: #43A047;
color: #388E3C;
border-color: #43A047;
}
.p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus {
@ -1224,6 +1224,28 @@
border-color: #B71C1C;
}
.p-button.p-button-link {
color: #388E3C;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #388E3C;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #C8E6C9;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #388E3C;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

26
public/themes/saga-indigo/theme.css
View File

@ -1130,13 +1130,13 @@
}
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button {
color: #3F51B5;
color: #303F9F;
background: #ffffff;
border: 1px solid #3F51B5;
}
.p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover {
background: #e9ecef;
color: #3949AB;
color: #303F9F;
border-color: #3949AB;
}
.p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus {
@ -1224,6 +1224,28 @@
border-color: #B71C1C;
}
.p-button.p-button-link {
color: #303F9F;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #303F9F;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #C5CAE9;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #303F9F;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

26
public/themes/saga-orange/theme.css
View File

@ -1130,13 +1130,13 @@
}
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button {
color: #FFC107;
color: #FFA000;
background: #ffffff;
border: 1px solid #FFC107;
}
.p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover {
background: #e9ecef;
color: #FFB300;
color: #FFA000;
border-color: #FFB300;
}
.p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus {
@ -1224,6 +1224,28 @@
border-color: #B71C1C;
}
.p-button.p-button-link {
color: #FFA000;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #FFA000;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #FFECB3;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #FFA000;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

26
public/themes/saga-purple/theme.css
View File

@ -1130,13 +1130,13 @@
}
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button {
color: #9C27B0;
color: #7B1FA2;
background: #ffffff;
border: 1px solid #9C27B0;
}
.p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover {
background: #e9ecef;
color: #8E24AA;
color: #7B1FA2;
border-color: #8E24AA;
}
.p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus {
@ -1224,6 +1224,28 @@
border-color: #B71C1C;
}
.p-button.p-button-link {
color: #7B1FA2;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #7B1FA2;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #E1BEE7;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #7B1FA2;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

26
public/themes/saga-teal/theme.css
View File

@ -1130,13 +1130,13 @@
}
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button {
color: #009688;
color: #00796B;
background: #ffffff;
border: 1px solid #009688;
}
.p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover {
background: #e9ecef;
color: #00897B;
color: #00796B;
border-color: #00897B;
}
.p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus {
@ -1224,6 +1224,28 @@
border-color: #B71C1C;
}
.p-button.p-button-link {
color: #00796B;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #00796B;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #B2DFDB;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #00796B;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/vela-blue/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #F44336;
}
.p-button.p-button-link {
color: #64B5F6;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #64B5F6;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #BBDEFB;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #64B5F6;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/vela-cyan/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #F44336;
}
.p-button.p-button-link {
color: #4DD0E1;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #4DD0E1;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #B2EBF2;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #4DD0E1;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/vela-deeppurple/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #F44336;
}
.p-button.p-button-link {
color: #9575CD;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #9575CD;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #D1C4E9;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #9575CD;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/vela-green/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #F44336;
}
.p-button.p-button-link {
color: #81C784;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #81C784;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #C8E6C9;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #81C784;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/vela-indigo/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #F44336;
}
.p-button.p-button-link {
color: #7986CB;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #7986CB;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #C5CAE9;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #7986CB;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/vela-orange/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #F44336;
}
.p-button.p-button-link {
color: #FFD54F;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #FFD54F;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #FFECB3;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #FFD54F;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/vela-purple/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #F44336;
}
.p-button.p-button-link {
color: #BA68C8;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #BA68C8;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #E1BEE7;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #BA68C8;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

22
public/themes/vela-teal/theme.css
View File

@ -1224,6 +1224,28 @@
border-color: #F44336;
}
.p-button.p-button-link {
color: #4DB6AC;
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
color: #4DB6AC;
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-text {
text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
box-shadow: 0 0 0 0.2em #B2DFDB;
}
.p-button.p-button-link:enabled:active {
background: transparent;
color: #4DB6AC;
border-color: transparent;
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
background: #ffffff;

1
src/views/button/ButtonDemo.vue
View File

@ -22,6 +22,7 @@
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Danger" class="p-button-danger" />
<Button label="Link" class="p-button-link" />
<h3>Raised Buttons</h3>
<Button label="Primary" class="p-button-raised" />

9
src/views/button/ButtonDoc.vue
View File

@ -32,7 +32,7 @@ import Button from 'primevue/button';
</CodeHighlight>
<h3>Severity</h3>
<p>Different color options are available as severity levels.</p>
<p>Different options are available as severity levels.</p>
<ul>
<li>.p-button-secondary</li>
@ -57,6 +57,12 @@ import Button from 'primevue/button';
&lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt;
</CodeHighlight>
<h3>Link Buttons</h3>
<p>Use "p-button-link" class to render the button as a link.</p>
<CodeHighlight>
&lt;Button label="Link" class="p-button-link" /&gt;
</CodeHighlight>
<h3>ButtonSet</h3>
<p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
<CodeHighlight>
@ -153,6 +159,7 @@ import Button from 'primevue/button';
&lt;Button label="Info" class="p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-warning" /&gt;
&lt;Button label="Danger" class="p-button-danger" /&gt;
&lt;Button label="Link" class="p-button-link" /&gt;
&lt;h3&gt;Raised Buttons&lt;/h3&gt;
&lt;Button label="Primary" class="p-button-raised" /&gt;