diff --git a/addons/rose/addon/components/rose/link-button.js b/addons/rose/addon/components/rose/link-button.js
index 3219bcbff..d5c12ed37 100644
--- a/addons/rose/addon/components/rose/link-button.js
+++ b/addons/rose/addon/components/rose/link-button.js
@@ -1,17 +1,32 @@
-import Component from '@ember/component';
+import LinkComponent from '@ember/routing/link-component';
 import layout from '../../templates/components/rose/link-button';
+import { computed } from '@ember/object';
 
 /**
  * An achor element based on `rose-button` component styles
  * An empty model cannot be passed in to `link-to` component when a route
- * is defined. Thus, `link-button` body content is separated to avoid
- * duplication when checked for model existence.
+ * is defined. Thus, `link-to` component is used to generate this component.
  *
  * @example
  *  <Rose::LinkButton @submit={{true}} @style="primary">Save</Rose::LinkButton>
  *  <Rose::LinkButton @disabled={{true}} @style="secondary">Disabled</Rose::LinkButton>
  */
-export default Component.extend({
+export default LinkComponent.extend({
   layout,
-  tagName: '',
+  tagName: 'a',
+  classNames: ['rose-link-button'],
+  classNameBindings: [
+    'linkButtonStyle',
+    'iconOnly:has-icon-only',
+    'iconLeft:has-icon-left',
+    'iconRight:has-icon-right',
+  ],
+  linkButtonStyle: computed(function () {
+    let styleClassName = '';
+    if (this.style) {
+      styleClassName = `rose-button-${this.style}`;
+    }
+
+    return styleClassName;
+  }),
 });
diff --git a/addons/rose/addon/components/rose/link-button.stories.mdx b/addons/rose/addon/components/rose/link-button.stories.mdx
index cb6b13001..0ca00a2ee 100644
--- a/addons/rose/addon/components/rose/link-button.stories.mdx
+++ b/addons/rose/addon/components/rose/link-button.stories.mdx
@@ -12,7 +12,7 @@ Styles supported: primary, secondary, warning, and ghost.
 Disabling link button is not supported as it is an action on form components only.
 
 ```html
-<Rose::LinkButton @style="primary" @iconRight="chevron-right">
+<Rose::LinkButton @route="index" @style="primary" @iconRight="chevron-right">
   Content
 </Rose::LinkButton>
 ```
@@ -21,6 +21,7 @@ Disabling link button is not supported as it is an action on form components onl
   <Story name="Advanced">{{
     template: hbs`
       <Rose::LinkButton
+        @route="index"
         @style={{style}}
         @iconLeft={{iconLeft}}
         @iconRight={{iconRight}}
@@ -67,13 +68,13 @@ Disabling link button is not supported as it is an action on form components onl
 Similar to `Rose::Button`, icon only link button is supported.
 
 ```html
-<Rose::LinkButton @style="primary" @iconOnly="help-circle-outline" />
+<Rose::LinkButton @route="index" @style="primary" @iconOnly="help-circle-outline" />
 ```
 
 <Preview>
   <Story name="Icon Only">{{
     template: hbs`
-    <Rose::LinkButton @style={{style}} @iconOnly={{iconOnly}} />
+    <Rose::LinkButton @route="" @style={{style}} @iconOnly={{iconOnly}} />
     `,
     context: {
       style: select(
diff --git a/addons/rose/addon/components/rose/link-button/body.js b/addons/rose/addon/components/rose/link-button/body.js
deleted file mode 100644
index 7934097df..000000000
--- a/addons/rose/addon/components/rose/link-button/body.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/link-button/body';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/link-button.hbs b/addons/rose/addon/templates/components/rose/link-button.hbs
index f7d7e94c3..20ea6c6a5 100644
--- a/addons/rose/addon/templates/components/rose/link-button.hbs
+++ b/addons/rose/addon/templates/components/rose/link-button.hbs
@@ -1,22 +1,26 @@
-{{#if @model}}
-  <LinkTo
-    ...attributes
-    @route={{if @route @route "index"}}
-    @model={{@model}}
-    class="rose-link-button {{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
-    >
-    <Rose::LinkButton::Body @iconOnly={{@iconOnly}} @iconLeft={{@iconLeft}} @iconRight={{@iconRight}}>
-      {{yield}}
-    </Rose::LinkButton::Body>
-  </LinkTo>
-{{else}}
-  <LinkTo
-    ...attributes
-    @route={{if @route @route "index"}}
-    class="rose-link-button {{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
-    >
-    <Rose::LinkButton::Body @iconOnly={{@iconOnly}} @iconLeft={{@iconLeft}} @iconRight={{@iconRight}}>
-      {{yield}}
-    </Rose::LinkButton::Body>
-  </LinkTo>
-{{/if}}
+<span class="rose-button-wrapper">
+  {{#if @iconLeft}}
+    <Rose::Icon
+      @name={{@iconLeft}}
+      @size="medium"
+    />
+  {{/if}}
+
+  <span class="rose-button-body">
+    {{yield}}
+  </span>
+
+  {{#if @iconOnly}}
+    <Rose::Icon
+      @name={{@iconOnly}}
+      @size="medium"
+    />
+  {{/if}}
+
+  {{#if @iconRight}}
+    <Rose::Icon
+      @name={{@iconRight}}
+      @size="medium"
+    />
+  {{/if}}
+</span>
diff --git a/addons/rose/addon/templates/components/rose/link-button/body.hbs b/addons/rose/addon/templates/components/rose/link-button/body.hbs
deleted file mode 100644
index 20ea6c6a5..000000000
--- a/addons/rose/addon/templates/components/rose/link-button/body.hbs
+++ /dev/null
@@ -1,26 +0,0 @@
-<span class="rose-button-wrapper">
-  {{#if @iconLeft}}
-    <Rose::Icon
-      @name={{@iconLeft}}
-      @size="medium"
-    />
-  {{/if}}
-
-  <span class="rose-button-body">
-    {{yield}}
-  </span>
-
-  {{#if @iconOnly}}
-    <Rose::Icon
-      @name={{@iconOnly}}
-      @size="medium"
-    />
-  {{/if}}
-
-  {{#if @iconRight}}
-    <Rose::Icon
-      @name={{@iconRight}}
-      @size="medium"
-    />
-  {{/if}}
-</span>
diff --git a/addons/rose/app/components/rose/link-button/body.js b/addons/rose/app/components/rose/link-button/body.js
deleted file mode 100644
index b3c9ee39f..000000000
--- a/addons/rose/app/components/rose/link-button/body.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/link-button/body';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 8df466fc3..2422caa03 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,9 +1,9 @@
-<Rose::LinkButton @style="primary">Primary</Rose::LinkButton>
-<Rose::LinkButton @style="secondary">Secondary</Rose::LinkButton>
-<Rose::LinkButton @style="warning">Warning</Rose::LinkButton>
-<Rose::LinkButton @style="ghost">Ghost</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="primary">Primary</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="secondary">Secondary</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="warning">Warning</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="ghost">Ghost</Rose::LinkButton>
 <br />
 
-<Rose::LinkButton @style="primary" @iconLeft="help-circle-outline">Left Icon</Rose::LinkButton>
-<Rose::LinkButton @style="primary" @iconRight="help-circle-outline">Right Icon</Rose::LinkButton>
-<Rose::LinkButton @style="primary" @iconOnly="help-circle-outline" />
+<Rose::LinkButton @route="index" @style="primary" @iconLeft="help-circle-outline">Left Icon</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="primary" @iconRight="help-circle-outline">Right Icon</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="primary" @iconOnly="help-circle-outline" />
diff --git a/addons/rose/tests/integration/components/rose/link-button-test.js b/addons/rose/tests/integration/components/rose/link-button-test.js
index d7d3c8497..617f76ed0 100644
--- a/addons/rose/tests/integration/components/rose/link-button-test.js
+++ b/addons/rose/tests/integration/components/rose/link-button-test.js
@@ -7,19 +7,19 @@ module('Integration | Component | rose/link-button', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::LinkButton />`);
+    await render(hbs`<Rose::LinkButton @route="index" />`);
     assert.ok(find('a'));
     assert.notOk(find('.rose-button'));
     assert.ok(find('.rose-link-button'));
   });
 
   test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::LinkButton id="link-button"/>`);
+    await render(hbs`<Rose::LinkButton @route="index" id="link-button"/>`);
     assert.ok(find('#link-button'));
   });
 
   test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::LinkButton>Link button content</Rose::LinkButton>`);
