diff --git a/framework/default/ortoo-core/default/lwc/message/__tests__/message.test.js b/framework/default/ortoo-core/default/lwc/message/__tests__/message.test.js
new file mode 100644
index 00000000000..267d1f75e69
--- /dev/null
+++ b/framework/default/ortoo-core/default/lwc/message/__tests__/message.test.js
@@ -0,0 +1,129 @@
+import { createElement } from 'lwc';
+import Message from 'c/message';
+
+const MESSAGE_SELECTOR = '[data-ortoo-elem-id="messagebox-message"]';
+const ICON_SELECTOR = '[data-ortoo-elem-id="messagebox-icon"]';
+const CONTAINER_SELECTOR = '[data-ortoo-elem-id="messagebox-container"]';
+
+describe('c-message', () => {
+
+ beforeEach(() => {
+ const element = createElement('c-message', {
+ is: Message
+ });
+ document.body.appendChild( element );
+ });
+
+ afterEach(() => {
+ // The jsdom instance is shared across test cases in a single file so reset the DOM
+ while (document.body.firstChild) {
+ document.body.removeChild(document.body.firstChild);
+ }
+ });
+
+ it( 'Will render the message given', () => {
+
+ const element = document.body.querySelector( 'c-message' );
+ element.message = 'the message';
+
+ return Promise.resolve()
+ .then( () =>
+ expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ).innerHTML ).toBe( 'the message' )
+ );
+ });
+
+ it( 'When no message is set, will not render anything', () => {
+
+ const element = document.body.querySelector( 'c-message' );
+
+ return Promise.resolve()
+ .then( () =>
+ expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ) ).toBe( null )
+ );
+ });
+
+ it( 'When message is set to an empty string, will not render anything', () => {
+
+ const element = document.body.querySelector( 'c-message' );
+ element.message = '';
+
+ return Promise.resolve()
+ .then( () =>
+ expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ) ).toBe( null )
+ );
+ });
+
+ it( 'When message is set to a blank string, will not render anything', () => {
+
+ const element = document.body.querySelector( 'c-message' );
+ element.message = ' ';
+
+ return Promise.resolve()
+ .then( () =>
+ expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ) ).toBe( null )
+ );
+ });
+
+ it( 'When message is set to a 0 string, will render it', () => {
+
+ const element = document.body.querySelector( 'c-message' );
+ element.message = '0';
+
+ return Promise.resolve()
+ .then( () =>
+ expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ).innerHTML ).toBe( '0' )
+ );
+ });
+
+ it( 'When variant is set to error, will set up an error message', () => {
+
+ const element = document.body.querySelector( 'c-message' );
+ element.message = 'unimportant';
+ element.variant = 'error';
+
+ return Promise.resolve()
+ .then( () => {
+ expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:error' )
+ expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--error' )
+ });
+ });
+
+ it( 'When variant is set to info, will set up an info message', () => {
+
+ const element = document.body.querySelector( 'c-message' );
+ element.message = 'unimportant';
+ element.variant = 'info';
+
+ return Promise.resolve()
+ .then( () => {
+ expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:info' )
+ expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--info' )
+ });
+ });
+
+ it( 'When variant is set to warning, will set up an warning message', () => {
+
+ const element = document.body.querySelector( 'c-message' );
+ element.message = 'unimportant';
+ element.variant = 'warning';
+
+ return Promise.resolve()
+ .then( () => {
+ expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:warning' )
+ expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--warning' )
+ });
+ });
+
+ it( 'When variant is set to success, will set up an success message', () => {
+
+ const element = document.body.querySelector( 'c-message' );
+ element.message = 'unimportant';
+ element.variant = 'success';
+
+ return Promise.resolve()
+ .then( () => {
+ expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:success' )
+ expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--success' )
+ });
+ });
+});
\ No newline at end of file
diff --git a/framework/default/ortoo-core/default/lwc/message/message.html b/framework/default/ortoo-core/default/lwc/message/message.html
new file mode 100644
index 00000000000..e1c35f9a3e7
--- /dev/null
+++ b/framework/default/ortoo-core/default/lwc/message/message.html
@@ -0,0 +1,13 @@
+
+
+
diff --git a/framework/default/ortoo-core/default/lwc/message/message.js b/framework/default/ortoo-core/default/lwc/message/message.js
new file mode 100644
index 00000000000..ccf0d3d4cb0
--- /dev/null
+++ b/framework/default/ortoo-core/default/lwc/message/message.js
@@ -0,0 +1,50 @@
+import { LightningElement, api } from 'lwc';
+import configureElementIdGenerator from 'c/elementIdGenerator';
+
+export default class Message extends LightningElement {
+
+ @api message;
+ @api variant;
+
+ @api ortooElemIdPrefix = 'messagebox';
+
+ ortooIdConfiguration = {
+ messageId: 'message',
+ iconId: 'icon',
+ containerId: 'container',
+ }
+
+ connectedCallback() {
+ configureElementIdGenerator( this );
+ }
+
+ variantToClassMapping = {
+ error: 'slds-theme--error',
+ warning: 'slds-theme--warning',
+ info: 'slds-theme--info',
+ success: 'slds-theme--success',
+ }
+
+ variantToIconMapping = {
+ error: 'utility:error',
+ warning: 'utility:warning',
+ info: 'utility:info',
+ success: 'utility:success',
+ }
+
+ get messagePopulated() {
+ return ( this.message && !/^\s*$/.test( this.message ) );
+ }
+
+ get themeClass() {
+ return this.variantToClassMapping[ this.variant ];
+ }
+
+ get topLevelClasses() {
+ return this.themeClass+' slds-notify--toast slds-notify slds-notify--toast forceToastMessage';
+ }
+
+ get iconName() {
+ return this.variantToIconMapping[ this.variant ];
+ }
+}
\ No newline at end of file
diff --git a/framework/default/ortoo-core/default/lwc/message/message.js-meta.xml b/framework/default/ortoo-core/default/lwc/message/message.js-meta.xml
new file mode 100644
index 00000000000..884004a97fa
--- /dev/null
+++ b/framework/default/ortoo-core/default/lwc/message/message.js-meta.xml
@@ -0,0 +1,5 @@
+
+
+ 52.0
+ false
+
\ No newline at end of file