Notification

Notifications keep you informed about results, warnings and errors.

Installing the notification package

Install the package together with the ZEIT ONLINE design system, because the notification styles use design-system variables:

npm install @zeitonline/notification @zeitonline/design-system
# or
yarn add @zeitonline/notification @zeitonline/design-system

Recommendation

A practical setup is to copy both CSS files from node_modules into your application styles directory and load them from there.

{
	"scripts": {
		"copy:zds": "mkdir -p ./src/assets/css && cp node_modules/@zeitonline/design-system/design-system.css ./src/assets/css/design-system.css",
		"copy:notification": "mkdir -p ./src/assets/css && cp node_modules/@zeitonline/notification/dist/notification.css ./src/assets/css/notification.css"
	}
}

Then include the styles in this order:

<link rel="stylesheet" href="./src/assets/css/design-system.css" />
<link rel="stylesheet" href="./src/assets/css/notification.css" />

Usage

import notification from '@zeitonline/notification';

notification.show({
	status: 'success',
	message: 'Der Artikel wurde gespeichert.',
	link: {
		text: 'Merkliste öffnen',
		href: 'https://www.zeit.de/konto/listen/merkliste',
	},
});

const trigger = document.querySelector('[data-copy-link]');

trigger?.addEventListener('click', () => {
	notification.showInline({
		element: trigger,
		message: 'Link copied to clipboard.',
	});
});

If you use the icon option, the notification expects an SVG symbol in the page with the id pattern svg-<name>.

<svg aria-hidden="true" style="display:none">
	<symbol id="svg-bookmark" viewBox="0 0 18 18">
		<path d="..." />
	</symbol>
</svg>

notification.show({
	icon: 'bookmark',
	message: 'Der Artikel wurde von der Merkliste entfernt.',
	button: {
		text: 'Rückgängig',
		onClick: () => {
			console.log('Undo');
		},
	},
});

What the package provides

• Bottom notifications with top or bottom placement.
• Status variants for success, warning, info and error.
• Optional action button or link.
• Inline notifications anchored to the element that triggered them.
• Accessible live regions: bottom notifications use role="alert", inline notifications use role="status".
• Auto-dismiss after 4 seconds, with pause and resume on pointer hover.
• Stacking of up to 3 bottom notifications at the same time.

Updates

Take a look at the CHANGELOG.md to see what changed in the latest releases.

Contact

If you want to give feedback about the package, write to zon-frontend@zeit.de.