Alert

<rh-alert>
  <h3 slot="header">Default</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
    egestas, a sollicitudin mauris tincidunt.</p>
  <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
  <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
</rh-alert>

<script type="module">
  import '@rhds/elements/rh-alert/rh-alert.js';
  import '@rhds/elements/rh-button/rh-button.js';
</script>

import { RhAlert } from '@rhds/elements/rh-alert/rh-alert.js';

RhAlert.toast({ state: 'success', message: 'Saved!' });

await RhAlert.toast({
  message: 'Your request was submitted',
});

const message = document.createElement('strong');
      message.textContent = 'Your request was submitted';
await RhAlert.toast({ message });

import { html } from 'lit';
await RhAlert.toast({
  message: html`Your request was <em>submitted</em>`,
});

import { html } from 'lit';
await RhAlert.toast({
  message: [
    'Your request was',
    html`<em>successfully</em>`,
    new Text('submitted'),
  ],
});

<template id="success-alert-content-template">
  <p>Your subscription has been successfully renewed.</p>
  <p>Contact <a href="#">Customer support</a> for more information.</p>
</template>

const template = document.getElementById('success-alert-content-template')
const { childNodes } = template.content.cloneNode(true);
const message = Array.from(childNodes);
await RhAlert.toast({ message });

import { RhAlert } from '@rhds/elements/rh-alert/rh-alert.js';

await RhAlert.toast({
  state: 'success',
  heading: 'Subscription renewed',
  message: 'Your subscription was successfully renewed',
});

import { html } from 'lit';

await RhAlert.toast({
  state: 'warning',
  persistent: true,
  message: html`Your subscription will expire in <time>two days</time>`,
});

import { AlertCloseEvent } from '@rhds/elements/rh-alert/rh-alert.js';

document.addEventListener('close', function(event) {
  if (event instanceof AlertCloseEvent) {
    switch (event.action) {
      case 'renew':
        // renew subscription
        break;
    }
  }
});

await RhAlert({
  state: 'warning',
  message: 'Your subscription is about to expire',
  actions: [
    { text: 'Renew', action: 'renew' },
    { text: 'Dismiss', action: 'dismiss' },
  ]
});

document.addEventListener('close', function(event) {
  if (event instanceof AlertCloseEvent) {
    switch (event.action) {
      case 'prevent':
        // prevent alert from closing
        event.preventDefault();
        // ... do something with event
        break;
    }
  }
});