+    await render(hbs`<Rose::LinkButton @route="index">Link button content</Rose::LinkButton>`);
     assert.ok(
       find('.rose-link-button').textContent.trim(),
       'Link button content'
@@ -27,28 +27,24 @@ module('Integration | Component | rose/link-button', function (hooks) {
   });
 
   test('it renders with rose button styles', async function (assert) {
-    this.set('style', 'primary');
-    await render(hbs`<Rose::LinkButton @style={{this.style}}/>`);
-    assert.ok(find(`.rose-button-primary`));
-
-    this.set('style', 'sample');
+    await render(hbs`<Rose::LinkButton @route="index" @style="sample"/>`);
     assert.ok(find(`.rose-button-sample`));
   });
 
   test('it supports left icon with @iconLeft', async function (assert) {
-    await render(hbs`<Rose::LinkButton @iconLeft="chevron-left" />`);
+    await render(hbs`<Rose::LinkButton @route="index" @iconLeft="chevron-left" />`);
     assert.ok(find('.rose-icon'));
     assert.ok(find('.has-icon-left'));
   });
 
   test('it supports left icon with @iconRight', async function (assert) {
-    await render(hbs`<Rose::LinkButton @iconRight="chevron-right" />`);
+    await render(hbs`<Rose::LinkButton @route="index" @iconRight="chevron-right" />`);
     assert.ok(find('.rose-icon'));
     assert.ok(find('.has-icon-right'));
   });
 
   test('it supports only icon with @iconOnly', async function (assert) {
-    await render(hbs`<Rose::LinkButton @iconOnly="help-circle-outline" />`);
+    await render(hbs`<Rose::LinkButton @route="index" @iconOnly="help-circle-outline" />`);
     assert.ok(find('.rose-icon'));
     assert.ok(find('.has-icon-only'));
   });
diff --git a/addons/rose/tests/integration/components/rose/link-button/body-test.js b/addons/rose/tests/integration/components/rose/link-button/body-test.js
deleted file mode 100644
index 2ff8aecaa..000000000
--- a/addons/rose/tests/integration/components/rose/link-button/body-test.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/link-button/body', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::LinkButton::Body />`);
-    assert.ok(find('.rose-button-wrapper'));
-  });
-
-  test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::LinkButton::Body>
-      Body content
-    </Rose::LinkButton::Body>`);
-    assert.equal(
-      find('.rose-button-wrapper').textContent.trim(),
-      'Body content'
-    );
-  });
-
-  test('it supports @iconLeft', async function (assert) {
-    await render(hbs`<Rose::LinkButton::Body @iconLeft="chevron-left"/>`);
-    assert.ok(find('.rose-icon'));
-  });
-
-  test('it supports @iconRight', async function (assert) {
-    await render(hbs`<Rose::LinkButton::Body @iconRight="chevron-right" />`);
-    assert.ok(find('.rose-icon'));
-  });
-
-  test('it supports @iconOnly', async function (assert) {
-    await render(
-      hbs`<Rose::LinkButton::Body @iconOnly="help-circle-outline" />`
-    );
-    assert.ok(find('.rose-icon'));
-  });
-});