diff --git a/addons/rose/addon/components/rose/toolbar/info/index.hbs b/addons/rose/addon/components/rose/toolbar/info/index.hbs
new file mode 100644
index 000000000..dc6c7f517
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/info/index.hbs
@@ -0,0 +1,3 @@
+
+ {{yield}}
+
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx
new file mode 100644
index 000000000..e12b7c5cf
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx
@@ -0,0 +1,25 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+
+
+# Toolbar Info
+
+Used to display non-interactive information in a toolbar.
+
+```htmlbars
+
+ 30 seconds ago
+
+```
+
+
+ {{
+ template: hbs`
+
+ 30 seconds ago
+
+ `,
+ }}
+
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_index.scss b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
index c72d1654c..49ae314e2 100644
--- a/addons/rose/addon/styles/rose/components/toolbar/_index.scss
+++ b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
@@ -1 +1,2 @@
+@import 'info';
@import 'toolbar';
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_info.scss b/addons/rose/addon/styles/rose/components/toolbar/_info.scss
new file mode 100644
index 000000000..7565bdd86
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/toolbar/_info.scss
@@ -0,0 +1,17 @@
+@use '../../variables/sizing';
+@use '../../variables/media';
+@use '../../utilities/type';
+
+.rose-toolbar {
+ .rose-toolbar-info {
+ @include type.type(button);
+ color: var(--ui-gray);
+ position: relative;
+ display: inline-block;
+ vertical-align: middle;
+ white-space: nowrap;
+ overflow: hidden;
+ $yPadding: sizing.rems(xxs) + sizing.rems(xxxs);
+ padding: $yPadding sizing.rems(m) $yPadding sizing.rems(l);
+ }
+}
diff --git a/addons/rose/app/components/rose/toolbar/info.js b/addons/rose/app/components/rose/toolbar/info.js
new file mode 100644
index 000000000..18fc673e1
--- /dev/null
+++ b/addons/rose/app/components/rose/toolbar/info.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/toolbar/info';
diff --git a/addons/rose/package.json b/addons/rose/package.json
index 43a537553..dfed2ed32 100644
--- a/addons/rose/package.json
+++ b/addons/rose/package.json
@@ -16,7 +16,8 @@
"lint:hbs:fix": "ember-template-lint . --fix",
"lint:js": "eslint .",
"lint:sass": "sass-lint -v -q",
- "format": "npm run format:js && npm run format:sass",
+ "format": "npm-run-all format:*",
+ "format:hbs": "prettier --write 'addon/**/*.hbs'",
"format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js",
"format:sass": "prettier --write addon/**/*.scss",
"lint:js:fix": "eslint . --fix",
diff --git a/addons/rose/tests/integration/components/rose/toolbar/info-test.js b/addons/rose/tests/integration/components/rose/toolbar/info-test.js
new file mode 100644
index 000000000..90837d5ee
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/toolbar/info-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/toolbar/info', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it renders', async function (assert) {
+ // Set any properties with this.set('myProperty', 'value');
+ // Handle any actions with this.set('myAction', function(val) { ... });
+
+ await render(hbs``);
+
+ assert.dom(this.element).hasText('');
+
+ // Template block usage:
+ await render(hbs`
+
+ template block text
+
+ `);
+
+ assert.dom(this.element).hasText('template block text');
+ });
+});