diff --git a/apps/showcase/doc/button/RaisedTextDoc.vue b/apps/showcase/doc/button/RaisedTextDoc.vue
index 7967cb05c..0b21edfea 100644
--- a/apps/showcase/doc/button/RaisedTextDoc.vue
+++ b/apps/showcase/doc/button/RaisedTextDoc.vue
@@ -10,7 +10,7 @@
-
+
@@ -28,7 +28,7 @@ export default {
-
+
`,
options: `
@@ -40,7 +40,7 @@ export default {
-
+
@@ -57,7 +57,7 @@ export default {
-
+
diff --git a/apps/showcase/doc/button/TextDoc.vue b/apps/showcase/doc/button/TextDoc.vue
index f4324300d..3d352b8cd 100644
--- a/apps/showcase/doc/button/TextDoc.vue
+++ b/apps/showcase/doc/button/TextDoc.vue
@@ -10,7 +10,7 @@
-
+
@@ -28,7 +28,7 @@ export default {
-
+
`,
options: `
@@ -40,7 +40,7 @@ export default {
-
+
@@ -57,7 +57,7 @@ export default {
-
+
diff --git a/packages/primevue/src/button/style/ButtonStyle.js b/packages/primevue/src/button/style/ButtonStyle.js
index d0fa7bffd..63fa8bb34 100644
--- a/packages/primevue/src/button/style/ButtonStyle.js
+++ b/packages/primevue/src/button/style/ButtonStyle.js
@@ -559,6 +559,24 @@ const theme = ({ dt }) => `
color: ${dt('button.text.danger.color')};
}
+.p-button-text.p-button-contrast {
+ background: transparent;
+ border-color: transparent;
+ color: ${dt('button.text.contrast.color')};
+}
+
+.p-button-text.p-button-contrast:not(:disabled):hover {
+ background: ${dt('button.text.contrast.hover.background')};
+ border-color: transparent;
+ color: ${dt('button.text.contrast.color')};
+}
+
+.p-button-text.p-button-contrast:not(:disabled):active {
+ background: ${dt('button.text.contrast.active.background')};
+ border-color: transparent;
+ color: ${dt('button.text.contrast.color')};
+}
+
.p-button-text.p-button-plain {
background: transparent;
border-color: transparent;
diff --git a/packages/themes/src/presets/aura/button/index.js b/packages/themes/src/presets/aura/button/index.js
index ba501593d..dc7a9abed 100644
--- a/packages/themes/src/presets/aura/button/index.js
+++ b/packages/themes/src/presets/aura/button/index.js
@@ -244,6 +244,11 @@ export default {
activeBackground: '{red.100}',
color: '{red.500}'
},
+ contrast: {
+ hoverBackground: '{surface.50}',
+ activeBackground: '{surface.100}',
+ color: '{surface.950}'
+ },
plain: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
@@ -471,6 +476,11 @@ export default {
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
color: '{red.400}'
},
+ contrast: {
+ hoverBackground: '{surface.800}',
+ activeBackground: '{surface.700}',
+ color: '{surface.0}'
+ },
plain: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
diff --git a/packages/themes/src/presets/lara/button/index.js b/packages/themes/src/presets/lara/button/index.js
index 294a33ec8..4198b3dd2 100644
--- a/packages/themes/src/presets/lara/button/index.js
+++ b/packages/themes/src/presets/lara/button/index.js
@@ -244,6 +244,11 @@ export default {
activeBackground: '{red.100}',
color: '{red.500}'
},
+ contrast: {
+ hoverBackground: '{surface.50}',
+ activeBackground: '{surface.100}',
+ color: '{surface.950}'
+ },
plain: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
@@ -471,6 +476,11 @@ export default {
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
color: '{red.400}'
},
+ contrast: {
+ hoverBackground: '{surface.800}',
+ activeBackground: '{surface.700}',
+ color: '{surface.0}'
+ },
plain: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
diff --git a/packages/themes/src/presets/material/button/index.js b/packages/themes/src/presets/material/button/index.js
index 448cba3a5..1c1c100a7 100644
--- a/packages/themes/src/presets/material/button/index.js
+++ b/packages/themes/src/presets/material/button/index.js
@@ -244,6 +244,11 @@ export default {
activeBackground: '{red.100}',
color: '{red.500}'
},
+ contrast: {
+ hoverBackground: '{surface.50}',
+ activeBackground: '{surface.100}',
+ color: '{surface.950}'
+ },
plain: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
@@ -471,6 +476,11 @@ export default {
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
color: '{red.400}'
},
+ contrast: {
+ hoverBackground: '{surface.800}',
+ activeBackground: '{surface.700}',
+ color: '{surface.0}'
+ },
plain: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
diff --git a/packages/themes/src/presets/nora/button/index.js b/packages/themes/src/presets/nora/button/index.js
index 5af916271..6f22942f0 100644
--- a/packages/themes/src/presets/nora/button/index.js
+++ b/packages/themes/src/presets/nora/button/index.js
@@ -244,6 +244,11 @@ export default {
activeBackground: '{red.100}',
color: '{red.600}'
},
+ contrast: {
+ hoverBackground: '{surface.50}',
+ activeBackground: '{surface.100}',
+ color: '{surface.950}'
+ },
plain: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
@@ -471,6 +476,11 @@ export default {
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
color: '{red.500}'
},
+ contrast: {
+ hoverBackground: '{surface.800}',
+ activeBackground: '{surface.700}',
+ color: '{surface.0}'
+ },
plain: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',