diff --git a/app/assets/javascripts/discourse/components/d-button.js.es6 b/app/assets/javascripts/discourse/components/d-button.js.es6
index f82df037b7b..359d058d24c 100644
--- a/app/assets/javascripts/discourse/components/d-button.js.es6
+++ b/app/assets/javascripts/discourse/components/d-button.js.es6
@@ -12,7 +12,7 @@ export default Component.extend({
type: "button",
tagName: "button",
- classNameBindings: [":btn", "noText", "btnType"],
+ classNameBindings: ["btnLink::btn", "btnLink", "noText", "btnType"],
attributeBindings: [
"form",
"disabled",
@@ -24,6 +24,8 @@ export default Component.extend({
btnIcon: notEmpty("icon"),
+ btnLink: Ember.computed.equal("display", "link"),
+
@computed("icon", "translatedLabel")
btnType(icon, translatedLabel) {
if (icon) {
diff --git a/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs b/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs
index e249c7f98fd..639456d461d 100644
--- a/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs
+++ b/app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs
@@ -2,7 +2,7 @@
{{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
- {{i18n 'user.desktop_notifications.consent_prompt'}}
{{i18n 'user.desktop_notifications.enable'}}.
+ {{i18n "user.desktop_notifications.consent_prompt"}} {{d-button display="link" action=(action "turnon") label="user.desktop_notifications.enable"}}.
{{/if}}
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 018fc94bdd4..0458330e000 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -275,3 +275,14 @@
}
}
}
+
+.btn-link {
+ background: transparent;
+ border: 0;
+ outline: 0;
+ padding: 0;
+ color: $tertiary;
+ &:focus {
+ outline: 1px currentColor dotted;
+ }
+}
diff --git a/test/javascripts/components/d-button-test.js.es6 b/test/javascripts/components/d-button-test.js.es6
index 46038cd5b53..cf86842b98f 100644
--- a/test/javascripts/components/d-button-test.js.es6
+++ b/test/javascripts/components/d-button-test.js.es6
@@ -43,3 +43,14 @@ componentTest("form attribute", {
assert.ok(exists("button[form=login-form]"), "it has the form attribute");
}
});
+
+componentTest("link-styled button", {
+ template: '{{d-button display="link"}}',
+
+ test(assert) {
+ assert.ok(
+ find("button.btn-link:not(.btn)").length,
+ "it has the right classes"
+ );
+ }
+});