diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index 08c61e20d9..4af108edcd 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -238,13 +238,13 @@ export default {
 
 		/**
 		 * Specifies the button type
-		 * Accepted values: primary, secondary, tertiary, error, warning, success. If left empty,
+		 * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
 		 * the default button style will be applied.
 		 */
 		type: {
 			type: String,
 			validator(value) {
-				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'error', 'warning', 'success'].indexOf(value) !== -1
+				return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].indexOf(value) !== -1
 			},
 			default: 'secondary',
 		},
@@ -535,6 +535,11 @@ export default {
 		&.button-vue--vue-tertiary-no-background {
 			opacity: 1;
 		}
+		&.button-vue--vue-tertiary-on-primary {
+			border-radius: var(--border-radius);
+			opacity: 1;
+			background-color: transparent;
+		}
 		&.button-vue--vue-success {
 			background-color: var(--color-success-hover);
 		}
@@ -595,6 +600,18 @@ export default {
 		}
 	}
 
+	// Tertiary on primary color (like the header)
+	&--vue-tertiary-on-primary {
+		color: var(--color-primary-text);
+		background-color: transparent;
+		opacity: .7;
+
+		&:hover:not(:disabled) {
+			background-color: transparent;
+			opacity: 1;
+		}
+	}
+
 	// Success
 	&--vue-success {
 		background-color: var(--color-success);