Menu
Understand and use notifications in Umbraco backoffice (foundational concept)
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-notificationsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
| name | umbraco-notifications |
| description | Understand and use notifications in Umbraco backoffice (foundational concept) |
| version | 1.0.0 |
| location | managed |
| allowed-tools | Read, Write, Edit, WebFetch |
Notifications provide user feedback in the Umbraco backoffice through the UMB_NOTIFICATION_CONTEXT, which is consumed via the Context API. The peek() method displays temporary toast-style notifications with different types (positive, negative, warning). Notifications appear in the UI temporarily and automatically dismiss, making them ideal for action confirmations and error messages.
Always fetch the latest docs before implementing:
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
export class MyElement extends UmbLitElement {
#notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;
constructor() {
super();
this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
this.#notificationContext = context;
});
}
showSuccess() {
this.#notificationContext?.peek('positive', {
data: { message: 'Operation completed successfully!' }
});
}
}
// Success notification
this.#notificationContext?.peek('positive', {
data: { message: 'Saved successfully!' }
});
// Error notification
this.#notificationContext?.peek('danger', {
data: { message: 'Something went wrong!' }
});
// Warning notification
this.#notificationContext?.peek('warning', {
data: { message: 'Please review your changes.' }
});
this.#notificationContext?.peek('positive', {
data: {
headline: 'Success!',
message: 'Your document has been published.'
}
});
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
export class MyController extends UmbControllerBase {
async performAction() {
try {
// Do something
const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);
context?.peek('positive', {
data: { message: 'Action completed!' }
});
} catch (error) {
const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);
context?.peek('danger', {
data: {
headline: 'Error',
message: error.message
}
});
}
}
}
import { html } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
export class MyElement extends UmbLitElement {
#notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;
constructor() {
super();
this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
this.#notificationContext = context;
});
}
#onClick() {
this.#notificationContext?.peek('positive', {
data: { message: 'Button clicked!' }
});
}
render() {
return html`
<uui-button @click=${this.#onClick}>
Click me
</uui-button>
`;
}
}
async saveData() {
try {
const response = await fetch('/api/save', {
method: 'POST',
body: JSON.stringify(this.data)
});
if (response.ok) {
this.#notificationContext?.peek('positive', {
data: {
headline: 'Saved',
message: 'Your changes have been saved.'
}
});
} else {
this.#notificationContext?.peek('danger', {
data: {
headline: 'Save Failed',
message: 'Could not save your changes.'
}
});
}
} catch (error) {
this.#notificationContext?.peek('danger', {
data: {
headline: 'Error',
message: 'An unexpected error occurred.'
}
});
}
}
import { UmbMenuItemAction } from '@umbraco-cms/backoffice/menu';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
export class MyAction extends UmbMenuItemAction {
async execute() {
const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);
context?.peek('positive', {
data: { message: 'Action executed!' }
});
}
}
validateAndSave() {
if (!this.title) {
this.#notificationContext?.peek('warning', {
data: {
headline: 'Validation Error',
message: 'Title is required.'
}
});
return;
}
if (this.title.length < 3) {
this.#notificationContext?.peek('warning', {
data: {
message: 'Title must be at least 3 characters.'
}
});
return;
}
this.save();
}
positive - Success messages (green)
peek('positive', { data: { message: 'Success!' } })
danger - Error messages (red)
peek('danger', { data: { message: 'Error occurred!' } })
warning - Warning messages (orange/yellow)
peek('warning', { data: { message: 'Please review!' } })
UMB_NOTIFICATION_CONTEXT: Global context for notifications
peek() Method: Display temporary notification
Toast Style: Auto-dismissing UI notifications
Data Structure:
headline (optional) - Bold title textmessage (required) - Notification body textContext Consumption: Use consumeContext() for subscription or getContext() for one-time use
Use Cases:
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
Based on SOC occupation classification
Run tests from skill examples and generate a report (project)
Validate links and references in SKILL.md files using deterministic scripts
Umbraco backoffice extension customisation - complete working examples showing how extension types combine