Page Notification

        <vega-flex direction="col" gap="size-20" id="basicTemplate" key={new Date().getTime()}>
			<div>
				<vega-flex gap="size-20">
					<vega-button id="with-title">With title</vega-button>
					<vega-button id="no-title" variant="secondary">
						No title
					</vega-button>
				</vega-flex>
			</div>
		</vega-flex>

    setTimeout(() => {
        document.querySelector('#basicTemplate #with-title').addEventListener('vegaClick', () => {
			window.VegaNotify.open({
				title: 'Title',
				message:
					'This is the content of notification. This is the content of notification.This is the content of notification.This is the content of notification.',
			});
		});
  		document.querySelector('#basicTemplate #no-title').addEventListener('vegaClick', () => {
			window.VegaNotify.open({
				message: 'No title notification',
			});
		});


    }, 100);

        <vega-flex direction="col" gap="size-20" id="basicTemplate" key={new Date().getTime()}>
			<div>
				<vega-flex gap="size-20">
					<vega-button id="with-action">With action</vega-button>
					<vega-button id="with-actions" variant="secondary">
						With actions
					</vega-button>
				</vega-flex>
			</div>
		</vega-flex>

    setTimeout(() => {
        document.querySelector('#basicTemplate #with-action').addEventListener('vegaClick', async () => {
			const id = await window.VegaNotify.open({
				title: 'Title',
				duration: 0,
				message: 'This notification will not be closed, because the duration is set 0',
				actionButtons: [
					{
						label: 'Confirm',
						onVegaClick: () => {
							window.VegaNotify.close(id);
						},
					},
				],
			});
		});

		document.querySelector('#basicTemplate #with-actions').addEventListener('vegaClick', async () => {
			const id = await window.VegaNotify.open({
				title: 'Title',
				duration: 10000,
				message: `This notification will close after 10s`,
				actionButtons: [
					{
						label: 'Cancel',
						onVegaClick: () => {
							window.VegaNotify.close(id);
						},
					},
					{
						label: 'OK',
						onVegaClick: () => {
							window.VegaNotify.close(id);
						},
					},
				],
			});
		});
   }, 100);

    <vega-flex gap="size-20" id="types-examples">
        <vega-button id="warning" variant="secondary">
            Warning
        </vega-button>
        <vega-button id="success" variant="secondary">
            Success
        </vega-button>
        <vega-button id="error" variant="secondary">
            Error
        </vega-button>
        <vega-button id="info" variant="secondary">
            Info
        </vega-button>
    </vega-flex>

setTimeout(() => {
		document.querySelector('#types-examples').direction = {
			default: 'row',
			S: 'col',
			M: 'row',
		};
		document.querySelectorAll('#types-examples vega-button').forEach(item => {
			item.addEventListener('vegaClick', async e => {
				const target = e.target;
				const id = await window.VegaNotify.open({
					type: target.id,
					message: `${e.target.textContent.toUpperCase()}`,
				});
			});
		});


}, 100);