Origami Frontend Components & Services

Readme: n-notification

n-notification is not maintained by the Origami team. This means that the Origami team will not necessarily be able to help you with support requests. The people who maintain this component may be able to offer support, but it's not guaranteed.

n-notification has a support status of "experimental". This means that the component's API may change without notice, and there is no guarantee that the component is ready for production use.

Component for showing onsite notification bars to users. Concurrent notifications are stacked, most recent at the top.



import nNotification from 'n-notification';

    title: 'Optional title',
    content:'<p>Here is a message</p>',
    type: 'success', // optional, see below
    duration: 7000, // default is 5000, 0 will require user action to dismiss
    focusSelector: '.optional-focus-selector',
    returnFocusSelector: document.activeElement

Custom Events

import nNotification from 'n-notification';

const event = new CustomEvent('nNotification.show', {detail: { content: 'Title' }});


type is optional, but if specified must have one of the following values:

If a type is not provided, it will result in a default FT pink notification.

Focus Selectors

If you want to set the focus to a notification element, pass in the focusSelector and returnFocusSelector properties with an element (e.g. .optional-focus-selector) or a document property (e.g. document.activeElement). The focusSelector property is the notification element you want to focus on. The returnFocusSelector property is the element you want to return the focus to once the notification has cleared.

Duration and accessibility

The timeout default is 5000ms.

0 will require the users to explicitly dismiss the message. This is the recommended UX from DAC It was highlighted this could be too quick for dyslexic or some cognitively different users in Aug 2019 DAC assesment.

Ideas for the future


  1. Install dependencies with obt install
  2. Watch and rebuild source and demos on change with obt demo --watch --run-server
Switch component view

GitHub: n-notification@8.2.3

Install n-notification

If using the Build Service, add n-notification@^8.2.3 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/n-notification@^8.2.3".

Help & Support

n-notification is not supported directly by the Origami team. We make no guarantees, but will help if we can. First try contacting its maintainers at:

Slack: #next-dev-support
Email: next.team@ft.com