diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index c5a8eb5a6d..7a72563d7b 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -36,9 +36,17 @@ It can be used with one or multiple actions.
Icon only buttons
+
Tertiary, no background
Tertiary
Secondary
Primary
+
+
+
+
+
@@ -65,9 +73,14 @@ It can be used with one or multiple actions.
Text only buttons
+
Tertiary, no background
Tertiary
Secondary
Primary
+
+ Example text
+
Example text
@@ -84,9 +97,18 @@ It can be used with one or multiple actions.
Icon and text buttons
+
Tertiary, no background
Tertiary
Secondary
Primary
+
+
+
+
+ Example text
+
@@ -132,6 +154,7 @@ It can be used with one or multiple actions.
Success
Warning
Error
+ -
@@ -157,6 +180,7 @@ It can be used with one or multiple actions.
Example text
+ -
@@ -183,7 +207,7 @@ export default {
.grid {
display: grid;
- grid-template-columns: 1fr 1fr 1fr;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(auto-fill, auto);
position: relative;
margin: 12px 0;
@@ -256,7 +280,7 @@ export default {
type: {
type: String,
validator(value) {
- return ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].indexOf(value) !== -1
+ return ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'error', 'warning', 'success'].indexOf(value) !== -1
},
default: 'secondary',
},
@@ -516,8 +540,8 @@ export default {
&.button-vue--vue-secondary {
box-shadow: 0 0 0 2px var(--color-main-text);
}
- &.button-vue--vue-tertiary {
- color: var(--color-main-text);
+ &.button-vue--vue-tertiary-no-background {
+ opacity: 1;
}
&.button-vue--vue-success {
background-color: var(--color-success-hover);
@@ -562,6 +586,16 @@ export default {
&--vue-tertiary {
color: var(--color-main-text);
background-color: transparent;
+ &:hover {
+ background-color: var(--color);
+ background-color: var(--color-background-hover);
+ }
+ }
+
+ // Tertiary, no background
+ &--vue-tertiary-no-background {
+ color: var(--color-text-lighter);
+ background-color: transparent;
opacity: .7;
&:hover {
background-color: transparent;